作者:mobiledu2502880747 | 来源:互联网 | 2020-08-09 05:08
这篇文章给大家分享的内容是SVG动态图标是如何实现的,有需要的朋友可以参考一下。
在 loading.io 上能看到好多效果惊艳的loading图标。它们都是用svg写成的,寥寥几行代码,比img图片更精细更节省体积,比纯dom实现要更灵活和高效。另外还可以让图标响应点击事件 。
怎么画这些圆和方块?怎么着色?怎么动起来? 先看看svg的基础知识,然后将上面第一个图标画出来。
一、基本图形元素
svg有一些预定义的形状元素:矩形,圆形,椭圆,直线,折线,多边形,路径和文本。
1
2
二、样式与效果
svg元素的样式可以写成标签的属性,也可以写在style里面。下面是一些主要的样式属性:
svg还支持很多滤镜效果,能做渐变、阴影、模糊、图像混合等等。不需要了解那么多,例如要画几个彩色圆圈,用circle 配合fill 即可。
注意:transform 默认以svg左上角为基点,而不是圆心或其他中心。左上角是svg坐标系原点。了解transform和坐标系统,可以参考 这里。
三、辅助元素
svg有几个辅助元素:
元素通常用来对相关图形元素进行分组,以便统一操作,比如旋转,缩放或者添加相关样式等。
内部定义的元素不会直接显示,可以不用事先定义样式,而是在使用
能够创建自己的视窗,兼具的分组功能和初始不可见的特性。
对于上面提到的transform基点问题,可以通过嵌套标签并偏移的位置,进而重设基点。如下画出几个水平排列的圆圈,并设置不同的缩放尺寸,得到
1
四、动画的实现
svg的动画效果是基于动画标签元素实现的:
实现单属性的过渡效果,
实现transform变换动画效果,
实现路径动画效果。
svg的写法很灵活,样式可以写成标签属性也可以写在style里面,动画标签可以通过xlink指定元素,也可以写在动画元素的内部。如下演示animateTransform的xlink写法:
上例的动画是A到B的过渡,要形成顺畅的循环,至少要定义三个关键点。animateTransform支持更多更灵活的属性设置:
values:多个关键点的值,替代from和to,例如 values="0;1;0"
keyTimes:跟values对应,各个点的时间点
calcMode:动画快慢方式。discrete
| linear
| paced
| spline
keySplines:设置运动的贝塞尔控制点,calcMode为spline时有效
对svg动画的更详细介绍,参考 这里 。
五、代码实例
circle画圆,fill着色,用g标签包裹并定位,transform设置初始形变,animateTransform设置动画。现在来看代码,相信不会再是一头雾水了: