svg-animation(学习笔记)

SVG MDN

SVG Animation

• SMIL
• JavaScript
• CSS Animation
• http://study.qiyun.360.cn/course/festar2018/lesson/37

变换动画(Transform)

1. 平移 translate
2. 旋转 rotate
3. 缩放 scale
4. 斜歪 skew
5. 矩阵变换 matrix

electronjs

从矩阵与空间操作的关系理解CSS3的transform

变换动画(Morph)

即非线性变换动画，常见类型有：

1. 描边动画
2. 路径轨迹动画
3. 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·赵四

学习资料：

• SVG动画实践
• SVG Tutorial
• 张鑫旭的技术博客
• w3cplus
• SVG开发与应用
• SVG动画精髓
• 优秀网页设计
• codepen.io