SVG Animation
- SMIL
- JavaScript
- CSS Animation
- http://study.qiyun.360.cn/course/festar2018/lesson/37
变换动画(Transform)
- 平移 translate
- 旋转 rotate
- 缩放 scale
- 斜歪 skew
- 矩阵变换 matrix
变换动画(Morph)
即非线性变换动画,常见类型有:
- 描边动画
- 路径轨迹动画
- Path变形动画
描边动画
通过修改路径的stroke-dashoffset 实现的动画
- css动画
js 轻量 SVG 描边动画库
example
Flower SVG
Alex Aloia LOGO
Bayleys
路径轨迹动画
元素沿着某条路径运动的动画
- SVG 动画表标签animateMotion
- JavaScript动态计算
- CSS offset-path 属性
Path变形动画
一条路径变换成另一条路径的动画
- CSS 对路径d 属性进行动画
- Snap.svg
- greensock
- SVG-Morpheus
- pasition
只要有想法,不需要复杂的动效我们也能做出好看的动画。
——尼古拉斯·D·赵四
学习资料: