ejmoog
1
我只懂簡單的動畫，要做工程級別的話，可能要找其它辦法。
（發現傳到這裏的svg不能動）
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sb="http://simplector.lyoshka.net/base/2.0"
xmlns:sp="http://simplector.lyoshka.net/pro/2.0"
width="204.0px"
height="154.0px"
viewBox="0 0 204.0 154.0"
sb:fontSize="Custom"
sb:pageOrientation="Portrait"
version="1.1"
sb:version="2.0.27"
>
<desc>Created in Simplector</desc>
<rect
id="380"
fill="rgb(236,244,247)"
fill-opacity="1.0"
stroke-width="1.0"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="3.5"
stroke="rgb(181,166,66)"
stroke-opacity="1.0"
x="0.0"
y="0.0"
width="205.22226"
height="155.0888"
rx="0.0"
ry="0.0"
sb:layerName="RectFigure-380"
sb:layerVisible="true"
sb:layerLocked="false"
>
</rect>
<text
id="376"
fill="rgb(127,0,255)"
fill-opacity="1.0"
stroke-width="1.0"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="3.5"
stroke="rgb(0,0,0)"
stroke-opacity="0.0"
x="40.0"
y="80.0"
font-size="36.0"
sb:fontSize="36.0px"
sb:layerName="TextFigure-376"
sb:layerVisible="true"
sb:layerLocked="false"
>
天蒼人頡
<animateTransform attributeName="transform"
type="rotate"
additive="sum" from="0 80 90" to="360 80 90" dur="5s" repeatCount="indefinite"/>
<animateTransform
id="t1" attributeName="transform"
type="scale"
additive="sum" from="1" to="1.5" dur="2" begin="0s;t2.end"/>
<animateTransform
id="t2" attributeName="transform"
additive="sum" type="scale"
from="1.5" to="1" dur="2" begin="t1.end" />
</text>
</svg>
svg動畫有三種標籤：
- animate
- animateTransform
- animateMotion
其中animate可對大部份屬性進行動畫，比如坐標、顏色、長寬等。
animateTransform可用於旋轉、拉伸方面的動畫。
animateMotion是按一個指定的路徑移動，並且還可以設定其根據路徑方向旋轉。
animate如果針對x、y這兩個屬性也可以實現移動，有時它比animateMotion好用，比如我在做華容道動畫時，因為它就是上下左右垂直移動，因此我用animate来實現位移。
animateTransform也可以實現位移，它是靠「不改變元素本身的屬性」的方式實現的。不過在使用這種動畫時，要注意原来的transform屬性可能會被重寫。
ejmoog
3
css要寫@keyframe，我更願意使用標籤。
要實現點擊事件也很簡單：
<animate begin="abutton.click" />
<rect id="abutton"></rect>
ejmoog
4
給自己定了個任務，做出一個星星一邊旋轉一邊左右移動的動畫：
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sb="http://simplector.lyoshka.net/base/2.0"
xmlns:sp="http://simplector.lyoshka.net/pro/2.0"
width="240.0px"
height="120.0px"
viewBox="0 0 240.0 120.0"
sb:fontSize="Custom"
sb:pageOrientation="Portrait"
version="1.1"
sb:version="2.0.27"
>
<desc>Created in Simplector</desc>
<rect
id="377"
fill="rgb(79,47,79)"
fill-opacity="1.0"
stroke-width="1.0"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="3.5"
stroke="rgb(0,0,0)"
stroke-opacity="0.0"
x="0.0"
y="0.0"
width="240.0"
height="120.0"
rx="0.0"
ry="0.0"
sb:layerName="RectFigure-377"
sb:layerVisible="true"
sb:layerLocked="false"
>
</rect>
<path
id="376"
fill="rgb(255,255,0)"
fill-opacity="1.0"
stroke-width="1.0"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="3.5"
stroke="rgb(112,219,147)"
stroke-opacity="1.0"
d="
M 28.164787 8.930618 L 49.06787 43.672363 L 8.318293 46.54372 L 47.836166 55.89082
L 28.556644 93.20344 L 57.071033 63.433105 L 68.98752 106.59564 L 67.67343 63.281097
L 102.92231 86.38877 L 73.21245 54.091278 L 113.4411 42.045555 L 69.919975 41.518223
L 76.8584 4.5723953 L 57.684925 37.62196 Z
"
sb:layerName="PathFigure-376"
sb:layerVisible="true"
sb:layerLocked="false"
sb:pathType="path"
>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 60 60;720 180 60;1440 60 60" dur="7s" repeatCount="indefinite"/>
<animateTransform attributeName="transform" attributeType="XML" additive="sum" type="translate" values="0 0;120 0;0 0" dur="7s" repeatCount="indefinite"/>
</path>
</svg>
關鍵代碼就是最下面兩個animateTransform標籤，一個用来旋轉，一個用来移動。
當兩個以上的animateTransform相互配合時，步調要一致，也就是說當圖形移走時，旋轉中心也要跟著走。
還有記的加上additive="sum"屬性，否則你會以為animateTransform不能聯用。（某教程網站甚至都不知道這個，說animateTransform的聯用要套標籤！）
可點擊此處觀看動畫效果。
（順帶為手機上唯一能自由免費導出svg的軟件simplector做個廣告，我做的動畫都是先用simplector快速畫完矢量圖之後，再用文本編輯器jota打開，貼粘動畫標籤製作而成。）
ejmoog
5
目前我認為svg動畫應該是矢量動畫 最簡便的實現辦法了。
其它的兩種辦法是css動畫和canvas動畫，或許都沒那麼好弄，並不會形成單個文件。
當然css也可以配合svg，而且一些教程也這樣寫。我的看法是，css動畫確實也可以使svg元素動起来，但css原本的用途是用於html的基礎元素。同時，如果該svg檔是用< object>引用的話，那就有可能會造成樣式污染。
另外，如果不是矢量動畫，而是位圖動畫，那是另一種操作。位圖動畫就需要一幀一幀的畫，雖然熟練之後也還算方便，但是…某軟件導出gif會加水印…同時，你的幀別不夠就會顯的卡頓。
所以，用simplector或inkscape畫個svg之後，再（經過計算）插入動畫標籤，應該就是製作動畫最簡便的辦法了。（inkscape另有動畫輔助軟件）
ejmoog
7
感謝你對Lottie的介紹。
我去了解了之後，認為，它有點像之前的flash，同樣是矢量播放器。但是adobe flash明顯要霸道很多。Lottie（裸體）只是一種矢量動畫方式，它不提供動畫製作工具，我們需要另外找軟件製作動畫並導出LottieFile格式。
如果我們用上了synfig等工程軟件，那確實可以做出高質量的動畫，只不過複雜程度會變的很高。
現在也不流行做動畫了，因為拍視頻再剪輯會更快也更好看。做動畫成本很高，當然如果你預算充足劃的来，那就另當別論。
動畫適合用在一些現實無法實現的地方，比如我做的華容道講解，3b1b的數學視頻等。
ejmoog
8
geogebra.org的網頁也可以視作是一個矢量動畫播放器，乃至可以控制其參數。
qinshou
9
inkscape的jessyink插件好像能做动画，但我win10跑插件报错
ejmoog
11
這個之前已經有人推薦過了，不過我一直沒有去試，改天要去試試看。
