iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0

SVG-animation(二)

昨天介紹了animate這個動畫元素,沒看過看這裡
今天要來介紹剩下的animateTransformanimateMotion

animateTransform

animateTransform可以讓元素產生形變動畫

屬性 說明
dur 動畫持續時間
repeatCount 動畫執行次數
type 選擇transform方式,有scale/rotate/translate
from 形變起始狀態
to 形變結束狀態
<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="10" fill="red">
    <animateTransform dur="3s" attributeName="transform" repeatCount="indefinite" type="scale" from="1" to="2">
  </circle>
</svg>

animateMotion

animateMotion可以讓元素沿著路徑方向移動,一樣包在要使用的元素裡面,設置dur持續時間,接著設置屬性path的移動路徑,另外如果設定了移動路徑,移動元素x,y=(0,0)即是路徑M起始點

屬性 說明
dur 動畫持續時間
repeatCount 動畫執行次數
rotate 隨路徑自動旋轉

如下範例,圓的圓心就是M(100,100)

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  Q150 150 ,200 100 T300 100" stroke="black" fill="transparent"/>
  <circle cx="0" cy="0" r="10" fill="red">
    <animateMotion dur="1s" path="M100 100  Q150 150 ,200 100 T300 100" repeatCount="indefinite" rotate="auto">
  </circle>
</svg>

~SVG龜速學習中,如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]https://developer.mozilla.org/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL
[2]https://www.oxxostudio.tw/articles/201409/svg-21-smil-animation.html
[3]四個 SVG 動畫應用範例


上一篇
SVG-fill
下一篇
SVG手寫動畫-Bye!+心得結論
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言