·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
svgdr教程·动画
动画
指令：animate()
参数：name, options
语法：animate(name, options)
注意： 本指令返回上文对象，即要运行动画的元素
参数解释：
① name - SVG动画名称，必须，共四种：set、animate、animateMotion、animateTransform
② options - 动画属性键值对数据集合，以键值对方式组织，例：{ attributeName: 'transfrom', begin: '0s', ... } * 凡以 {...} 组织键值对数据，健名若出现短横线（例如 stroke-width）的，均应使用小角单或双引号包裹，这是JS相关规则
下面对四种动画进行演示：
（一）set 动画 : 为元素的任何属性设定简易动画，效果类似于CSS的:hover简单交互
//矩形
dr.rect(10,10,190,100,'gray');
dr.animate('set', {
attributeName: 'fill', /* 填充色动画 */
to: 'fuchsia', /* 变为紫红色 */
dur: '1s', /* 变化过程时长 */
begin: '2s; click', /* 触发机制 ：2秒后、单击 */
});
//圆 ：参照矩形理解动画各参数含义
dr.circle(300,60, 40, 'teal').animate('set', {
attributeName: 'cx',
to: 750,
dur: '1s',
begin: '2s; click',
});
效果演示(打开2秒后运行动画，或单击图像触发动画)：
svgdr绘制指令生成的SVG代码：
（二）animate 动画 ：set() 动画的成人版，提供完整的基于元素属性的可控动画，不包含transform形变动画（另开有动画体系）
svgdr 绘制代码：
dr.rect(10,10,190,100,'gray').animate('animate', {
attributeName: 'fill',
to: 'fuchsia',
dur: '1s',
begin: '2s; click',
repeatCount: 10,
restart: 'whenNotActive', /* 重启动画 ：always | whenNotActive | never */
});
dr.circle(300, 60, 40, 'tan').animate('animate', {
attributeName: 'cx',
values: '300; 750; 300',
dur: '2s',
begin: '2s; click',
repeatCount: 10,
restart: 'whenNotActive',
});
效果（动画结束后可单击重启动画）：
最终生成的SVG代码：
（三）animateTransform 动画 ：SVG transform 形变动画，包含 rotate、translate、scale 和 skew
svgdr 绘制代码：
dr.rect(40,40,100,100,'peru').animate('animateTransform', {
attributeName: 'transform', /* 动画名称永远是 transform */
type: 'rotate', /* 动画类型 ： translate | rotate | scale | skew */
from: '0 90 90', /* 旋转原点 ：x + width / 2, y + height / 2*/
to: '360 90 90',
dur: '3s',
begin: '2s; click',
repeatCount: 10,
restart: 'whenNotActive',
});
dr.circle(260, 90, 50, 'peru').animate('animateTransform', {
attributeName: 'transform',
type: 'translate', /* 平移 */
values: '0; 480; 0', /* translate位移距离：从移动0开始，移动480px，再反向移动 */
dur: '3s',
begin: '2s; click',
repeatCount: 10,
restart: 'whenNotActive',
});
效果演示（动画若已停止可点击元素继续）：
svgdr 绘制指令生成的SVG代码：
（四）animateMotion 动画 ：路径动画，设置元素沿路径运动
一个简单的实例效果（动画停止后单击元素重启动画）：
svgdr 绘制指令：
//路径 M 指令规定了元素运动起点，元素实际运动时会受到元素初始位置的影响
dr.rect(0,0,30,20,'peru').animate('animateMotion', {
path: 'M100 100 V320 H400 L200 200 H520 V20 H750 V320', /* 路径 */
dur: '10s',
begin: '2s;click',
fill: 'freeze', /* 结束时保持的状态 freeze | remove（缺省默认） */
restart: 'whenNotActive',
rotate: 'auto', /* 元素是否按路基走向调整自己的朝向 auto | auto-reverse | 角度数值 */
});
svgdr生成的SVG代码：
【说明】animateMotion 路径动画还有一个子标签 mpath 用以取代动画属性 path，svgdr 尚未实现，敬请期待。
本节的内容，因篇幅关系，未能详细介绍svg动画全方位知识，对svg动画感兴趣的朋友可以查询相关资料进行学习研究并在svgdr中灵活应用。
前一篇: svgdr教程·渐变
下一篇: svgdr教程·draw + addTo
评论列表 [2条]
#2 | 小希 于 2024-11-12 19:20 发布: 这几种动画居然还不一样，原来还有这么详细的区分。。好看，动画总是可爱的，特别是最后的路径动画
#1 | 悄然 于 2024-11-12 14:48 发布: values: '0; 480; 0', /* translate位移距离：从移动0开始，移动480px，再反向移动 */ 看到这句的注解了，看来我昨晚上对values="0;1;0"理解的是错误的。。
