【Web动画】SVG 线条动画入门

  • CSS3 动画
  • javascript 动画（canvas）
  • html 动画（SVG）

个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

举个栗子

SVG 线条动画，在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面，看看最近项目里的一个小需求，一个这种形状的进度条：

把里面的进度条单独拿出来，也就是需要实现这样一个效果：

脑洞大开一下，使用 CSS3 如何实现这样一个进度条呢。

CSS3 是可以做到的，就是很麻烦。但是如果采用 SVG 的话，迎刃而解。

我们假定你在阅读本文的时候有了一定的 SVG 基础，上面代码看看就懂了，好了，本文到此结束。

好吧，还是一步一步解释，上面进度条的主要 SVG 代码如下：


1

2

3

4

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">

    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>

    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>

</svg>

SVG 为何

可缩放矢量图形，即SVG，是W3C XML的分枝语言之一，用于标记可缩放的矢量图形。（摘自MDN）

上面代码中，先谈谈 svg 标签：

  • version： 表示 <svg> 的版本，目前只有 1.0，1.1 两种
  • xmlns：http://www.w3.org/2000/svg 固定值
  • xmlns:xlink：http://www.w3.org/1999/xlink 固定值
  • xml:space：preserve 固定值，上述三个值固定，表示命名空间，当数据单独存在svg文件内时，这3个值不能省略
  • class：就是我们熟悉的 class
  • width | height： 定义 svg 画布的大小
  • viewbox： 定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小（暂时可以不用理解）

有了 svg 标签，我们就可以愉快的在内部添加 SVG 图形了，上面，我在 svg 中定义了两个 polyline 标签。

SVG 基本形状

polyline：是SVG的一个基本形状，用来创建一系列直线连接多个点。

其实，polyline 是一个比较不常用的形状，比较常用的是path，rect，circle 等。这里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 属性，在线段连接处创建圆滑过渡角。

SVG 中定义了一些基本形状，在继续下文之前，建议点进去先了解一些基本图形的标签及写法：

SVG 线条动画

好，终于到本文的重点了。

上面，我们给两个 polyline 都设置了 class，SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写，更重要的是可以配合 CSS 动画一起使用。

上面，主要的 CSS 代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

.g-rect-path{

    fill: none;

    stroke-width:10;

    stroke:#d3dce6;

    stroke-linejoin:round;

    stroke-linecap:round;

}

.g-rect-fill{

    fill: none;

    stroke-width:10;

    stroke:#ff7700;

    stroke-linejoin:round;

    stroke-linecap:round;

    stroke-dasharray: 0, 1370;

    stroke-dashoffset: 0;

    animation: lineMove 2s ease-out infinite;

}

@keyframes lineMove {

    0%{

        stroke-dasharray: 0, 1350;

    }

    100%{

        stroke-dasharray: 1350, 1350;

    }

}

这尼玛是什么 CSS？怎么除了 animation 全都不认识？

莫慌，其实很多和 CSS 对比一下非常好理解，只是换了个名字：

  • fill：类比 css 中的 background-color，给 svg 图形填充颜色；
  • stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；
  • stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；
  • stroke-linejoin | stroke-linecap：上文稍微提到过，设定线段连接处的样式；
  • stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度；
  • stroke-dashoffset：则是虚线的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。

属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。

解释很苍白，直接看例子：

上面，填充进度条，使用了下面这个动画 ：


1

2

3

4

5

6

7

8

@keyframes lineMove {

    0%{

        stroke-dasharray: 0, 1350;

    }

    100%{

        stroke-dasharray: 1350, 1350;

    }

}

stroke-dasharray: 0, 1350;，表示线框短划线和缺口的长度分别为 0 和 1350，所以一开始整个图形都是被缺口占据，所以在视觉效果上长度为 0。

然后过渡到 stroke-dasharray: 1350, 1350，表示线框短划线和缺口的长度分别为 1350 和 1350，因为整个图形的长度就是 1350，所以整个进度条会被慢慢填充满。

掌握了这个技巧后，就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景：

SVG 线条动画实现按钮交互

