svgdr教程·动画

马黑黑 · 发表于 2024-11-12 11:51

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

动画

指令：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中灵活应用。

返回目录