SVG SMIL 动画（基本动画、变换动画）

一、简介

动画标签：<animate>、<animateTransform>、<animateMotion> ...
动画元素、属性定位以及动画参数设置：
- attributeName、attributeType
- from、to、dur、repeatCount、fill …
- calcMode …

二、使用方式

定位动画目标
- Internal Resource Identifier 定位，指定需要生效动画的标签。
```
<animate xlink:href="url(#rect1)"></animate>
```
- 包含在目标元素内，对包含的父元素生效动画。
```
<rect x="0" ...><animate></animate>
</rect>
```

设置要进行动画的属性以及变化范围、时间长度

<animate xlink:href="url(#rect1)"attributeType="XML"attributeName="x"from="0" to="100"dur="2s"repeatCount="1">
</animate>

三、基本动画

animate 支持叠加动画，也就是同一个标签支持添加多个 animate 动画标签。
效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {margin: 0;padding: 0;background-color: #001122;/* 全屏 */width: 100%;height: 100%;/* 清空字号，免得影响 svg */line-height: 0;font-size: 0;}</style>
</head>
<body><!-- animateattributeType: 标签类型attributeName: 需要支持动画的属性begin: 动画开始时机from: 开始值to: 结束值dur: 动画时间fill: freeze（停留在最后）、none（默认，回到起点）repeatCount: 动画次数，indefinite(无限次)，默认 1--><!-- svg --><svg width="100%" height="100%"><!-- 1 平移动画 --><rect x="50" y="10" width="40" height="40" fill="red"><!-- 动画 --><animate attributeType="XML"attributeName="x"from="50" to="200"dur="1s"repeatCount="indefinite"/><!-- 颜色变化 --><animate attributeType="XML"attributeName="fill"from="red" to="yellow"dur="1s"repeatCount="indefinite"/></rect><!-- 2 平移动画 - 往返 --><rect x="50" y="80" width="40" height="40" fill="red"><!-- 动画 --><animate id="goright1" attributeType="XML"attributeName="x"begin="0; goleft1.end"from="50" to="200"dur="1s"fill="freeze"/><animate id="goleft1" attributeType="XML"attributeName="x"begin="goright1.end"from="200" to="50"dur="1s"fill="freeze"/><!-- 颜色变化 --><animate attributeType="XML"attributeName="fill"from="red" to="yellow"dur="1s"repeatCount="indefinite"/></rect><!-- 3 平移动画 - 往返 - 暂停 --><rect x="200" y="150" width="40" height="40" fill="red"><!-- 动画 --><animate id="goleft2" attributeType="XML"attributeName="x"begin="0; goright2.end + 1s"from="200" to="50"dur="1s"fill="freeze"/><animate id="goright2" attributeType="XML"attributeName="x"begin="goleft2.end + 1s"from="50" to="200"dur="1s"fill="freeze"/><!-- 颜色变化 --><animate attributeType="XML"attributeName="fill"from="red" to="yellow"dur="1s"repeatCount="indefinite"/></rect></svg>
</body>
</html>

四、变换动画

animateTransform 支持叠加动画，也就是同一个标签不能添加多个 animateTransform 动画标签。
效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {margin: 0;padding: 0;background-color: #001122;/* 全屏 */width: 100%;height: 100%;/* 清空字号，免得影响 svg */line-height: 0;font-size: 0;}</style>
</head>
<body><!-- animateTransformattributeType: 标签类型attributeName: 需要支持动画的属性type: 子属性begin: 动画开始时机from: 开始值to: 结束值dur: 动画时间fill: freeze（停留在最后）、none（默认，回到起点）repeatCount: 动画次数，indefinite(无限次)，默认 1--><!-- svg --><svg width="100%" height="100%" viewBox="-400 -400 800 800"><!-- 1 原地旋转 --><rect x="0" y="0" width="40" height="40" fill="red"><!-- 动画 --><animateTransform attributeType="XML"attributeName="transform"type="rotate"from="0"to="360"dur="3s"repeatCount="indefinite"></rect><!-- 1 原地旋转 - 缩放 - 不支持多个动画叠加 --><rect x="0" y="80" width="40" height="40" fill="red"><!-- 动画 --><!-- <animateTransform attributeType="XML"attributeName="transform"type="rotate"from="0"to="360"dur="3s"repeatCount="indefinite"> --><animateTransform attributeType="XML"attributeName="transform"type="scale"from="1"to="2"dur="3s"repeatCount="indefinite"></rect></svg>
</body>
</html>

五、轨迹 Path 动画（animateMotion）

六、Scripting Animation（脚本动画）

七、参考文档

参考资料

http://www.w3.org/TR/SVG/animate.html

http://www.zhangxinxu.com/wordpress/?p=4333

SVG SMIL 动画（基本动画、变换动画）相关推荐

SVG SMIL animation动画详解
一.SVG SMIL animation概览 1. SMIL是什么? SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体 ...
超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
[转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
SVG SMIL animation动画详解----转载
一.SVG SMIL animation概览 1. SMIL是什么? SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体 ...
html2d动画,HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
交互性 SVG拥有良好的用户交互性,例如: 1. SVG能响应大部分的DOM2事件. 2. SVG能通过cursor良好的捕捉用户鼠标的移动. 3. 用户可以很方便的通过设置svg元素的zoomAnd ...
html文字自动上翻,jQuery超酷文字随机翻转变换动画特效
Flapper是一款效果非常酷的文字随机翻转变换动画jQuery特效.它的效果类似于机场或车站显示航班或车次的文字变换效果,每个文字都随机变换几次,然后才显示某个设定好的文字. 该文字特效可以显示文字 ...
Flex的动画效果与变换(1)
Flex的动画效果与变换!(一) 在Flex里面不像在Flash里面随意制作动画了,Flex更趋向于应用程序,而不是动画制作了,所以没有了时间轴的概念.在Flex中使用动画效果,可以用Flex自带的E ...
css 右上角翻开动画_CSS3 transition动画、transform变换、animation动画
一.CSS3 transition动画 transition可以实现动态效果,实际上是一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性参数: 1.transition-propert ...
Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...

SVG SMIL 动画（基本动画、变换动画）

一、简介

二、使用方式

三、基本动画

四、变换动画

五、轨迹 Path 动画（animateMotion）

六、Scripting Animation（脚本动画）

七、参考文档

SVG SMIL 动画（基本动画、变换动画）相关推荐

最新文章

热门文章

SVG SMIL 动画（基本动画 、变换动画）

一、简介

二、使用方式

三、基本动画

四、变换动画

五、轨迹 Path 动画（animateMotion）

六、Scripting Animation（脚本动画）

七、参考文档

SVG SMIL 动画（基本动画 、变换动画）相关推荐

最新文章

热门文章

SVG SMIL 动画（基本动画、变换动画）

SVG SMIL 动画（基本动画、变换动画）相关推荐