SVG动画

动画原理

SVG动画，就是元素的属性值关于时间的变化。 如下图来说，元素的某个属性值的起始值（from）到结束值（to）在一个时间段（duration）根据时间函数（timing-function）计算出每一帧（frame）的插值（interpolation）作为变换的行为。

PS：SVG动画是帧动画，在SVG里也就是每秒设置多少个value值。

SVG动画语法

SVG动画是基于SMIL（Synchronized Multimedia Integration Language）语言的，全称是同步多媒体集成语言。

SVG动画使用

SVG元素使用动画有两种方式：

1. 被xlink:href引用

<animate  xlink:href="url(#rect1)"></animate>

2. 包含在目标元素里

<rect  x="0"  ...><animate></animate>
</rect>

<animate>标签

该标签用于基本动画。

参数描述
attributeName要变化属性名称
1.可以是元素直接暴露的属性
2.可以是CSS属性
attributeType 用来表明attributeName属性值的类型
支持三个固定参数，CSS/XML/auto，默认值auto。
例如：x、 y以及transform就属于XML, opacity就属于CSS。
from起始值
起始值与元素的默认值是一样的，该参数可省略。
to结束值
by相对from的变化值
PS：当有to值时，该值无效。
values动画的多个关键值，用分号分隔。
dur持续时间
取值：常规时间值 | "indefinite"
repeatCount动画执行次数
取值：合法数值或者“indefinite”
fill动画间隙的填充方式
取值：freeze | remove（默认值）。
remove：表示动画结束直接回到开始的地方。
freeze：表示动画结束后保持了动画结束之后的状态。
calcMode控制动画的快慢
取值：discrete | linear（默认值） | paced | spline.
中文意思分别是：“离散”|“线性”|“踏步”|“样条”。
另外，该参数要结合keyTimes、keySplines使用，数值的是对应values的，
所以如果没有设置values和keyTime或keySplines，是没有效果的。
begin动画开始的时机，取值：
time-value | offset-value | syncbase-value | event-value | repeat-value |
accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"
1. time-value：动画开始时间，可传多个值，分号分隔。
2. syncbase-value：[元素的id].begin/end +/- 时间值（offset-value）
    某个动画效果开始或结束触发此动画的，可加上偏移量。
3. event-value：事件触发
4. repeat-value：指某animation重复多少次开始。
    语法为：[元素的id].repeat(整数) +/- 时间值
endend与begin除了名字和字面含义不一样，其值的种类与表意都是一模一样的。

PS：只列出常用参数，其他请查阅参考文献。

例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect x="50" y ="50" width="100" height="50" fill="red"><animate attributeType="XML"attributeName="x"from="50"to="400"dur="5s"fill="freeze"></animate></rect><rect x="50" y ="150" width="100" height="50" fill="green"><animate attributeType="XML"attributeName="x"from="50"by="400"dur="5s"fill="freeze"></animate></rect><rect x="50" y ="250" width="100" height="50" fill="blue"><animate attributeType="XML"attributeName="x"values="50;450;50"dur="10s"></animate></rect><rect x="50" y ="350" width="100" height="50" fill="orange"><animate attributeType="XML"attributeName="x"dur="10s"values="50;450;50"calcMode="spline"keySplines=".5 0 .5 1; 0 0 1 1"fill="freeze"></animate></rect><rect x="50" y ="450" width="100" height="50" fill="black"><animate attributeType="XML"attributeName="x"from="50"by="400"dur="5s"calcMode="spline"keySplines=".5 0 .5 1; 0 0 1 1"fill="freeze"></animate></rect>
</svg>

效果：

