<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"/>

效果:

图片 1

呵呵,看起来很简单,但是,如何让这个线条动起来呢?这里就要明白到SVG里的path的一些主要属性:

  1. stroke:标识路径的颜色;
  2. d:标识路径命令的集合,这个属性主要决定了线条的形状。
  3. stroke-width:标识路径的宽度,单位是px;
  4. stroke-dasharray:它是一个<length>和<percentage>数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2等同于5,3,2,5,3,2;
  5. stroke-dashoffset:标识的是整个路径的偏移值;

以一张图来解释stroke-dasharray和stroke-dashoffset更容易理解一些:

图片 2

因此,我们之前的路径就会变成这个样子:

CSS

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

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

效果:

图片 3

理解了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;
      }
}

效果:

图片 4

511这个值是整个路径的长度,可以用js的document.getElementById(‘path’).getTotalLength()得到

stroke-dasharray: 0, 511; 表示实线和空隙的长度分别为 0 和
511,所以一开始整个路径都是空隙,所以是空的。
然后过渡到 stroke-dasharray: 511, 511; 因为整个线条的长度就是
511,而实线的长度也慢慢变成511,所以整个线条就出现了。

同样利用stroke-dashoffset也可以实现这个效果,原理就是最初线条分为511实线,和511空隙,但是由于设置了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;
  }
}

效果:

图片 5

当我们掌握了上述的方法后,整个利用SVG实现线条动画的原理就已经清楚了,我们需要的就是一个SVG路径了,但是总画一些简单的线条还是不美啊,那我们如何才能得到复杂的svg路径呢?

  1. 找UI设计师要一个。
  2. 自己利用PS和AI做一个,只需要简单的2步。

图片 6

以部落LOGO为例:

1,得到部落LOGO的png图片。

2,右键图层,然后点击从选区生成工作路径,我们就可以得到:

图片 7

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

图片 8

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

5,利用上文介绍的实现动画的方法,我们就可以轻松的得到了下面这个效果。

图片 9

线条动画进阶:

可以看到上面的动画效果和文章最初显示的动画效果还是有区别的,要想实现文章最初的动画效果,需要用到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%;
      }
}

思路就是:

1,将原来只有一条path的路径替换成两条,并且这两条的路径是完全重合的。

2,分别设置两条路径的stroke-dasharray和stroke-dashoffset的css3的animation动画,注意两条路径的动画不能完全一样要有差值。

3,设置成功之后就可以利用animation动画触发的时机和改变程度来实现多条动画效果。

效果:

图片 10

那么如何实现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条完全重合的路径,并且每个路径的颜色和动画效果都不一样。

效果:

图片 11

 

开启愉快的svg线条之旅吧!

 

参考资料:

1 赞 1 收藏
评论

图片 12

5、SVG动画

Step2、绘制购物袋

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

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开始,后面紧跟着7个参数,这7个参数分别用来表示:

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

图片 13

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

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;” />

上面的部分是一个半圆弧,我同样用路径来画出,也可以使用基础形状来完成。

样式中的stokestroke-width分别用来设置描边色和描边的宽度。

图片 14

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

2017/02/28 · HTML5 ·
SVG

原文出处:
AlloyTeam   

通常来说web前端实现动画效果主要通过下面几种方案:

  • css动画;利用css3的样式效果可以将dom元素做出动画的效果来。
  • canvas动画;利用canvas提供的API,然后利用清除-渲染这样一帧一帧的做出动画效果。
  • svg动画;同样svg也提供了不少的API来实现动画效果,并且兼容性也不差,本文主要讲解一下如何制作svg线条动画。

先来看几个效果:

图片 15demo

图片 16demo

图片 17demo

以上这些效果都是利用SVG线条动画实现的,只用了css3和svg,没有使用一行javascript代码,这一点和canvas比起来要容易一些,下面就说明一下实现这些效果的原理。

关于SVG的基础知识,我这里就不再叙述了,大家可以直接在文档中查看相关的API,这里只说一下实现线条动画主要用到的:path
(路径)

5.3 小结

关于用svg做动画,更推荐用5.2的方式,并且5.2中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()

Step1、声明SVG视口

XHTML

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

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

指定一个宽高都为100像素的区域,width=”100”和width=”100px”是等价的,当然也可以使用其他的合法单位,例如cm、mm、em等

阅读器会设置一个默认的坐标系统,见图:左上角为原点,其中水平(x)坐标向右递增,垂直(y)坐标向下递增。

图片 18

在没有指定的情况下,所有的的数值默认单位都是像素。

6、参考:

  • SVG Sprite
    使用简介
  • SVG 研究之路 (18) – 再談
    defs
  • 超级强大的SVG SMIL
    animation动画详解
  • https://www.nihaoshijie.com.cn/index.php/archives/667/

一个例子上手 SVG 动画

2017/05/05 · HTML5 ·
SVG

原文出处:
凹凸实验室   

CSS3动画已足够强大,不过还是有一些它做不到的地方。配合SVG,让Web动效有更多的可能性。这次要做的效果是一个loading动画(如图):其中旋转通过CSS来完成,但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助SVG来实现。

图片 19

1、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>

Step6、给眼睛添加动画

两只眼睛都是沿着圆弧运动 ,例如左眼,首先用一个路径来规定它的运动轨迹:

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:指定一个外部定义的路径

图片 20

发表评论

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