SVG 预定义了7个基本元素:circle 创建圆形、rect 创建矩形、ellipse 创建椭圆、line 创建线条、polyline 创建折线、polygon 创建多边形、path 创建路径
其中 path 可进行填充、勾划(沿着路径绘制直线),也可用作剪切路径(其他形状的图样),是所有绘图元素中最复杂的。
在对基本元素有了一些了解后,我们首先已圆形为例,给元素添加动画效果。
SVG动画基于SMIL(Synchronized Multimedia Integration Language - 同步多媒体集成语言)来实现。
根据上面的Demo,我们已经实现了一个简单的 SVG 动画。
此时的 attributeName="r",即代表控制 circle 标签的 r 属性。from="50" 代表动画开始圆形的 50,to="80" 动画结束圆形半径过度到 80。
但可以发现,动画在结束后又返回到了起始帧(即:动画开始时的状态),那需要让他停留在结束帧(即:动画结束时的状态),就要给 animate 标签添加 fill 属性。
效果只执行一次是不够的,很多时候一些元素动画需要重复循环。我们继续在 animate 标签中添加一个 repeatCount 属性。
无限循环现得以实现,可流畅度还远远不够。起始帧和结束帧之间存在一个生硬的跳转,没有很好的衔接。我们改变一下 values 属性的数值,制作出我们想要的呼吸效果。
看到这,想必你已对 SVG 有了一个初步认知。现在我们改进一下代码,再增加一个 animate 标签,从而让元素能够同时实现2个效果。
多个效果的同时实现是不是没想象中的那么复杂?那我们再来实现一个 SVG 的动画队列,原理也十分简单。
为每个 animate 标签添id,然后下一个动画的 begin 值为上一个的 id.end。
接着,为了引出后面的内容,首先 SVG 元素旋转起来。为了更好的看出效果,把我们之前所画的圆形图案,改成为矩形。
并使用 line 标签,为 SVG 画布添加两条“辅助线”,便于更好的理解其中参数。
CSS中无法实现的路径动画,在 SVG 中可以轻松实现。首先使用 path 元素画一条路径,然后通过 stroke 属性设置辅助线的宽度。
样子是实现了,但角度方面有些僵硬,不能随着 SVG 路径做调整。加入 rotate="auto" 这个属性便会让你的图形随着你的路径自动做角度的调整
我们通过 SMIL 内置的 API,就可以实现鼠标事件响应。首先我们给 SVG 添加一个 id 命名为 startRotation,然后把 begin 属性改为 begin="startRotation.click"
根据上面所学习到的内容,做个简单的 SVG Loading 动画
之前我们只是单纯的实现了动画的播放,那怎么实现动画的暂停和播放?此时就需要配合JS来达到我们所想要的效果
With by www.bluesdream.com