线条动画入门,一个例证上手

by admin on 2019年4月4日

线条之美,玩转SVG线条动画

2017/02/28 · HTML5 ·
SVG

原稿出处:
AlloyTeam   

平凡来说web前端达成动画效果主要透过上面二种方案:

  • css动画;利用css叁的体制效果能够将dom成分做出动画的功力来。
  • canvas动画;利用canvas提供的API,然后利用清除-渲染那样一帧壹帧的做出动画效果。
  • svg动画;同样svg也提供了众多的API来兑现动画效果,并且包容性也不差,本文首要教学一下什么营造svg线条动画。

先来看多少个职能:

必发88 1demo

必发88 2demo

必发88 3demo

以上这个功能都是运用SVG线条动画实现的,只用了css三和svg,未有选用壹行javascript代码,那或多或少和canvas比起来要不难一些,上面就说澳优(Ausnutria Hyproca)(Beingmate)下兑现那几个功用的法则。

至于SVG的基础知识,我那里就不再叙述了,大家能够从来在文书档案中查占星关的API,那里只说一降低成线条动画主要运用的:path
(路径)

实际工作中,SVG大部分是用<svg>+<defs></defs>(或然symbol)+<use></use>+</svg>的组成来行使的,defs
顾名思义正是「definitions」定义,大家得以把无数重复性质高的成分,放入defs
元素内,让它变成二个得以重新使用的物件。而symbol越多的只是富含单个图标。

叁个事例上手 SVG 动画

2017/05/05 · HTML5 ·
SVG

原稿出处:
坑坑洼洼实验室   

CSS叁动画已丰硕强劲,可是仍然有1些它做不到的地点。合作SVG,让Web动作效果有更加多的大概。此次要做的职能是2个loading动画(如图):当中旋转通过CSS来形成,但是旋转之后圆弧裁减变成笑脸的嘴巴须求依赖SVG来兑现。

必发88 4

线条动画入门,一个例证上手。SVG 线条动画入门

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

本文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
迎接插手伯乐在线 专辑小编。

平凡大家说的 Web 动画,包括了叁大类。

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

个体觉得 3种动画各有高低,实际运用中依照驾驭景况作出抉择,本文商讨的是本人认为 SVG
中在其实项目中尤其有应用价值 SVG 线条动画。

<path> 标签命令

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • 线条动画入门,一个例证上手。Z = closepath

运用path的那些命令我们得以兑现大家想要的别样线条组合,以壹段不难的线条为例:

XHTML

<path id=”path” fill=”none” stroke=”#000″ stroke-width=”1px”
d=”M452,293c0,0,0-61,72-44c0,0-47,117,81,57
s5-110,10-67s-51,77.979-50,33.989″/>

1
2
<path id="path" fill="none" stroke="#000" stroke-width="1px" d="M452,293c0,0,0-61,72-44c0,0-47,117,81,57
    s5-110,10-67s-51,77.979-50,33.989"/>

效果:

必发88 5

呵呵,看起来很简单,不过,怎么着让那个线条动起来呢?那里就要懂获得SVG里的path的1对至关心保护要品质:

  1. stroke:标识路径的颜色;
  2. d:标识路径命令的聚集,那特性格主要控制了线条的模样。
  3. stroke-width:标识路径的拉长率,单位是px;
  4. stroke-dasharray:它是一个<length>和<percentage>数列,数与数以内用逗号只怕空白隔开分离,钦定短划线和缺口的长度。假如提供了奇数个值,则那些值的数列重复3回,从而成为偶数个值。由此,5,叁,贰如出壹辙5,三,2,5,3,二;
  5. stroke-dashoffset:标识的是总体路径的偏移值;

以一张图来诠释stroke-dasharray和stroke-dashoffset更易于领悟一些:

必发88 6

就此,大家前边的不二诀窍就会变成这一个样子:

CSS

#path { stroke-dasharray: 3px, 1px; stroke-dasharray: 0; }

1
2
3
4
#path {
        stroke-dasharray: 3px, 1px;
        stroke-dasharray: 0;
}

效果:

必发88 7

知情了stroke-dasharray的效益之后,上面大家就足以行使css3的animation来让那一个路子动起来。

Sass

#path {     animation: move 3s linear forwards; }   @keyframes move {
      0%{           stroke-dasharray: 0, 511px;       }       100%{
          stroke-dasharray: 511px, 511px;       } }

