SVG 動畫

animate

svg#pic1(viewbox="-50 -50 100 100")
 
 line(x1=-20, y1=0, x2=20, y2=0)
 line(x1=0, y1=-20, x2=0, y2=20)
 circle(cx=0,cy=0,r=10)
 //attributeName="要動的地方"
 //dur="秒數"
 //values="影格"
 //repeatCount="重複次數,indefinite重複無限"
   animate(attributeName="r" dur="2s" values="10;30;10" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px
 
#pic1
 stroke: black
 stroke-width: 3px
 & circle
  fill: white

Display

animateTransform & group

svg#pic2(viewbox="-50 -50 100 100")
 circle(cx=0, cy=0, r=10)
 //group: g,Jade内子元素要縮排。animate要放在g内層
 g
  line(x1=-20, y1=0, x2=20, y2=0)
  line(x1=0, y1=-20, x2=0, y2=20)
  rect(x=-20, y=-20, width=40, height=40)
  //attributeName="transform"
     //type="scale or rotate ..."
     //dur="秒數"
     //values="影格"
  //repeatCount="重複次數,indefinite重複無限"
  animateTransform(attributeName="transform" type="rotate" dur="2s" values="0;360" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px
 
#pic2
 stroke: black
 stroke-width: 3px

 & circle
  fill: white

 & rect
  fill: none

Display

begin:指定開始時間,産生錯落效果

//begin: 開始秒數,也可以指定負數,這樣開始時就可以直接動
svg#pic4(viewbox="0 0 200 200")
 rect(x=0, y=0, width=20, height=100)
  animate(attributeName="height" begin="0s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=30, y=0, width=20, height=120)
  animate(attributeName="height" begin="-0.3s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=60, y=0, width=20, height=140)
  animate(attributeName="height" begin="-0.6s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=90, y=0, width=20, height=160)
  animate(attributeName="height" begin="-0.9s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=120, y=0, width=20, height=120)
  animate(attributeName="height" begin="-1.2s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=150, y=0, width=20, height=80)
  animate(attributeName="height" begin="-1.5s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=180, y=0, width=20, height=60)
  animate(attributeName="height" begin="-1.8s" dur="2s" values="100;200;100" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px

Display

Leave a Reply

Your email address will not be published. Required fields are marked *