svg動畫筆記

移動

<animateMotion dur="0.5s" begin="animateMotion7455.end + 3s" fill="freeze" additive="sum" id="animateMotion7456">
<mpath xlink:href="#path1050" />
</animateMotion>

路徑起點要在畫板的左上角。如果提示沒有定義命名空間則加上xmlns:xlink="http://www.w3.org/1999/xlink"

如果開啟rotate="auto",那就必須把要移動的元素的x跟y刪掉或等於0,再把路徑起始點移到元素起始處。

動畫

 <animate attributeName="y" fill="freeze" id="aa3" begin="aa2.end" dur="1s" values="100;150" />

這個似乎比animateMotion更好用。

移形animateTransform

MDN介紹

示例:

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">
    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite"/>
    </polygon>
</svg>
旋轉效果

根據這裏的描述,如果想添加多個animateTransform就需要套多層<g></g>。但是後来發現這個說法是錯的,正確操作是加入屬性additive="sum",来自這裏。(update at 2024-03-12:同時還要用values,不能用from-to。)(要先轉後走。)

2022-07-17 14:51:35 補充:如果是位移translate,那matrix(1 0 0 1 X Y)等於translate(X,Y),同時additive="sum"會加到原先的transform裏去。animateTransform不支持type="matrix"。

實現翻轉

一閃一閃Set

<g id="241" sb:layerName="ani" sb:layerVisible="true" sb:layerLocked="false" >
<set id="set7" attributeName="opacity" to="1" begin="0;set8.end" dur="1s" />
<set id="set8" attributeName="opacity" to="0" begin="set7.end" dur="1s" />
</g>

一閃一閃可以用兩個set互調實現,這應該算是最簡單的動畫了。(好像animate也有這種效果?)

Leave a Comment