当前栏目
【Web动画】SVG 线条动画
通常我们说的 Web 动画,包含了三大类。
- CSS3 动画
- javascript 动画(canvas)
- html 动画(SVG)
个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。
举个栗子
SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:
![](https://s5.51cto.com/oss/202102/21/9c3b9859334dcf9166da8d7b7cccc08d.png)
把里面的进度条单独拿出来,也就是需要实现这样一个效果:
![图片](https://s3.51cto.com/oss/202102/21/710b4d3e75ea2f264660f16479f1fd79.gif)
脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢。
CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。
See the Pen 不规则进度条 by Chokcoco (@Chokcoco) on CodePen.
我们假定你在阅读本文的时候有了一定的 SVG 基础,上面代码看看就懂了,好了,本文到此结束。
![](https://s2.51cto.com/oss/202102/21/c855ec6f0b07f21738f254078ae78838.png)
好吧,还是稍微解释下,上面进度条的主要 SVG 代码如下:
- <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[1])
上面代码中,先谈谈 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`[2] 和 `stroke-linecap`[3] 属性,在线段连接处创建圆滑过渡角。
SVG 中定义了一些基本形状[4]:
![](https://s4.51cto.com/oss/202102/21/dee83e9a652cfa9d166ae376b32ab6ba.png)
SVG 线条动画
好,终于到本文的重点了。
上面,我们给两个 polyline 都设置了 class,SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写,更重要的是可以配合 CSS 动画一起使用。
上面,主要的 CSS 代码:
- .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:上文稍微提到过,设定线段连接处的样式[5];
- stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;
- stroke-dashoffset:则是虚线的偏移量
重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。
上面,填充进度条,使用了下面这个动画 :
- @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 线条动画实现按钮交互
![图片](https://s3.51cto.com/oss/202102/21/710b4d3e75ea2f264660f16479f1fd79.gif)
SVG 线条动画实现圆形进度条
![图片](https://s4.51cto.com/oss/202102/21/3b213cc43bba8e3c62b315e5bd51d6d3.gif)
各类按钮效果
![图片](https://s3.51cto.com/oss/202102/21/38e9cc038d153233a36637534fca69f3.gif)
多 SVG 图形线条动画配合
之前我司一个 h5 里面应用过的,多SVG 图形线条动画配合,可以制作一些比较酷炫的动画,很有科技感。
![图片](https://s2.51cto.com/oss/202102/21/38e9cc038d153233a36637534fca69f3.gif)
本文到此结束,我在我的 Github 上,使用 SVG 实现了一些图形 -- SVG奇思妙想[6],Demo可以戳这里[7]。
下篇文章将会详述非规则图形,如何使用 PS + AI 生成 path 路径,实现 SVG 动画,放个 Demo,敬请期待。
![图片](https://s2.51cto.com/oss/202102/21/38e9cc038d153233a36637534fca69f3.gif)
参考资料
[1]MDN:
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
[2]stroke-linejoin:
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-linejoin
[3]stroke-linecap:
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-linecap
[4]基本形状:
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes
[5]设定线段连接处的样式:
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-linejoin
[6]SVG奇思妙想:
https://github.com/chokcoco/SVG
[7]Demo可以戳这里:
http://sbco.cc/demo/svg/html/index.html
相关文章
- Java Script变量
- Python Flask,abort函数
- Amplify Framework 更新 — 快速为您的 Web 和移动应用程序添加机器学习功能
- 支持 Apache 软件基金会
- python logging模块练习
- OpenSource | Amazon 加入 W3C
- java/Spring/IOC
- python_xml模块处理
- Python HTML操作(HTMLParser)
- java gui组件_JAVA GUI界面组件学习
- http rest JAVA_JAVA发HTTP请求 - RestTemplate 案例
- python unittest生成html报告_python+unittest框架生成HTML测试报告
- 快速构建一个用本地网络发送和接收消息的APP
- 2021年,排名前 15 的 Vue 后台管理模板
- Spring Boot一键换肤,so easy!
- 美国或将所有设计14nm以下中国芯片公司纳入出口管制?
- React的并发模式该如何使用?
- 如何在React中处理组件交互?
- 请查收 2020 全球 JS 现状调查报告
- Levels.fyi发布2020年度程序员收入报告