简单聊一聊那些 svg 的沿路径运动

BowenHilary 发布于5月前 阅读195次
0 条评论

之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急。其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍。本文就告诉大家如何用SVG写出个简单动画。就让我们以路径动画为例来说明吧。

类似于下面动画,这种之前就觉得好炫酷

简单聊一聊那些 svg 的沿路径运动

好吧,就算不说这个,没学习之前,svg实现的loading我也不知道怎么搞得。

当然SVG肯定不是只是来做这个的啦,这只是人家神奇的一部分。SVG的优势是 跨设备能力强、体积小、图像可透明,可以与js交互等等等等,在这里不一一介绍啦。我们直接从小例子开始,动手实现个按路径运动的动画。

首先让我们来实现一个描绘图形边框的小例子,如下图:

简单聊一聊那些 svg 的沿路径运动

要描绘如上图的五角星图形,我们首先应该确定各个角的坐标,然后将它们连接起来就好了。说起来简单,做起来其实更简单,简单代码实现如下:

在以上的代码中,polygon 标签是svg多边形标签,points 属性定义多边形每个角的 x 和 y 坐标。通过class为star-path的标签来实现我们图中的灰色轨迹,通过class为star-fill的标签来实现描绘的动画。

上边我们实现了五角星的图形,下面我们就结合css,来完成这个完整的描绘动画:

在上面的代码中,最核心的属性就是 stroke-dasharray和stroke-dashoffset 。 stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数。 stroke-dashoffset:定义虚线描边的偏移量。 在上面代码中,stroke-dasharray代表虚线之间的间距大小。当我们设置了间距足够长的时候,以至于大于我们图形的总边长,就会达到我们想要的效果。一开始我们的短划线是0,缺口是全部长度,随动画的进行,短划线的长度慢慢增长为图形总边长的全部长度,达到了慢慢充满全部的效果。另外,我们要知道路径长度也可以借助 如下代码path.getTotalLength() 函数获取路径的长度。

除此之外,我们还可以改变偏移 stroke-dashoffset 来达到效果,将虚线的偏移量设置为 0,此时我们看到的路径描边就是没有间断的连续曲线,通过设置虚线偏移量等于曲线的长度,那该曲线恰好“消失”,代码如下:

很多时候我们可以运用这种方法到我们运营活动项目中,stroke-dasharray 和 stroke-dashoffset 是创造大量 SVG 路径动画所要用到的两个重要属性,掌握原理就可以给各种图形描边

另外我们再实现个根据运动路径运动的小例子,这里要涉及到svg的 path属性实现,如下图:

简单聊一聊那些 svg 的沿路径运动

path标签用于指定一条运动路径,从点(100,150)到(200,50)再到(300,150)再到(400,50)最后再链接起点。 我们用了svg的animateMotion动画标签。repeatCount属性描述动画的重复次数,indefinite是无限循环,dur属性描述动画的持续时间,我们这里让整个动画持续3秒。 我们用start和end可以控制整个动画的开始结束时间,而且如果我们想点击控制运动的开始可以加入begin="click"。

当然我们实现的很简单的效果,如果涉及到想元素自动根据运动路径的角度来改变它的运动方向,我们可以使用rotate设置为auto,想让元素在外围运动,可以设置rotate="auto-reverse"。

另外,当路径复杂的时候再用path属性来描述就显得很多余和麻烦,这时候我们可以使用 标签来指定运动路径:

以上是svg按路径运动的典型例子,我们用代码方式进行剖析。svg很多属性和当时学习css动画属性很相似,很方便学习。很多时候动画就是简单组成了复杂,或者没有从简单思考显得复杂。我们看到酷炫的动效可能要复杂一些,但看完本文你是不是也能完成自己的小动画了呢?

简单聊一聊那些 svg 的沿路径运动

查看原文: 简单聊一聊那些 svg 的沿路径运动

  • orangelion
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。