1
2
3
4
5
6
7
8
9
10
11
12
#path {
    animation: move 3s linear forwards;
}
 
@keyframes move {
      0%{
          stroke-dasharray: 0, 511px;
      }
      100%{
          stroke-dasharray: 511px, 511px;
      }
}

效果:

必发88 8

51一以此值是全方位路径的长短,能够用js的document.getElementById(‘path’).getTotalLength()获得

stroke-dasharray: 0, 51一; 表示实线和空隙的长短分别为 0 和
511,所以1起始全方位路径都以空隙,所以是空的。
然后对接到 stroke-dasharray: 51壹, 51一; 因为整个线条的尺寸就是51一,而实线的长短也稳步变成51一,所以总体线条就现身了。

如出1辙接纳stroke-dashoffset也能够完毕那个功用,原理便是前期线条分为511实线,和51一空当,然而由于设置了offset使线条偏移不可知了,当不止修改offset后,线条稳步出现。

Sass

#path {     animation: move 3s linear forwards;     stroke-dasharray:
511px,511px; }   @keyframes move {   0%{       stroke-dashoffset: 511px;
  }   100%{       stroke-dashoffset: 0;   } }

1
2
3
4
5
6
7
8
9
10
11
12
13
#path {
    animation: move 3s linear forwards;
    stroke-dasharray: 511px,511px;
}
 
@keyframes move {
  0%{
      stroke-dashoffset: 511px;
  }
  100%{
      stroke-dashoffset: 0;
  }
}

效果:

必发88 9

当大家了然了上述的不二等秘书诀后,整个利用SVG达成线条动画的原理就已经了然了,大家需求的就是多个SVG路径了,然而总画1些简练的线条照旧不美啊,那我们什么才能收获复杂的svg路径呢?

  1. 找UI设计师要3个。
  2. 协调使用PS和AI做一个,只必要简单的二步。

必发88 10

以部落LOGO为例:

一,获得部落LOGO的png图片。

2,右键图层,然后点击从选区生成工作途径,大家就能够收获:

必发88 11

叁,文件–导出–路径到AI,将路径导出在AI里面打开。

必发88 12

4,在AI里面选用保存成svg格式的文本,然后用sublime打开svg文件,将path的d拷贝出来即可。

伍,利用上文介绍的贯彻动画的不二等秘书诀,大家就足以轻松的得到了上边那么些功用。

必发88 13

必发88,线条动画进阶:

能够看到地点的动画片效果和小说最初展现的卡通效果照旧有分其他,要想实现小说最初的卡通片效果,需求用到SVG的<symbol>
和 <use>来兑现,读者能够在网上查一下那多少个标签的用法。

XHTML

<symbol id=”pathSymbol”> <path class=”path” stroke=”#00adef”
d=”M281.221,261.806c0,2.756-2.166,4.922-4.922,4.922l0,0h-33.964c-11.715-24.119-31.503-59.855-47.156-68.026
c-15.751,7.974-35.637,43.907-47.451,68.026h-33.865l0,0c-2.756,0-4.922-2.166-4.922-4.922l0,0l0,0c0-0.295,0-0.689,0.098-0.984
c0,0,14.078-69.109,79.15-129.161c-2.953-2.56-5.907-5.119-8.959-7.58c-1.87-1.575-2.166-4.233-0.591-6.104
c1.575-1.772,4.43-2.166,6.497-0.689c3.347,2.461,6.694,5.218,9.746,8.073c3.15-2.953,6.497-5.71,10.041-8.368
c2.067-1.378,4.922-1.083,6.497,0.689c1.575,1.87,1.28,4.529-0.591,6.104c-3.052,2.56-6.104,5.218-9.155,7.876
c65.27,59.953,79.446,129.161,79.446,129.161C281.221,261.117,281.221,261.412,281.221,261.806L281.221,261.806L281.221,261.806z”/>
<path class=”path” stroke=”#00adef”
d=”M194.589,212.583h0.984l0,0c19.886,28.451,31.503,54.145,31.503,54.145h-63.99C163.086,266.728,174.703,241.034,194.589,212.583
L194.589,212.583z”/> </symbol> <g> <use
xlink:href=”#pathSymbol” id=”path1″></use> <use
xlink:href=”#pathSymbol” id=”path2″></use> </g>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<symbol id="pathSymbol">
    <path  class="path" stroke="#00adef"  d="M281.221,261.806c0,2.756-2.166,4.922-4.922,4.922l0,0h-33.964c-11.715-24.119-31.503-59.855-47.156-68.026
  c-15.751,7.974-35.637,43.907-47.451,68.026h-33.865l0,0c-2.756,0-4.922-2.166-4.922-4.922l0,0l0,0c0-0.295,0-0.689,0.098-0.984
  c0,0,14.078-69.109,79.15-129.161c-2.953-2.56-5.907-5.119-8.959-7.58c-1.87-1.575-2.166-4.233-0.591-6.104
  c1.575-1.772,4.43-2.166,6.497-0.689c3.347,2.461,6.694,5.218,9.746,8.073c3.15-2.953,6.497-5.71,10.041-8.368
  c2.067-1.378,4.922-1.083,6.497,0.689c1.575,1.87,1.28,4.529-0.591,6.104c-3.052,2.56-6.104,5.218-9.155,7.876
  c65.27,59.953,79.446,129.161,79.446,129.161C281.221,261.117,281.221,261.412,281.221,261.806L281.221,261.806L281.221,261.806z"/>
    <path  class="path" stroke="#00adef"  d="M194.589,212.583h0.984l0,0c19.886,28.451,31.503,54.145,31.503,54.145h-63.99C163.086,266.728,174.703,241.034,194.589,212.583
L194.589,212.583z"/>
</symbol>
<g>
  <use xlink:href="#pathSymbol"
    id="path1"></use>
    <use xlink:href="#pathSymbol"
      id="path2"></use>
</g>

Sass

#path1 { stroke-dashoffset: 7% 7%; stroke-dasharray: 0 35%; animation:
animation 3s linear forwards; } @keyframes animation { 100% {
stroke-dasharray: 7% 7%; stroke-dashoffset: 7%; } } #path2 {
stroke-dashoffset: 7% 7%; stroke-dasharray: 0 35%; animation: animation2
3s linear forwards; } @keyframes animation2 { 100% { stroke-dasharray:
7% 7%; stroke-dashoffset: 14%; } }

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
28
29
#path1 {
    stroke-dashoffset: 7% 7%;
    stroke-dasharray: 0 35%;
    animation: animation 3s linear forwards;
  }
  @keyframes animation {
      100% {
        stroke-dasharray: 7% 7%;
        stroke-dashoffset: 7%;
      }
  }
  #path2 {
    stroke-dashoffset: 7% 7%;
    stroke-dasharray: 0 35%;
    animation: animation2 3s linear forwards;
  }
  @keyframes animation2 {
      100% {
          stroke-dasharray: 7% 7%;
          stroke-dashoffset: 14%;
      }
}

思路正是:

一,将原来只有一条path的路径替换到两条,并且那两条的门径是全然重合的。

2,分别设置两条路子的stroke-dasharray和stroke-dashoffset的css三的animation动画,注意两条途径的卡通不可能一心1致要有差值。

3,设置成功未来就能够动用animation动画触发的空子和更改程度来落到实处多条动画效果。

效果:

必发88 14

那么怎么样落到实处alloyteam的文字动画呢,其实原理也是利用了stroke-dasharray和stroke-dashoffset,那五个性子不仅能够成效在<path>上,同样能够成效在<text>上。

XHTML

<symbol id=”text”> <text x=”30%” y=”35%”
class=”text”>QQ</text> </symbol> <g> <use
xlink:href=”#text” class=”use-text”></use> <use
xlink:href=”#text” class=”use-text”></use> <use
xlink:href=”#text” class=”use-text”></use> <use
xlink:href=”#text” class=”use-text”></use> <use
xlink:href=”#text” class=”use-text”></use> </g>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <symbol id="text">
    <text x="30%" y="35%" class="text">QQ</text>
  </symbol>
  <g>
    <use xlink:href="#text"
      class="use-text"></use>
      <use xlink:href="#text"
        class="use-text"></use>
        <use xlink:href="#text"
          class="use-text"></use>
          <use xlink:href="#text"
            class="use-text"></use>
            <use xlink:href="#text"
              class="use-text"></use>
  </g>

Sass

