Demo1:创建基本形状

SVG 预定义了7个基本元素:circle 创建圆形、rect 创建矩形、ellipse 创建椭圆、line 创建线条、polyline 创建折线、polygon 创建多边形、path 创建路径
其中 path 可进行填充、勾划(沿着路径绘制直线),也可用作剪切路径(其他形状的图样),是所有绘图元素中最复杂的。

圆形 Circle

矩形 Rectangle

椭圆 Ellipse

线条 Line

折线 Polyline

多边形 Polygon

路径 Path

Demo2:实现一个简单的动画效果

在对基本元素有了一些了解后,我们首先已圆形为例,给元素添加动画效果。
SVG动画基于SMIL(Synchronized Multimedia Integration Language - 同步多媒体集成语言)来实现。

Demo3:让动画停留在最后一帧

根据上面的Demo,我们已经实现了一个简单的 SVG 动画。
此时的 attributeName="r",即代表控制 circle 标签的 r 属性。from="50" 代表动画开始圆形的 50,to="80" 动画结束圆形半径过度到 80。
但可以发现,动画在结束后又返回到了起始帧(即:动画开始时的状态),那需要让他停留在结束帧(即:动画结束时的状态),就要给 animate 标签添加 fill 属性。

Demo4:动画无限循环

效果只执行一次是不够的,很多时候一些元素动画需要重复循环。我们继续在 animate 标签中添加一个 repeatCount 属性。

Demo5:实现呼吸效果

无限循环现得以实现,可流畅度还远远不够。起始帧和结束帧之间存在一个生硬的跳转,没有很好的衔接。我们改变一下 values 属性的数值,制作出我们想要的呼吸效果。

Demo6:多个动画效果同时执行

看到这,想必你已对 SVG 有了一个初步认知。现在我们改进一下代码,再增加一个 animate 标签,从而让元素能够同时实现2个效果。

Demo7:SVG 动画队列

多个效果的同时实现是不是没想象中的那么复杂?那我们再来实现一个 SVG 的动画队列,原理也十分简单。
为每个 animate 标签添id,然后下一个动画的 begin 值为上一个的 id.end。

Demo8:动画旋转

接着,为了引出后面的内容,首先 SVG 元素旋转起来。为了更好的看出效果,把我们之前所画的圆形图案,改成为矩形。
并使用 line 标签,为 SVG 画布添加两条“辅助线”,便于更好的理解其中参数。

Demo9:路径动画,让图形沿着路径运动

CSS中无法实现的路径动画,在 SVG 中可以轻松实现。首先使用 path 元素画一条路径,然后通过 stroke 属性设置辅助线的宽度。

Demo10:路径动画,让图形随着你的路径自动做角度的调整

样子是实现了,但角度方面有些僵硬,不能随着 SVG 路径做调整。加入 rotate="auto" 这个属性便会让你的图形随着你的路径自动做角度的调整

Demo11:手动播放动画

我们通过 SMIL 内置的 API,就可以实现鼠标事件响应。首先我们给 SVG 添加一个 id 命名为 startRotation,然后把 begin 属性改为 begin="startRotation.click"

Demo12:制作Loading动画

根据上面所学习到的内容,做个简单的 SVG Loading 动画

Demo13:动画的暂停与播放

之前我们只是单纯的实现了动画的播放,那怎么实现动画的暂停和播放?此时就需要配合JS来达到我们所想要的效果

With by www.bluesdream.com