本文为《硬核运营》svg部分的学习实践
微信公众平台支持的动画类型
| 序号 | 元素 | 属性名称 | 备注 |
|---|---|---|---|
| 1 | animate | x | 起点坐标 |
| 2 | animate | y | 起点坐标 |
| 3 | animate | width | 宽 |
| 4 | animate | height | 高 |
| 5 | animate | r（半径） | cx ,cy（圆的中心坐标） |
| 6 | animate | opacity | 不透明度 |
| 7 | animate | d | |
| 8 | animate | points | |
| 9 | animate | stroke（描边） | stroke-width , stroke-dassoffset, stroke-linecap |
| 10 | animate | fill | 填充颜色/动画状态 |
| 11 | set | visivility | 可见性 |
| 12 | animateTransform | translate | 位移 |
| 13 | animateTransform | transform | |
| 14 | animateTransform | scale | |
| 15 | animateTransform | raotate | 旋转 |
| 16 | animateTransform | skewX | 倾斜 |
| 17 | animateTransform | skewY | 倾斜 |
| 18 | animateMotion | - | path, rotate, keypoints, mpath |
摊开一张画布
我们把SVG交互设计想象成作画的过程，假设一个100*100像素的画布。
<svg height="100" width="100">
</svg>
圆形
<circle>...</circle>
绘制一个圆形，只需要知道圆心坐标和半径。
circle 圆
cx圆心横坐标
cy 圆心纵坐标
r 半径
fill是填充色
stroke 描边
stroke-width 描边宽度
颜色可以有三种表达方式，例如红色怎么表示？
①颜色英文 例如：fill="red"
②16进制 例如：fill="#ff0000"
③RGB 例如 ：fill="rgb(255,0,0)"
<svg height="100" width="100">
<circle cx="50" cy="50" r="30" fill="#ec6969" stroke="green" stroke-width="2" >
</circle>
</svg>
矩形
<rect>...</rect>
<!--rect 矩形元素-->
<svg width="100%" height="200">
<rect x="10" y="10" width="300" height="150" style="stroke:green;stroke-width:5;fill:red" id="1.2">
</rect>
</svg>
绘出一个矩形，需要起始位置坐标（x和y），和宽度（width），高度（height）。
注意：当width="100%"的时候，画布是整个网页的宽度。
矩形的起点坐标，就是矩形的左上角的坐标。
矩形动画
<!--矩形动画-->
<svg width="250" height="250" id="1.3">
<rect x="50" y="50" width="100" height="100" fill="gray">
<animate attributeName="x" from="50" to="250" dur="3s" repeatcount="2" fill="remove">
</animate>
<animate attributeName="y" from="50" to="250" dur="3s" repeatcount="2" fill="remove">
</animate>
</rect>
</svg>
注意：x 、y、width、height可以单独变化，也可以一起变化。
<animate attributeName="x" from="50" to="250" dur="3s" repeatcount="2" fill="remove">
动画元素<animate>...</animate>
attruibuteName 属性名
from 初始值
to 终值
dur 持续时间
repeatcount 重复次数
①可以填入具体的数值，例如2，就表示动画重复2次
②可以填入“indefinite”,表示无限循环
fill=" "
①remove 动画结束后保持在起始位置
②freeze 动画结束后保持在终止位置
圆形动画，圆的半径可以变化
<!--圆形动画-->
<svg width="500" height="500" id="1.5">
<circle cx="100" cy="100" r="50" fill="#ff0000">
<animate attributeName="r" values="50;70;90" keyTimes="0;0.2;1" dur="4s">
</animate>
</circle>
</svg>
<animate attributeName="r" values="50;70;90" keyTimes="0;0.2;1" dur="4s">
</animate>
values="50;70;90" 圆的半径 从50->70->90
格式
values="参数1;参数2;参数3......."
可以看出来可以定义动画的多个关键帧，而from 和to来只能定义参数的起始和结束。
keyTimes="0;0.2;1"
keytimes 在默认的状态下，第一个时间值为0，最后一个时间值为1。是values对应的时间分配比
意思就是，半径50->70动画分配 4x0.2=0.8s的时间，70->90，分配了4 x0.8=3.2s的时间。
饿了 ，明天再写