begin例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><text x="50" y="30" id="t" stroke="red">click red go</text><rect x="50" y ="50" width="100" height="50" fill="red"><animate attributeType="XML"attributeName="x"begin="t.click"from="50"to="400"dur="5s"fill="freeze"></animate></rect><rect x="50" y ="150" width="100" height="50" fill="green"><!--表示的是3s之后动画开始，10s时候动画再开始一次（如果之前动画没走完，会立即停止从头开始）--><animate attributeType="XML"attributeName="x"begin="3s;10s"from="50"to="400"dur="5s"fill="freeze"></animate></rect><rect x="50" y ="250" width="100" height="50" fill="blue"><animate id="goleft" attributeType="XML"attributeName="x"from="50"to="400"dur="5s"fill="freeze"></animate><!--注意begin的id是animate的id，不是元素的--><animate attributeType="XML"attributeName="y"begin="goleft.end"to="350"dur="2s"fill="freeze"></animate></rect><rect x="50" y ="350" width="100" height="50" fill="orange"><animate id="goleft" attributeType="XML"attributeName="x"from="50"to="400"dur="5s"fill="freeze"></animate><!--注意begin的id是animate的id，不是元素的--><animate attributeType="XML"attributeName="y"to="400"dur="5s"fill="freeze"></animate></rect><line stroke='black' x1="50" y1="350" x2="500" y2="350"/><line stroke='black' x1="50" y1="400" x2="500" y2="400"//>
</svg>

效果：

注意：

1. 多个animate是可以叠加的。

<animateTransform>标签

该标签用于变换动画，animateTransform也有animate的参数，额外的是type。

参数描述
type变换的类型，取值：translate、scale、rotate、skewX、skewY

例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 800 800"><rect x="50" y ="50" width="50" height="50" fill="red"><animateTransform attributeName="transform"attributeType="XML"type="rotate"from="0 75 75"to="360 75 75"dur="2"repeatCount="indefinite"/></rect><!--x、y都放大了--><rect x="50" y ="150" width="50" height="50" fill="green"><animateTransform attributeName="transform"attributeType="XML"type="scale"from="1"to="2"dur="2"fill="freeze"/></rect>     <rect x="50" y ="250" width="50" height="50" fill="blue"><animateTransform attributeName="transform"attributeType="XML"type="translate"to="250 0"dur="2"fill="freeze"/></rect><rect x="50" y ="150" width="50" height="50" fill="black"><animateTransform attributeName="transform"attributeType="XML"type="rotate"from="0 75 125"to="360 75 125"dur="2"repeatCount="indefinite" additive="sum"/><animateTransform attributeName="transform"attributeType="XML"type="scale"from="1"to="2"dur="2"fill="freeze" additive="sum"/></rect>
</svg>

效果：

注意：

1. animateTransform也是可以叠加的，不过要加上additive="sum"，否则后面的无效了。

<animateMotion>标签

这个标签让元素在路径（Path）上滑动。

例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M100,400Q150,300 250,400 T400,400" stroke="red" fill="none"/><rect width="20" height="20" fill="red"><animateMotionpath="M100,400Q150,300 250,400 T400,400"rotate="auto"dur="3s"fill="freeze"></animateMotion></rect>
</svg>

效果：

注意：

1. 设置rotate="auto"，可以让元素根据路径的切线方向做旋转。

脚本动画

SVG的requestAnimationFrame函数可以让我们用js来做动画，浏览器对requestAnimationFrame调用的频率是每秒60次逐帧动画。

例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect id="rect" x="50" y="50" width="100" height="100" fill="green" />
</svg>
<script>var cur = 0;var rect=document.getElementById("rect");var frames = window.requestAnimationFrame(doAnim);function doAnim(){if(cur>=360){//取消帧动画
            window.cancelAnimationFrame(frames);return;}cur++;rect.setAttribute("transform", "rotate(" + cur + ",100, 100)");frames = window.requestAnimationFrame(doAnim);}
</script>

PS：效果就是正方形旋转360°后停止。

 

参考视频

1. SVG课程（慕课网）

 

参考文献

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

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

 

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/6011328.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/457707.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

bootstrap弹出的模态框水平垂直居中的实现

bootstrap弹出的模态框水平垂直居中的实现

学习javascript从入门到放弃&#xff01;&#xff0c;这是第一篇随笔&#xff0c;经验不足&#xff0c;如有不当之处&#xff0c;还望指出。好了废话不多说直接切入正题吧 1.bootstrap默认的model写法&#xff1a; //触发模态框的button <button data-toggle"modal&quo…
阅读更多...
python开发实践教程_Python开发实践教程

python开发实践教程_Python开发实践教程

前言第一章 通过求三角形面积步入Python程序世界 案例1-1 求三角形面积 导读 知识梳理与扩展 小结 练习一第二章 常用运算、使用自定义函数 案例2-1 用函数的方法计算三角形面积 导读 案例2-2 开发一个求三角形面积的工具包 知识梳理与扩展 小结 练习二第三章 分支、循环和列表…
阅读更多...
正则表达式 PHP

正则表达式 PHP

正则表达式的常用函数&#xff1a; 先写一个函数show&#xff0c;用来输出数组&#xff0c;使代码看起来方便&#xff0c;且把经常重复用到的量放在前面 function show($varnull) {if(empty($var))//检测变量是否为空{echo null;}elseif (is_array($var)||is_object($var))//…
阅读更多...
iis发布网站怎么支持.json文件

iis发布网站怎么支持.json文件

转载于:https://www.cnblogs.com/daizhipeng/p/5622839.html
阅读更多...
PHP Cookie和Session

PHP Cookie和Session

cookie cookle常用来识别用户&#xff0c;可以理解为浏览器留下的一种文件&#xff0c;cookie可以分为会话cookie和硬盘cookie两种&#xff0c;会话cookie生命周期短&#xff0c;浏览器关闭即销毁&#xff0c;硬盘cookie生命周期由开发者设定&#xff0c;可长可短 1.创建cook…
阅读更多...
浏览器渲染机制

浏览器渲染机制

1. 明白浏览器渲染的目的 可访问性&#xff08;Accessability&#xff09;、加载性能和重构灵活性一直是前端工程师们关心的主题。 其中加载性能与浏览器的渲染机制深深挂钩&#xff0c;弄明白浏览器背后的渲染机制&#xff0c;才能在日常的前端的开发中明白如何进行性能优化。…
阅读更多...
java中List Set Map使用

java中List Set Map使用

