【前端SVG】HTML中的SVG动画效果
前言
现在,web页面中动画的实现方式有很多,例如原生的
CSS3
动画、JavaScript
动画...等多种方法实现,甚至是直接使用animate
、anime
、magic
等这些开源的类库来实现。
动画
我们学过的很多种图形绘制都可以实现动画效果,transform
、路径变化、描边等这些都是可以实现动画效果的。
一些SVG动画库
- GSAP
- Snap.svg
- SVG.js
- anime.js
- Velocity.js
- D3
在学习动画之前,我们先学习两个属性,这与后面我们要实现的动画有一定的关系。它们分别是stroke-dasharray
和stroke-dashoffset
,从属性名称来看,它们都是与stroke
(描边)有关的。
stroke-dasharray
该属性用于控制描边的点划线的长度,你需要传入一个参数,这个参数可以是一个数,也可以是一个数列,看下面这个例子。
<line x1="0" x2="50" y1="10" y2="10" stroke-width=".5" stroke="red" stroke-dasharray="5"></line>
<line x1="0" x2="50" y1="20" y2="20" stroke-width=".5" stroke="red" stroke-dasharray="10"></line>
<line x1="0" x2="50" y1="30" y2="30" stroke-width=".5" stroke="red" stroke-dasharray="5,10"></line>
图中,每条竖线的间隔是10px
,线长是60px
。我们先看第一条线条,这个的stroke-dasharray
值是5
,指线条每5px
的实线长度就会有5px
的间隔距离。同理,第二条线条,则每10px
的实线长度就会有10px
的距离。
第三条线条,这里是stroke-dasharray
传入的是两个参数,使用空格隔开(也可以使用逗号隔开参数),第一个参数指的是实线的长度,第二个参数是间隔的距离。如图我们看到红线每5px的长度就会有10px
的间隔距离。
第四条线条传入的是三个参数,前两个参数和上面一样,第三个参数是实线的长度,可以理解成奇数为实线长度,而偶数为间隔距离。
第五条线条传入的是四个参数,但参数是相同的,等价于 5 10
。
stroke-dashoffset
该属性用于起点的偏移,正数为x值向左偏移,负数为x值向右偏移,传入一个参数,用于设置偏移值。
该属性需要搭配上面的stroke-dasharray
属性使用,否则无法看出偏移效果。
我们看下面这个例子:
<line x1="10" x2="90" y1="10" y2="10" stroke-width=".5" stroke="red" stroke-dasharray="20";></line>
<line x1="10" x2="90" y1="20" y2="20" stroke-width=".5" stroke="red" stroke-dasharray="20"; stroke-dashoffset="-10"></line
<line x1="10" x2="90" y1="30" y2="30" stroke-width=".5" stroke="red" stroke-dasharray="20"; stroke-dashoffset="10"></line>
第一条线条没有设置stroke-dashoffset
,默认为0
。
第二条线条stroke-dashoffset
值设置为-10
,即线条起始点向右偏移10px
。
第三条线条stroke-dashoffset
值设置为10
,即线条起始点向左偏移10px
。
最后
本篇文章介绍了关于SVG的一些动画类库,以及讲述了关于stroke-dasharray、stroke-dashoffset属性的,这两个属性在SVG动画中这很常见的,感谢你的阅读!
😀😀 关注我,不迷路! 😀😀
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekja
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01