.use-text:nth-child(1) { stroke: #360745; animation: animation1 8s
infinite ease-in-out forwards; } .use-text:nth-child(2) { stroke:
#D61C59; animation: animation2 8s infinite ease-in-out forwards; }
.use-text:nth-child(3) { stroke: #E7D84B; animation: animation3 8s
infinite ease-in-out forwards; } .use-text:nth-child(4) { stroke:
#EFEAC5; animation: animation4 8s infinite ease-in-out forwards; }
.use-text:nth-child(5) { stroke: #1B8798; animation: animation5 8s
infinite ease-in-out forwards; } @keyframes animation1 { 50%{
stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; } 70%{
stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; } } @keyframes
animation2 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; }
70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; } } @keyframes
animation3 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; }
70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; } } @keyframes
animation4 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; }
70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; } } @keyframes
animation5 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; }
70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; } }

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
.use-text:nth-child(1) {
      stroke: #360745;
      animation: animation1 8s infinite ease-in-out forwards;
}
          
.use-text:nth-child(2) {
      stroke: #D61C59;
      animation: animation2 8s infinite ease-in-out forwards;
}
          
.use-text:nth-child(3) {
       stroke: #E7D84B;
       animation: animation3 8s infinite ease-in-out forwards;
}
.use-text:nth-child(4) {
       stroke: #EFEAC5;
       animation: animation4 8s infinite ease-in-out forwards;
}
.use-text:nth-child(5) {
      stroke: #1B8798;
      animation: animation5 8s infinite ease-in-out forwards;
}
@keyframes animation1 {
       50%{
            stroke-dasharray: 7% 28%;
            stroke-dashoffset: 7%;
       }
       70%{
             stroke-dasharray: 7% 28%;
             stroke-dashoffset: 7%;
       }
}
@keyframes animation2 {
       50%{
           stroke-dasharray: 7% 28%;
           stroke-dashoffset: 14%;
       }
       70%{
            stroke-dasharray: 7% 28%;
            stroke-dashoffset: 14%;
       }
}
@keyframes animation3 {
     50%{
         stroke-dasharray: 7% 28%;
         stroke-dashoffset: 21%;
    }
    70%{
         stroke-dasharray: 7% 28%;
         stroke-dashoffset: 21%;
    }
}
@keyframes animation4 {
       50%{
            stroke-dasharray: 7% 28%;
            stroke-dashoffset: 28%;
       }
       70%{
            stroke-dasharray: 7% 28%;
            stroke-dashoffset: 28%;
       }
}
@keyframes animation5 {
      50%{
           stroke-dasharray: 7% 28%;
           stroke-dashoffset: 35%;
      }
      70%{
           stroke-dasharray: 7% 28%;
           stroke-dashoffset: 35%;
      }
}

那边用了5条完全重叠的门道,并且种种路径的颜料和卡通效果都不平等。

效果:

必发88 15

 

打开欢愉的svg线条之旅吧!

 

参考资料:

1 赞 1 收藏
评论

必发88 16

一、SVG使用办法

不论哪个种类艺术,svg都不可能不作为根标签

  • 外链方式
    那种办法是先定义好多少个svg文件,再在html或css中引入。

// test.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG</title>
</head>
<body>
         ![](test.svg)
</body>
</html>

外链的法子唯有是将svg成分作为三个图纸,相当小概利用JS对其做一些操作,如改变大小颜色等。

  • 内联方式

<div id="div1">
    <svg width="100%" height="100%" >
        <circle cx="100" cy="100" r="40" fill="red" id='circle'></circle>
    </svg>
</div>

内联情势能够向操作普通html成分一样通过getElementById获得dom,再经过setAttribute方法做属性操作:

<script type="text/javascript">
      var c = document.getElementById('circle');
      c.setAttribute('fill','blue');
</script>

Step1、声明SVG视口

XHTML

<svg width=”100″ height=“100”></svg>

1
<svg width="100" height=“100”></svg>

点名2个宽高都为拾0像素的区域,width=”十0”和width=”十0px”是等价的,当然也足以使用其余的官方单位,例如cm、mm、em等

读书器会设置一个默许的坐标系列,见图:左上角为原点,当中国水力电力对民有公司业平(x)坐标向右递增,垂直(y)坐标向下递增。

必发88 17

在并没有点名的情景下,全数的的数值私下认可单位都以像素。

举个栗子

SVG 线条动画,在1些特定的场子下能够化解选拔 CSS
不可能达成的卡通片。越发是在进程条方面,看看方今项目里的3个小供给,3个那种形态的进程条:

必发88 18

把里面包车型客车进程条单独拿出来,也正是亟需落成如此一个功能:

必发88 19

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

CSS3 是能够形成的,正是很劳累。可是如果采用 SVG 的话,一蹴而就。

See the Pen 非不荒谬进度条 by
Chokcoco (@Chokcoco) on
CodePen.

咱们只要你在翻阅本文的时候有了一定的 SVG
基础,上面代码看看就懂了,好了,本文到此结束。

必发88 20

好啊,还是一步一步解释,上边进程条的首要 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>

2、defs & use

  • 实例1:简单构成

<defs>
  <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
</defs>
<use xlink:href="#rect1"/>
<use xlink:href="#rect1" x="110"/>

必发88 21

焦点构成

  • 实例二:复杂组合

<defs>
    <g id="g1">
          <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
          <circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/>
    </g>
</defs>
<use xlink:href="#g1"/>
<use xlink:href="#rect1" x="110"/>
<use xlink:href="#circle1" x="210"/>

必发88 22

复杂组合

  • 实例3:渐变

<defs>
   <linearGradient id="a1">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>
<rect x="50" y="250" width="100" height="100" stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
<circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a1)"></circle>
<rect x="290" y="250" width="100" height="100" stroke="url(#a1)" stroke-width="5" fill="none"></rect>

必发88 23

渐变

  • 实例4:路径

<defs>
  <path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
</defs>
<text>
   <textPath xlink:href="#a1">这是随路径跑的文字,很酷吧
  </textPath>
</text>

必发88 24

路径

  • 实例5:裁切

<defs>  
  <clipPath id="a1">
  <rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#a1)" fill="#000" />

必发88 25

裁切

  • 实例6:遮罩

<defs>
  <mask id="mask1"> 
    <rect  x="50" y="50" width="100" height="100" fill="#ccc"/>
    <rect  x="150" y="150" width="50" height="50" fill="#fff"/>
  </mask> 
</defs>
  <rect id="box1" x="50" y="50" width="150" height="150" fill="#0f0"/>
  <rect id="box2" x="50" y="50" width="150" height="150" fill="#f00" mask="url(#mask1)"/>

必发88 26

遮罩

  • 实例7:标志marker

<defs>
  <marker id="r" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
      <circle fill="#fff" stroke="#000" stroke-width="10" cx="25" cy="25" r="25"/>
  </marker>
    <marker id="g" viewBox="0 0 50 50" refX="25" refY="25" markerWidth="10" markerHeight="10" orient="45" >
      <rect fill="#0a0" width="50" height="50"/>
  </marker>
  <marker id="b" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
      <circle fill="#f99" stroke="#f00" stroke-width="10" cx="25" cy="25" r="25"/>
  </marker>
</defs>
<polyline points="20,100 50,100 80,20 110,80 140,30 170,100 200,100" fill="none" stroke="black" stroke-width="1" marker-end="url(#b)" marker-start="url(#r)" marker-mid="url(#g)"></polyline>

必发88 27

marker

  • 实例8:滤镜

<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />

必发88 28

滤镜

Step二、绘制购物袋

购物袋由两个部分组成,先画下面的主体:

XHTML

<path d=”M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10
10 90 0 1 20 90″ style=”fill: #e9e8ee;” />

1
<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />

其余模样都能够使用路径成分画出,描述轮廓的多寡放在它的d属性中。
a.样式中的fill用来安装填充色。
b.路径数据由命令和坐标构成:

指令 说明
M 20 40 表示移动画笔到(20,40)
L 80 40 表示绘制一条线到(80, 40)
A 10 10 90 0 1 70 100 绘制一个椭圆弧

圆弧命令以字母A发轫,后边紧跟着多少个参数,那8个参数分别用来表示:

  • 椭圆的x半径和y半径
  • 椭圆的x轴旋转角度
  • 圆弧的角度小于180度,为0;大于或等于180度,则为壹
  • 以负角度绘制为0,不然为一
  • 终点的x、y坐标

必发88 29

接下来绘制购物袋上面的部分

XHTML

<path d=”M 35 40 A 15 15 180 1 1 65 40″ style=”fill: none; stroke:
#e9e8ee; stroke-width: 5;” />

1
<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />

地点的有个别是2个半圆弧,小编壹样用路径来画出,也能够接纳基础形状来成功。

体制中的stokestroke-width独家用来安装描边色和描边的小幅度。

必发88 30

SVG 为何

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

地点代码中,先谈谈 svg 标签:

  • version: 表示 “ 的版本,方今唯有 一.0,一.壹 三种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述三个值固定,表示命名空间,当数码单独存在svg文本内时,那1个值不可能不难
  • class:正是我们纯熟的 class
  • width | height: 定义 svg 画布的轻重缓急
  • viewbox: 定义了画布上得以显得的区域,当 viewBox 的深浅和 svg
    区别时,view博克斯 在显示屏上的显示会缩放至 svg
    同等大小(暂且能够毫不精通)

有了 svg 标签,大家就能够心潮澎湃的在里面添加 SVG 图形了,上面,我在 svg 中定义了多少个 polyline 标签。

3、控制svg

  • CSS 方式
    svg成分和html成分壹样,都得以用class属性添加类名来控制样式,只是对于svg成分而言,可决定的体裁较少,常见的有fill,stroke,stroke-width
    ,opacity以及transform,看一个例子:

    //定义区
    <svg>
      <symbol id="ic"> 
          <path fill="#000" d="..."/> 
      </symbol> 
    </svg>
    //使用区
    <svg class="icon" viewBox="0 0 100 125"> 
       <use class="ic-1" xlink:href="#ic" x="0" y="0" /> 
    </svg> 
    <svg class="icon" viewBox="0 0 100 125">
       <use class="ic-2" xlink:href="#ic" x="0" y="0" />
    </svg>
    //定义样式
    .icon { width: 100px; height: 125px; }
    use.ic-1 { fill: skyblue; } 
    use.ic-2 { fill: #FDC646; }
    svg path { fill: inherit; }    //防止.ic-1,.ic-2设置的fill被path覆盖
    

必发88 31

symbol成分和defs大约,都以用来整合成分的,但symbol越来越多的用于单个图标的三结合

  • JS 方式
    要在SVG内动态新增<path>或<rect>等要素,要采取createElementNS,而不是createElement,因为svg和html不在同3个命名空间里。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
        <script type="text/javascript">
            function makeSVG(tag, attrs) {
                var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
                for (var k in attrs)
                    el.setAttribute(k, attrs[k]);
                return el;
            }
            var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
            document.getElementById('s').appendChild(circle);
        </script>
    </body>
    </html>
    

Step三、绘制眼睛

XHTML

<circle cx=“40″ cy=”60″ r=”2.5″ style=”fill: #fff;” /> <circle
cx=”60″ cy=”60″ r=”2.5″ style=”fill: #fff;” />

1
2
<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" />
<circle cx="60" cy="60" r="2.5" style="fill: #fff;" />

运用基础形状,画五个个小圆点。多个属性分别是岗位坐标、半径和填充颜色。
必发88 32

SVG 基本造型

polyline:是SVG的1个主旨造型,用来成立1多级直线连接三个点。

其实,polyline 是一个比较不常用的形象,相比常用的是pathrectcircle 等。那里小编动用polyline 的原委是须求采纳 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创立圆滑过渡角。

SVG
中定义了部分中央造型,在继承下文从前,提出点进去先精通一些主干图形的竹签及写法:

必发88 33

四、svg最好实践

在工作中svg使用最多的现象照旧当小图标使用,替换诸如纯图片、iconfont图标等方案。使用内联svg的优势在于:一、少发二次http请求;二、放大不会变形;三、易于用JS控制,比iconfont更灵活。

最棒做法(SVG sprite):

  • 一、将全部供给选取的小图标统一定义在svg下,该svg要设置display:none,每一种小图标用symbol包围,每种symbol取1个id,方便后续调用;
  • 贰、使用svg+use的艺术调用,use中用属性xlink:href=’#id’来引用相应图标,能够给种种svg取三个类名,方便css和js动态控制;
  • 三、通过getElementById的秘籍得到要求转移属性的use成分,为其动态增进或删除相应的类名;
  • 四、添加的类名最后是运用在symbol上,symbol中定义的图标(path)会覆盖类名中对应的质量,所以并非忘了设置symbol巧月素的性质持续自symbol,如同
    上例中:svg path { fill: inherit; };
  • 五、要想完结尤其复杂的作用,如渐变等,能够利用defs;
  • 陆、要想做动画效果,能够在css类名中决定opacity、transform、stroke-dasharray和stroke-dashoffset属性。

Step四、绘制嘴巴

XHTML

<circle cx=”50″ cy=”70″ r=”15″ style=”fill: none; stroke: #fff;
stroke-width: 5; stroke-linecap: round;transform: rotate(280deg);
transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42,
95;”>

1
<circle cx="50" cy="70" r="15" style="fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round;transform: rotate(280deg); transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42, 95;”>

嘴巴是一段圆弧,笔者绘制了一个圆,然后描边了中间的一段,并且做了一个筋斗,来让它的角度处于不利的职分。

  • stroke-linecap:用来定义开放路线的告竣,可选round|butt|square
  • stroke-dasharray:用来创设虚线
  • stroke-dashoffset:设置虚线地点的开头偏移值,在下一手续里,它会和stroke-dasharray一起用来完成动效。

必发88 34

SVG 线条动画

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

必发88 35

地方,大家给多个 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 全都不认得? 必发88 36

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

它是3个和数列,数与数里面用逗号大概空白隔断,钦点短划线和缺口的长短。即便提供了奇数个值,则那些值的数列重复2次,从而成为偶数个值。因而,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,所以一早先1切图形都以被缺口占据,所以在视觉效果上长度为 0。

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

控制了这一个技能后,就足以选拔 stroke-dasharray 和 stroke-dashoffset 制作很多毋庸置疑的并行场景:

5、SVG动画

Step5、给嘴巴部分添加动作效果

CSS

@keyframes mouth { 0% { transform: rotate(-80deg); stroke-dasharray: 60,
95; stroke-dashoffset: 0; } 40% { transform: rotate(280deg);
stroke-dasharray: 60, 95; stroke-dashoffset: 0; } 70%, 100% { transform:
rotate(280deg); stroke-dashoffset: -23; stroke-dasharray: 42, 95; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes mouth {
  0% {
    transform: rotate(-80deg);
    stroke-dasharray: 60, 95;
    stroke-dashoffset: 0;
  }
  40% {
    transform: rotate(280deg);
    stroke-dasharray: 60, 95;
    stroke-dashoffset: 0;
  }
  70%, 100% {
    transform: rotate(280deg);
    stroke-dashoffset: -23;
    stroke-dasharray: 42, 95;
  }
}

卡通分为多个部分:

  1. 圆弧旋转
  2. 旋转之后减少变形

在多个循环往复里,最终留有三成的小时保持一个栖息。

必发88 37

SVG 线条动画完毕按钮交互

必发88 38

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

五.一 路径动画

路线动画基本是svg动画里最常用的了,其基本原理是动态改变stroke-dasharray和stroke-dashoffset属性的值:

必发88 39

实例:

<body>
    <svg>
        <symbol viewBox="0 0 24 20" id="ic" xmlns="http://www.w3.org/2000/svg">
            <title>点赞前</title>
            <path d="M22.825 6.727a6.236 6.236 0 0 0-1.8-3.818A5.275 5.275 0 0 0 17.36 1.44a5.275 5.275 0 0 0-3.667 1.47A11.134 11.134 0 0 0 12 5.09a11.134 11.134 0 0 0-1.692-2.18A5.275 5.275 0 0 0 6.64 1.44a5.275 5.275 0 0 0-3.667 1.47 6.236 6.236 0 0 0-1.8 3.817c-.044.546-.1 2.095 1.236 4.364 2.584 4.364 7.655 6.802 9.59 7.636 1.935-.834 7.006-3.272 9.59-7.636 1.337-2.27 1.28-3.83 1.235-4.364z" stroke="#454545" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <svg class="icon" viewBox="0 0 100 125">
        <use class="ic-1" xlink:href="#ic" x="0" y="0" />
    </svg>
</body>

    svg.icon {
        width: 120px;
        height: 135px;
    }
    use.ic-1 {
        stroke: gray;
        fill: gray;
        animation: move 3s linear forwards;
    }
    @keyframes move {
        0% {
            stroke-dasharray: 30px, 30px;
        }
        100% {
            stroke-dasharray: 30px, 0px;
        }
    }
    svg path {
        fill: inherit;
        stroke: inherit;
    }

效用就是stroke从30px长和30px空白渐渐变得未有空白

Step六、给眼睛添加动画

七只眼睛都以本着圆弧运动 ,例如左眼,首先用多少个路线来规定它的活动轨迹:

XHTML

<path id=”eyeright” d=”M 40 60 A 15 15 180 0 1 60 60″ style=”fill:
none; stroke-width: 0;” />

1
<path id="eyeright"  d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;" />

接下来利用animateMotion来设置动画:

XHTML

<circle class=”eye” cx=”” cy=”” r=”2.5″ style=”fill: #fff;”>
<animateMotion dur=”0.8s” repeatCount=”indefinite”
keyPoints=”0;0;1;1″ keyTimes=”0;0.3;0.9;1″ calcMode=”linear”>
<mpath xlink:href=”#eyeleft”/> </animateMotion>
</circle>

1
2
3
4
5
6
7
8
9
10
<circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;">
  <animateMotion
    dur="0.8s"
    repeatCount="indefinite"
    keyPoints="0;0;1;1"
    keyTimes="0;0.3;0.9;1"
    calcMode="linear">
    <mpath xlink:href="#eyeleft"/>
  </animateMotion>
</circle>
  • dur:动画的年华
  • repeatCount:重复次数
  • keyPoints:运动路径的关键点
  • timePoints:时间的关键点
  • calcMode:控制动画的移位速率的浮动,discrete | linear | paced |
    spline八个属性可选
  • mpath:钦点八个外部定义的门道

必发88 40

SVG 线条动画完毕圆形进度条

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

5.2 SMIL动画(2018/1/1更新)

上述动画情势连接供给依靠css来完结,其实svg专门有做动画的要素
先看运动端包容性:

必发88 41

SVG SMIL animation

  • set
    在特定时间过后修改有个别属性值
    用法:

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      马
      <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </text>
  </g>
</svg>

本条「马」会在3秒以后从横坐标160的职位移动60那一个地方(瞬移,无动画效果)

  • animate
    落到实处单属性(不包括css的transform)的卡通过渡效果

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
    马
      <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
  </g>
</svg>
  • animateTransform
    专用于transform动画

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
  </g>
</svg>
  • animateMotion
    专用于复杂的门路动画

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

Step7、将分歧地点的动画组成到1块

  • 肉眼的卡通是从嘴巴旋转完结起来,到嘴巴变形落成得了,由此和嘴巴的卡通片壹样,作者设置了八个照应的重要时间点。
  • 为了让衔接更顺畅,眼睛的动画片开端比嘴巴变形初叶有个别提前了一丝丝。

必发88 42

参考:

  • MDN-SVG文档
  • 《SVG精髓》- 人民邮政和邮电通讯出版社

    1 赞 2 收藏
    评论

必发88 43

多 SVG 图形线条动画合作

事先小编司3个 h5里面应用过的,多SVG 图形线条动画同盟,能够制作一些相比酷炫的动画片,很有科技(science and technology)感。

必发88 44

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

正文停止,小编在本身的 Github 上,使用 SVG 完成了有个别图片
— SVG奇思妙想,德姆o可以戳这里。

下卷作品将会详述非规则图形,如何运用 PS + AI 生成 path 路径,达成 SVG
动画,放个 德姆o,敬请期待。

必发88 45

到此本文甘休,若是还有哪些疑点还是建议,能够多多调换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏帮助作者写出更多好小说,多谢!

打赏笔者

5.3 小结

关于用svg做动画,更推荐用伍.二的措施,并且5.第22中学animate的用法是最多的,animate成分还足以构成使用:

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

此外,svg动画还足以手动控制(JS)动画的发端和间断

// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations()

打赏支持作者写出越多好文章,谢谢!

任选一种支付办法

必发88 46
必发88 47

1 赞 10 收藏
评论

6、参考:

  • SVG 百事可乐使用简介
  • SVG 切磋之路 (18) – 再談
    defs
  • 一级无敌的SVG SMIL
    animation动画详解
  • https://www.nihaoshijie.com.cn/index.php/archives/667/

有关小编:chokcoco

必发88 48

经不住命宫似水,逃然而此间少年。

个人主页 ·
小编的小说 ·
63 ·
   

必发88 49

发表评论

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

网站地图xml地图