Testpublic void run(){ArrayList<String> list new ArrayList<String>();list.add( "美女");list.add( "帅哥");list.add( "芙蓉姐姐" );for (int i 0; i < list.size(); i) {String strlist.get(i);System. out.println(str);…
阅读更多...
python免费开源工具推荐_年薪200万的程序员，推荐这10大Python免费开源工具！

python免费开源工具推荐_年薪200万的程序员，推荐这10大Python免费开源工具！

原标题&#xff1a;年薪200万的程序员&#xff0c;推荐这10大Python免费开源工具&#xff01;毫无疑问&#xff0c;Python是最流行的语言之一&#xff0c;其成功的原因之一是它为科学计算提供了广泛的报道。 在这里&#xff0c;我们仔细研究用于机器学习和数据科学的十大Python…
阅读更多...
通过Yeoman快速搭建AngularJS webapp应用的实践

通过Yeoman快速搭建AngularJS webapp应用的实践

这里主要记录关于使用yeoman快速构建angluarJS的前端应用的实践&#xff1a; 安装node、yeoman等过程略去 1、首页我们可以在公共的脚手架中找到自己想要的脚手架&#xff0c;官方脚手架库的地址 Yeoman generators: http://yeoman.io/generators/ 这里我们选择官方团队出的ang…
阅读更多...
[Objective-C]编程艺术 笔记整理

[Objective-C]编程艺术 笔记整理

看了《禅与 Objective-C 编程艺术》&#xff0c;发现不少平时不注意的或注意但没有系统总结的东西&#xff0c;特此记录一下。 这次没有整理完&#xff0c;后续更新会结合手里的一些其他资料整理。 新博客wossoneri.com传送门 完整的介绍看这两个链接Google开源项目风格指南禅与…
阅读更多...
python大数据工程师 培训_大数据工程师学习之路

python大数据工程师 培训_大数据工程师学习之路

大数据的作用&#xff1a;发现过去事件的特征预测未来最优化选择职位划分&#xff1a;数据产品经理数据分析师->商业敏感性&#xff0c;产品经理的助手数据研发工程师数据挖掘工程师/数据科学家需要准备的技术知识&#xff1a;Linux操作系统与网络编程&#xff1a;进程/线程…
阅读更多...
python序列

python序列

python序列 列表 python变量不存放值&#xff0c;之存放值的引用&#xff0c;所以列表中元素可以是不同类型 1.常用方法 1.1 增加元素 append,在末尾插入元素 extend&#xff0c;将一个列表整体插入到尾部 insert&#xff0c;将某个元素插入到特定位 /*&#xff0c;拼合…
阅读更多...
前端资源（11）

前端资源（11）

移动端API 地址99移动端知识集合 https://github.com/jtyjty99999/mobileTech移动端前端开发知识库 https://github.com/AlloyTeam/Mars移动前端的一些坑和解决方法&#xff08;外观表现&#xff09; http://caibaojian.com/mobile-web-bug.html【原】移动web资源整理 http://w…
阅读更多...
win10使用Composer-Setup安装Composer以及使用Composer安装Yii2最新版

win10使用Composer-Setup安装Composer以及使用Composer安装Yii2最新版

1&#xff1a;下载 ca-bundle.crt和cacert.pem(见导航栏——文件) 将这两个文件放在php目录下 2:php.ini中添加上述两个文件的路径 curl.cainfoC:/xampp/php/ca-bundle.crtopenssl.cafileC:/xampp/php/ca-bundle.crt 写到最后一行就可以 3&#xff1a;下载Composer-Setup.exe h…
阅读更多...
python离群点检测方法分几类_数据分析 第五篇：离群点检测

python离群点检测方法分几类_数据分析 第五篇：离群点检测

离群点(outlier)是指和其他观测点偏离非常大的数据点&#xff0c;离群点是异常的数据点&#xff0c;但是不一定是错误的数据点。确定离群点对于数据分析会带来不利的影响&#xff0c;比如&#xff0c;增大错误方差、影响预测和影响正态性。从散点图上可以直观地看到离群点&…
阅读更多...
计算机网络TCP/IP

计算机网络TCP/IP

TCP/IP原理 看《图解TCP/IP》时做的笔记&#xff0c;记录一些感觉重要的东西…还没完&#xff0c;正在学&#xff0c;慢慢写 1.计算机网络的发展 2.OSI参考模型 3.传输方式分类 4.地址及网络的构成 5.TCP/IP协议的出现 6.TCP/IP分层模型及通信示例 7.数据链路层1 8.数…
阅读更多...
hive求差集和交集

hive求差集和交集

2019独角兽企业重金招聘Python工程师标准>>> 用的要求总数和统计数&#xff1a; 总数的概念是利用安卓ID&#xff0c;就以为这把两个月前的安卓ID统统的统计一遍&#xff0c;如果没有出现&#xff0c;恰好在今天出现了&#xff0c;那么当前的这个用户就是新增的…
阅读更多...
python静态方法可以被继承吗_python 类的继承 实例方法.静态方法.类方法的代码解析...

python静态方法可以被继承吗_python 类的继承 实例方法.静态方法.类方法的代码解析...

这篇文章主要介绍了python 类的继承 实例方法.静态方法.类方法的代码解析,文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下dt{}class Denglu:def register(self,name,psd):if name.isalnum() and psd.isalnum():i…
阅读更多...
渐变色--浏览器兼容性

渐变色--浏览器兼容性

说明&#xff1a; 1.360兼容模式效果不好 2.可以直接用不同浏览器打开这个页面查看效果 <!DOCTYPE html><html><head lang"en"> <meta charset"UTF-8"> <title></title> <style> body{ …
阅读更多...
如何学习前端 转载

如何学习前端 转载

作者&#xff1a;小不了链接&#xff1a;https://zhuanlan.zhihu.com/p/23265155来源&#xff1a;知乎著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 鉴于时不时&#xff0c;有同学私信问我&#xff08;老姚&#xff0c;下同&#xff09;怎…
阅读更多...
最新文章

Copyright @ 2022~2023