菜单

金沙澳门官网网址SVG 线条动画入门

2019年4月22日 - 金沙前端

SVG 为何

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

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

有了 svg 标签,大家就足以心满意足的在其间增多 SVG 图形了,上面,我在 svg 中定义了多少个 polyline 标签。

SVG 线条动画

好,终于到本文的重大了。

金沙澳门官网网址 1

地点,咱们给七个 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 全都不认得? 金沙澳门官网网址 2

莫慌,其实过多和
CSS 相比一下可怜好精通,只是换了个名字:

最主要讲讲能够完成线条动画的最首要属性 stroke-dasharray 。

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

它是一个<length>和<percentage>数列,数与数以内用逗号恐怕空白隔断,钦赐短划线和缺口的长短。假使提供了奇数个值,则那么些值的数列重复一遍,从而成为偶数个值。因而,5,3,2等同于5,3,2,5,3,2

解说很苍白,直接看例子:

上边,填充进程条,使用了下边那一个动画

@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 基本造型

polyline:是SVG的叁个基本造型,用来创制一多元直线连接八个点。

其实,polyline 是八个相比较不常用的造型,相比较常用的是pathrectcircle 等。那里自个儿动用polyline 的缘由是内需采用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创制圆滑过渡角。

SVG
中定义了1部分大旨造型,在后续下文从前,建议点进去先通晓部分中央图形的标签及写法:

金沙澳门官网网址 3

 

 

多 SVG 图形线条动画合作

事先笔者司三个 h伍里面应用过的,多SVG 图形线条动画同盟,能够创建一些比较炫人眼目的动画片,很有科技(science and technology)感。

金沙澳门官网网址 4

 

正文甘休,笔者在本人的 Github 上,使用 SVG 完毕了一部分图纸
— SVG奇思妙想,德姆o能够戳那里。

下卷小说将会详述非规则图形,怎样运用 PS + AI 生成 path 路线,完毕 SVG
动画,放个 Demo,敬请期待。

金沙澳门官网网址 5

 

到此本文截止,如若还有啥疑点依然建议,能够多多调换,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

线条动画入门,web动画svg线条
经常我们说的 Web 动画,包括了3大类。 CSS3 动画 javascript
动画(canvas) html 动画(SVG) 个人…

SVG 线条动画达成按键交互

金沙澳门官网网址 6

See the Pen
svg线条动画完结开关交互 by
Chokcoco (@Chokcoco) on
CodePen.

SVG 为何

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

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

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

村办以为 三种动画各有高低,实际应用中依照精通景况作出选用,本文探究的是本身感到 SVG
中在实质上项目中11分有使用价值 SVG 线条动画。

 

有关小编:chokcoco

金沙澳门官网网址 7

经不住大运似水,逃然而此间少年。

个人主页 ·
我的篇章 ·
63 ·
   

金沙澳门官网网址 8

民用感觉 3种动画春兰秋菊,实际使用中依照明白意况作出选拔,本文斟酌的是自个儿觉着 SVG
中在实际上项目中万分有使用价值 SVG 线条动画。

SVG 线条动画完结圆形进程条

举个栗子

SVG 线条动画,在一些一定的场子下能够化解使用 CSS
不可能到位的卡通片。特别是在进程条方面,看看方今项目里的五个小要求,三个那种形态的进程条:

金沙澳门官网网址 9

把在那之中的进度条单独拿出去,也正是急需完结那样叁个功力:

金沙澳门官网网址 10

脑洞大开一下,使用 CSS3 怎么样贯彻那样2个进度条呢。

CSS三 是足以成功的,就是很麻烦。但是要是运用 SVG 的话,一蹴而就。

小编们若是你在阅读本文的时候有了断定的 SVG
基础,上面代码看看就懂了,好了,本文到此甘休。

金沙澳门官网网址 11

行吗,仍旧一步一步解释,上边进程条的关键 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 线条动画,在局地一定的场馆下得以消除使用 CSS
不能达成的动画片。特别是在进程条方面,看看近来项目里的多个小需要,二个那种形态的进度条:

金沙澳门官网网址 12

把里面包车型大巴进程条单独拿出来,也正是亟需贯彻如此二个功力:

金沙澳门官网网址 13

脑洞大开一下,使用 CSS三 如何兑现如此一个进程条呢。

CSS三 是能够产生的,正是很辛勤。可是假如应用 SVG 的话,一蹴而就。

See the Pen 难堪进程条 by
Chokcoco (@Chokcoco) on
CodePen.

咱俩只要你在读书本文的时候有了迟早的 SVG
基础,上面代码看看就懂了,好了,本文到此结束。

金沙澳门官网网址 14

好呢,依旧一步一步解释,上边进程条的首要 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>

SVG 线条动画

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

 

上边,大家给两个 polyline 都设置了 class,SVG
图形的3个好处就是局地质量样式能够采用 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 比较一下百般好通晓,只是换了个名字:

根本讲讲能够得以完成线条动画的最主要属性 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 线条动画落成按键交互

金沙澳门官网网址 15

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图