线条动画入门

时间:2019-09-23 20:14来源:关于计算机
SVG 线条动画入门 2016/12/29 · HTML5 ·SVG,动画 正文小编: 伯乐在线 -chokcoco。未经小编许可,禁止转发! 接待参加伯乐在线 专栏撰稿人。 经常我们说的 Web 动画,包罗了三大类。 CSS3  动

SVG 线条动画入门

2016/12/29 · HTML5 · SVG, 动画

正文小编: 伯乐在线 - chokcoco 。未经小编许可,禁止转发!
接待参加伯乐在线 专栏撰稿人。

经常我们说的 Web 动画,包罗了三大类。

  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

民用感到 3 种动画各有上下,实际使用中依据明白情状作出抉择,本文探究的是自个儿认为 SVG 中在实际上项目中特别有应用价值 SVG 线条动画。

  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

举个栗子

SVG 线条动画,在一部分特定的场地下能够化解采纳 CSS 无法完毕的卡通。特别是在过程条方面,看看方今项目里的二个小供给,二个这种形象的进程条:

图片 1

把内部的进程条单独拿出去,也正是亟需达成那样二个效果:

图片 2

脑洞大开一下,使用 CSS3 怎么样兑现那样二个进程条呢。

CSS3 是足以完毕的,就是很麻烦。可是即使选取 SVG 的话,一挥而就。

See the Pen 非平时进度条 by Chokcoco (@Chokcoco) on CodePen.

笔者们就算你在阅读本文的时候有了显明的 SVG 基础,上边代码看看就懂了,好了,本文到此截至。

图片 3

行吗,照旧一步一步解释,上边进程条的首要 SVG 代码如下:

<svg version="1.1" xmlns="" xmlns: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>

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>

个体认为 3 种动画不相上下,实际利用中依据领悟情况作出抉择,本文商量的是自个儿觉着 SVG 中在骨子里项目中格外有使用价值 SVG 线条动画。

SVG 为何

可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标志可缩放的矢量图形。(摘自MDN)

上边代码中,先谈谈 svg 标签:

  • version: 表示 `` 的本子,近来独有 1.0,1.1 两种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述四个值固定,表示命名空间,当数码单独存在svg文件内时,那3个值不可能大约
  • class:便是我们听得多了就能说的详细的 class
  • width | height: 定义 svg 画布的轻重
  • viewbox: 定义了画布上能够来得的区域,当 viewBox 的大大小小和 svg 差异的时间,viewBox 在屏幕上的展现会缩放至 svg 同等大小(一时可以不用驾驭)

有了 svg 标签,大家就足以愉悦的在其间加多 SVG 图形了,上面,我在 svg 中定义了七个 polyline 标签。

 

SVG 基本造型

polyline:是SVG的三个主干造型,用来创设一雨后春笋直线连接八个点。

其实,polyline 是多个相比较有的时候用的模样,相比常用的是pathrectcircle 等。这里本人利用polyline 的因由是供给使用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创立狡猾过渡角。

SVG 中定义了部分宗旨造型,在后续下文在此以前,建议点进去先了然部分中坚图形的竹签及写法:

图片 4

举个栗子

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 线条动画

好,终于到本文的机要了。

图片 5

下边,大家给七个 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; } }

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 全都不认得? 图片 6

莫慌,其实过多和 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 可操纵用来描边的点划线的绘画范式。

它是贰个和数列,数与数里面用逗号只怕空白隔开分离,钦点短划线和缺口的长度。假设提供了奇数个值,则这几个值的数列重复三次,进而成为偶数个值。由此,5,3,2等同于5,3,2,5,3,2

批注很苍白,直接看例子:

See the Pen stroke-dasharray by Chokcoco (@Chokcoco) on CodePen.

地方,填充进度条,使用了上边这几个动画 :

@keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

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 线条动画完毕开关交互

图片 7

See the Pen svg线条动画完成按键交互 by Chokcoco (@Chokcoco) on CodePen.

SVG 为何

可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标识可缩放的矢量图形。(摘自MDN)

上边代码中,先谈谈 svg 标签:

  • version: 表示 <svg> 的版本,方今唯有 1.0,1.1 二种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述七个值固定,表示命名空间,当数码单独存在svg文本内时,这3个值不能够轻易
  • class:正是我们熟知的 class
  • width | height: 定义 svg 画布的高低
  • viewbox: 定义了画布上能够显示的区域,当 viewBox 的尺寸和 svg 不一致期,viewBox 在显示器上的来得会缩放至 svg 同等大小(临时能够毫无明白)

有了 svg 标签,大家就能够愉悦的在里边加多 SVG 图形了,上面,我在 svg 中定义了四个 polyline 标签。

SVG 线条动画达成圆形进程条

See the Pen svg线条动画达成圆形进度条 by Chokcoco (@Chokcoco) on CodePen.

 

多 SVG 图形线条动画合作

事先小编司二个 h5 里面应用过的,多SVG 图形线条动画协作,可以塑造一些比较炫丽的动画,很有科学和技术感。

图片 8

See the Pen JbQNME by Chokcoco (@Chokcoco) on CodePen.

正文为止,笔者在本身的 Github 上,使用 SVG 完毕了有些图片 — SVG奇思妙想,德姆o能够戳这里。

下卷作品将会详述非准则图形,怎么样运用 PS + AI 生成 path 路径,实现 SVG 动画,放个 德姆o,敬请期待。

图片 9

到此本文甘休,要是还大概有怎样难题依旧建议,可以多多交流,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏援救本身写出更加多好小说,感谢!

打赏小编

SVG 基本造型

polyline:是SVG的三个宗旨造型,用来创建一二种直线连接七个点。

其实,polyline 是四个比较有时用的模样,相比较常用的是pathrectcircle 等。这里自个儿动用polyline 的从头到尾的经过是亟需利用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处成立狡猾过渡角。

SVG 中定义了有的宗旨造型,在后续下文此前,建议点进去先驾驭一些骨干图形的竹签及写法:

 

打赏扶助本身写出更加的多好小说,多谢!

任选一种支付办法

图片 10 图片 11

1 赞 10 收藏 评论

 

有关笔者:chokcoco

图片 12

经不住小运似水,逃可是此间少年。 个人主页 · 笔者的篇章 · 63 ·    

图片 13

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: 01370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
 
@keyframes lineMove {
    0%{
        stroke-dasharray: 01350;
    }
    100%{
        stroke-dasharray: 13501350;
    }
}

那尼玛是什么样 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: 01350;
    }
    100%{
        stroke-dasharray: 13501350;
    }
}

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

下一场对接到 stroke-dasharray: 1350, 1350,表示线框短划线和缺口的尺寸分别为 1350 和 1350,因为任何图形的长短就是1350,所以整个进程条会被日渐填充满。

精晓了那么些能力后,就足以行使 stroke-dasharray 和 stroke-dashoffset 制作非常多不利的相互场景:

 

SVG 线条动画完结开关交互

图片 14

 

 

SVG 线条动画达成圆形进度条

 

 

多 SVG 图形线条动画协作

事先小编司贰个 h5 里面应用过的,多SVG 图形线条动画合作,能够制作一些相比炫丽的卡通,很有科学技术感。

 

 

 

本文停止,我在本人的 Github 上,使用 SVG 完结了一些图片 -- SVG奇思妙想,德姆o能够戳这里。

此文转载,

感兴趣的心上人可以相互调换,qq:1049929298;

Github:Andycty;

编辑:关于计算机 本文来源:线条动画入门

关键词: