>

线条动画入门

- 编辑:至尊游戏网站 -

线条动画入门

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 图形线条动画合作,能够制作一些比较炫耀的动画,很有科技(science and technology)感。

图片 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;

本文由软件综合发布,转载请注明来源:线条动画入门