一、动画

1.SVG动画
在SVG中提供了三种常用动画标记
animate：基础动画
animateTransform：形变动画
animateMotion：路径动画
2.SVG动画属性
attributeType: CSS/XML 规定的属性值的名称空间
attributeName: 规定元素的哪个属性会产生动画效果
from/to: 从哪到哪
dur: 动画时长
fill: 动画结束之后的状态保持freeze结束状态/remove恢复初始状态（默认值）

3.SVG动画使用方式
3.1、创建动画, 告诉动画标记哪个元素需要执行动画（xlink:href="id名字"）

    <svg width="500" height="500"><circle id="myCircle" cx="200" cy="200" r="50" fill="red"></circle><animate attributeName="r" from="50" to="200" dur="2" xlink:href="#myCircle"></animate></svg>

3.2、创建元素, 在元素中说明需要执行什么动画

   <svg width="500" height="500"><circle cx="100" cy="300" r="50" fill="#7fd"><animate attributeName="r" from="50" to="100" dur="5s" fill="freeze">        </animate></circle></svg>

二、动画常用属性

SVG常用动画属性

repeatCount：动画重复执行次数
repeatDur：动画重复执行总时间
begin：规定动画开始的时间/什么时间触发了再执行动画
begin=“1s”：1s后开始执行动画
begin=“click”：click触发事件执行了再执行动画
begin=“click + 1s”：点击之后，等两秒再执行动画
restart: 规定元素开始动画之后，是否可以被重新开始执行
always：动画可以在任何时候被重置。这是默认值。
whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后，才能再执行。
never：在整个SVG执行的过程中，元素动画不能被重置。
calcMode: 规定每一个动画片段的动画表现
linear：默认属性值, 匀速动画
discrete: 非连续动画, 没有动画效果瞬间完成
paced: 规定整个动画效果始终以相同的速度进行，设置keyTimes属性无效
spline: 配合keySplines属性来定义各个动画过渡效, 自定义动画
keyTimes:
划分动画时间片段, 取值0-1
values:
划分对应取值片段的值

三、常用动画

往返动画：
沿直线来回走
开始时，添加begin=“0;toLeft.end”：0表示第一次直接执行，toLeft.end表示之后的每一次toLeft这个动画执行完毕后再执行。
返回时，添加begin=“toRight.end”：表示toRight这个动画执行完毕后再执行。

这是一个小球来回的案例

    <svg width="700" height="500"><circle cx="100" cy="100" r="50" fill="aqua"><animateid="toRight"      attributeName="cx"    from="100"to="500"    dur="2s"   begin="0;toLeft.end"      fill="freeze"></animate><animateid="toLeft"       attributeName="cx"    from="500"to="100"    dur="2s"   begin="toRight.end + 1s"  fill="freeze" ></animate></circle>   </svg>

旋转动画

这是一个五角星旋转的案例

    <svg width="200" height="200"><polyline points="100,0 160,180 10,60 190,60 40,180"fill="#ff5a00"></polyline><animateTransform  attributeName="transform" type="rotate"repeatCount="indefinite" from="0" to = "900" dur = "2"  ></animateTransform></svg>

路径动画

路径动画：可以让某一元素沿着某一路径运动，使用animateMotion标签
注意点：
path属性：指定元素按照哪一路径执行。path中的M起点是相对于矩形位置的。
rotate=“auto”:是动画沿着路径自动旋转

接下来做几个小动画给大家看看

三角形变成长方形

消失的小球

流动的线条

SVG的动画属性（动画常用属性、复合动画/往返动画/形变动画/路径动画/）相关推荐

SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）
一.SVG常用属性 1.fill: 修改填充颜色 2.fill-opacity: 0~1 设置填充颜色的透明度 3.stroke: 修改描边颜色 4.stroke-width: 修改描边宽度 5.st ...
java 文件拷贝保留原来的属性_Java常用属性拷贝工具类使用总结
开头聊几句 1.网上很多的技术文章和资料是有问题的,要学会辨证的看待,不能随便就拿来用,起码要自己验证一下 2.关注当下,关注此刻,如果你真正阅读本篇文章,请花几分钟时间的注意力阅读,相信你会有收获的 ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
三维场景中常用的路径动画
三维场景中常用的路径动画前言在三维场景中,除了用逼近真实的模型代表现实中的设备.标识物外,通常还会使用一些动画来表示模型在现实中一些行为和作用.常见的动画比如路径动画.旋转动画.发光动画.流动动画 ...
WPF中的动画——（五）路径动画
路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了. 路径动画中最常用的是MatrixAnimati ...
html5 路径运动,探秘神奇的运动路径动画 Motion Path
CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1,翻译过来也就是运动路径.本文将对 motion path 一探究竟,通过本文,你可以了解到:什么是 ...
【Spring 基础篇三】属性注入与属性编辑器
上篇我们了解了一下applicationContext.xml的两种注入方式,本篇我们来了解一下关于属性的注入以及操作. 在敲代码的过程中,我们很容易遇到这样的问题,比如一个Lis ...
官方新动作！老子云3D开发SDK又更新：新增3D测量，路径动画
近期老子云SDK新增了3D测量.路径动画(新版)两大开发功能,这也是首次在SDK中开放3D测量功能,开发者用户反响十分热烈! 我们进入开发者示例代码页面,就可以看到左侧栏多了"动画路径.3D ...
【Python应用】Python+Kepler.gl轻松制作酷炫路径动画
文章来源于Python大数据分析,作者费弗里本文示例代码.数据已上传至Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 ...
python炫酷动画源代码_（数据科学学习手札85）Python+Kepler.gl轻松制作酷炫路径动画...
1 简介 Kepler.gl相信很多人都听说过,作为Uber几年前开源的交互式地理信息可视化工具,kepler.gl依托WebGL强大的图形渲染能力,可以在浏览器端以多种形式轻松展示大规模数据集. 图 ...

SVG的动画属性（动画常用属性、复合动画/往返动画/形变动画/路径动画/）