SVG 线条动画实现圆形进度条

多 SVG 图形线条动画配合

之前我司一个 h5 里面应用过的，多SVG 图形线条动画配合，可以制作一些比较酷炫的动画，很有科技感。

正文结束，我在我的 Github 上，使用 SVG 实现了一些图形 -- SVG奇思妙想，Demo可以戳这里。

此文转载，

感兴趣的朋友可以互相交流，qq：1049929298；

Github：Andycty；

时间： 2024-11-20 12:06:04

【Web动画】SVG 线条动画入门的相关文章

线条之美，玩转SVG线条动画

线条之美,玩转SVG线条动画 作者:AlloyTeam www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animation/ 如有好文章投稿,请点击 → 这里了解详情 通常来说web前端实现动画效果主要通过下面几种方案: css动画:利用css3的样式效果可以将dom元素做出动画的效果来. canvas动画:利用canvas提供的API,然后利用清除-渲染这样一帧一帧的做出动画效果. svg动画:同样svg也提供

css3动画--边框线条动画

网上看到一个css3动画,地址 最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示 再用clip截取一半,形成半折角. 同理左下角建一个div,向左.向下平移8px,设border-left,border-bottom值,用clip截取形成 <div class="cont"> <div class="bb"></div>

SVG技术入门：线条动画实现原理

相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己.非常的酷.Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的.Brian Suda也在24 Ways网站上讨论过它. Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果.Codrops也做出了一些非常漂亮的例子. 其实我没有什么好增补的,只是想把这种技术说的更明白些,所以,在这里我要用我的方式把这种技术再讲解一遍. 1. 你有一个SVG图形 2. 这个图形必须要有一个线条

SVG动画实践篇-无中生有的线条动画

git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/path 说明 这个动画实现的是线条动画,主要用到的是 SVG 的 path 标签. <path> 标签命令 试用 <path> 标签的 d 属性标识路径集合,勾画线条的形状. M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S

HTML5 SVG简单的动态绘制轮廓线条动画插件

walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件.它支持SVG的path,line 和 polyline元素.walkway使用起来简单方便,可以制作出非常酷的SVG线条动态绘制效果.更好的动态绘制线条插件可以参考:html5 svg线条动态绘制文字轮廓边框动画.HTML5 SVG图形轮廓线条绘制动画插件-vivus 和 html5 svg线条动态绘制iphone边框动画效果. 在线演示:http://www.htmleaf.com/Demo/201501261282.h

超酷创意分段式SVG文字动画特效

这是一款基于segment.js制作的非常有创意的分段式SVG文字动画特效.这个文字动画特效通过动画SVG的描边路径来制作各种文字的动画效果,效果非常的赞. 这个SVG文字动画特效的第一个DEMO中的最后几个例子使用了mo.js插件,一款由Oleg Solomka编写的用于制作网页图形动画的JavaScript库插件.通过mo.js,可以制作出效果更为震撼的文字动画效果. 在线预览   源码下载 特效中使用的字体是exquisite lowercase font,一套极富创意的WEB字体. 使用

SVG Drawing Animation - SVG 绘制动画

一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇文章给大家想分享一组实验 SVG 绘制动画的例子. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码

18个超有趣的SVG绘制动画赏析

SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实现而成,效果让人大为震撼,一起来看看吧. 1.HTML5 SVG实现会跳舞的花朵 4种跳舞心情 这又是一款很有趣的HTML5 SVG动画,它是一朵会跳舞的花.首先,花朵和花盆均采用SVG进行绘制,虽然是简单的线条以及单纯

PPT制作线条动画

0.小叙闲言 今天在用PPT做动画的时候小有心得,百度了一下线条动画制作,有一个贴子里面的讨论,也给了我一些灵感,贴子地址:http://www.rapidbbs.cn/thread-24577-1-1.html.但是还是没有做下图这样的效果的动画,这是自己纯想出来的,分享一下,或许对大家有点帮助.文章中的PPT下载地址:http://files.cnblogs.com/files/endlesscoding/PPT_Line_Animations.zip 1.PPT简单线条动画 平时做线条动画