专栏首页Thinks带你轻松打开SVG动画的大门
原创

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为,无论是项目里的应用还是demo都所处可见,这里我就用一个实例的写法带新同学轻松的打开SVG动画的大门。

首先我们定义一块viewport,然后在上面画一个圆形。

<svg width="400" height="400">
  <circle cx="200" cy="200" r="50" style="fill:#ff6600" >
  </circle>
</svg>

他看起来应该是这个样子的:(每一个实例我都会附加demo以及链接,方便直观的理解与源代码的查看,查看的时候请使用标准浏览器) https://chengrang.com/demo/svg/demo1.html

现在我们就让这个圆动起来

<svg width="400" height="400">
  <circle cx="200" cy="200" r="50" style="fill:#ff6600" >
  <animate
 attributeName="r"
 attributeType="XML"
 from="50"
 to="80"
 begin="0s"
 dur="2s"
 />
  </circle>
</svg>

动起来是这个样子的:

https://chengrang.com/demo/svg/demo2.html

我们可以看到圆动起来的时候,circle元素里边不再是空的,多了一个animata的元素,这个animata含有下面几个属性:

attributeName="r" // 动画属性名,顾名思义,你想要改变哪个属性
attributeType="XML" // 动画属性的类别,常见的两个值,XML和css,取决于属性是在xml里还是在style里。不写的时候默认值为auto,他会先搜索css,建议写上。
from="50"
to="80" //属性的开始和结束值,from可选,当不写的时候会取默认值。
begin="0s"

dur="2s" //动画的开始时间与结束时间。如果你想打开页面过几秒才开始动画,那么就定义begin就好了。

观察上边的动画,我们发现动画结束的时候又回到了第一帧,如果我们想让他停在最后已帧,就需要用到 fill 属性(animate的fill属性与svg的fill填充要区分一下)

fill="freeze" //支持参数有:freeze与remove. 其中remove是默认值,表示动画结束直接回到开始的地方

现在再看这个动画的样子: https://chengrang.com/demo/svg/demo3.html

这样看起来动画还是没有满足我的需求,我想让动画一直循环播放怎么办?这就要用到 repeatCount

 repeatCount="indefinite" //属性的取值可以是一个数字,也可以是“indefinite”,无限循环。

现在动画变成了这样:

https://chengrang.com/demo/svg/demo4.html

现在动画是循环了,可我还是觉得哪里别扭,第一帧和最后一帧并没有衔接起来,看起来有突兀。这时候我们就回过头再看看动画的开始和结束。 from和to只能定义开始和终结两个时间点,另外还有一个属性by,是可以替代to的,to表示的是一个绝对值,by表示的是一个offset,比如from为50,to为80,表示从50到80,by为80的话,表示offset为80,那么最终的结果就是130. 除了by意外,还有一个属性values,他可以接受一组数值,比如我们想作出圆的呼吸效果,那么只需要

values="50;80;50"

现在我们再看一眼刚才的动画

https://chengrang.com/demo/svg/demo5.html

可是现在的效果我还是不满意,我想让这个圆形呼吸的同时改变透明度,这就是svg在单个对象上面做多重动画了。 我们在 attributeName=”r” 下面,增加一个animate元素,用来改变圆的透明度

<animate
 attributeName="fill-opacity"
 attributeType="CSS"
 values="1;0.6;1"
 begin="0s"
 dur="2s"
 repeatCount="indefinite"
/>

现在这个动画是这个样子的:

https://chengrang.com/demo/svg/demo6.html

写到这里,我上边的呼吸效果已经实现了,但是我现在又有了新的想法,我想放一排的圆,让一个动完,才让下一个接着动。这也就是我们编程里的“同步”概念,在svg里就是 同步动画。

同步动画的实现很简单,只需要有动画id,然后下一个动画的 begin 值 为上一个的 id.end, 比如

<animate id="a1"/>
<animate id="a2" begin="a1.end"/>

我们来看一下同步动画的实例:

https://chengrang.com/demo/svg/demo7.html

更为强大的是,begin的值可以是表达式,比如

 begin="a1.end + 5s"

这样就实现了同步的同时,带有5s的偏移,也就是第一个结束5s之后,第二个动画才开始。

OK,同步动画实现了,不过现在我要改需求……..把刚才的圆还给我,我要让他旋转。

SVG的旋转动画需要用到另一个元素,他的用法和animate并没有本质的区别,只不过属性需要换一批。

比如我们相让刚才那个圆形旋转起来,等等,圆形原地旋转的话,好像我们并看不出他在旋转呀,那好吧,我们换一个旋转起来视觉效果比较强的图形,现场写一个五角星出来,并给他加animateTransform :

<polygon points="122 59,72 205,194 114,49 114,171 205" style="fill: #ff6600;">
  <animateTransform
 attributeName="transform"
 attributeType="XML"
 type="rotate"
 from="0 125 135"
 to="360 125 135"
 begin="0s"
 dur="10s"
 repeatCount="indefinite"
 />
</polygon>

查看一下他动起来的样子: https://chengrang.com/demo/svg/demo8.html

和前边的例子并没有本质区别,唯一不同的地方在于from部分,from和to都是三个值,第一个值是角度,从0到360度的旋转,第二个和第三个组成一个坐标,这个坐标决定了svg围绕哪个点来进行旋转,关于这方面的知识推荐新同学了解一下SVG的坐标系相关知识。 transform的type可以包括translate,scale,skew等,和css相通,用法也与rotate大同小异,这里就不一一的列举实例。

实现了旋转以后,我们再换一个更强大的动画元素,.我们可以用他来实现引导线动画,让你的图形沿着复杂的路径运动。

比如我们先画一条路径

<path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100"
 stroke="#ccc" stroke-width="2"
 fill="none"/>

哎呀一不小心画的太圆了,不过没关系,我们现在把用过的二手五角星拿过来

<path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100"
 stroke="#ccc" stroke-width="2"
 fill="none"/>
<polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" style="fill: #ff6600;" >
  <animateMotion
 dur="6s"
 repeatCount="indefinite"
 path="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100"
 />

</polygon>

加入了animateMotion元素,animateMotion的path决定了五角星的运动路线,可以先看一下效果,是这样的

https://chengrang.com/demo/svg/demo9.html

好像哪里不对劲,对了,五角星沿着路径转动的时候能不能随着角度倾斜?那么就需要用到

rotate="auto"

加上之后的最终动效是这样的

https://chengrang.com/demo/svg/demo10.html

总结语:

看完上边的实例,你其实已经站在SVG动画的门里了,剩下的就是进阶知识的获取,以及熟练度的达成了。下一次我继续和大家一起学习SVG动画一些进阶的技巧!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 带你轻松打开SVG动画的大门

    初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

    练小习
  • 用TAOBAO的方法隐藏多余的线条

    偶然的看到了TAOBAO UED团队的BLOG,在上面看到了篇文章,说的是怎么隐藏导航最后一项的竖线 1、类目之间的横竖线 ? 从很久很久以前开始,类目间的竖线...

    练小习
  • 几种SVG图像的fallbacks

    在网页前景图像的使用上,针对不同像素比的屏幕,常规的做法是使用2X 3X的图像。 一些特定场景可以使用SVG来完成,因为他的矢量特性,不需要再针对更高的像素比...

    练小习
  • 带你轻松打开SVG动画的大门

    初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

    练小习
  • Exchange 2010迁移Exchange 2013(二)本地用户移动

         续上一篇完成了Exchange 2013的共存部署后,下面就要对Exchange 2010的用户进行迁移了。用户迁移无法在Exchange 2010中...

    李珣
  • SAP OData编程指南

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog....

    Jerry Wang
  • 数据结构08 线索二叉树

    上一篇总结了二叉树,这一篇要总结的是线索二叉树,我想从以下几个方面进行总结。 1、什么是线索二叉树? 2、为什么要建立线索二叉树? 3、如何将二叉树线索化? 4...

    nnngu
  • [ASP.NET Core 3框架揭秘] Options[4]: Options模型[下篇]

    IOptionsFactory<TOptions>解决了Options的创建与初始化问题,但由于它自身是无状态的,所以Options模型对Options对象实施...

    蒋金楠
  • .Net Core中的Options使用以及源码解析

    在.Net Core中引入了Options这一使用配置方式,通常来讲我们会把所需要的配置通过IConfiguration对象配置成一个普通的类,并且习惯上我们会...

    Edison.Ma
  • [PHP] 存储改造中的逻辑和清理遗留的问题

    现象:用户读信时,根据路径的哈希结果,访问四台服务器中一台请求文件,这四台缓存机器已经下线,访问不到再去后端存储访问浪费了时间

    陶士涵

扫码关注云+社区

领取腾讯云代金券