线条动画入门,玩转SVG线条动画

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

2017/02/28 · HTML5 · SVG

原文出处: AlloyTeam   

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

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

先来看几个效果:

图片 1demo

图片 2demo

图片 3demo

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

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

“等一下,我碰!”——常见的2D碰撞检测

2017/02/22 · HTML5 · 1 评论 · 碰撞检测

原文出处: 凹凸实验室   

图片 4

“碰乜鬼嘢啊,碰走晒我滴靓牌”。想到“碰”就自然联想到了“麻将”这一伟大发明。当然除了“碰”,洗牌的时候也充满了各种『碰撞』。

好了,不废话。直入主题——碰撞检测。

在 2D 环境下,常见的碰撞检测方法如下:

  • 外接图形判别法
    • 轴对称包围盒(Axis-Aligned Bounding Box),即无旋转矩形。
    • 圆形碰撞
  • 光线投射法
  • 分离轴定理
  • 其他
    • 地图格子划分
    • 像素检测

下文将由易到难的顺序介绍上述各种碰撞检测方法:外接图形判别法 > 其他 > 光线投射法 > 分离轴定理。

另外,有一些场景只要我们约定好限定条件,也能实现我们想要的碰撞,如下面的碰壁反弹:

当球碰到边框就反弹(如x/y轴方向速度取反)。

JavaScript

if(ball.left < 0 || ball.right > rect.width) ball.velocityX = -ball.velocityX if(ball.top < 0 || ball.bottom > rect.height) ball.velocityY = -ball.velocityY

1
2
if(ball.left < 0 || ball.right > rect.width) ball.velocityX = -ball.velocityX
if(ball.top < 0 || ball.bottom > rect.height) ball.velocityY = -ball.velocityY

再例如当一个人走到 100px 位置时不进行跳跃,就会碰到石头等等。

因此,某些场景只需通过设定到适当的参数即可。

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

效果:

图片 5

呵呵,看起来很简单,但是,如何让这个线条动起来呢?这里就要明白到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更容易理解一些:

图片 6

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

CSS

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

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

效果:

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

效果:

图片 8

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;
  }
}

效果:

图片 9

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

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

图片 10

以部落LOGO为例:

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

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

图片 11

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

图片 12

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

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

图片 13

线条动画进阶:

可以看到上面的动画效果和文章最初显示的动画效果还是有区别的,要想实现文章最初的动画效果,需要用到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动画触发的时机和改变程度来实现多条动画效果。

效果:

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

效果:

图片 15

 

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

 

参考资料:

1 赞 1 收藏 评论

图片 16

外接图形判别法

举个栗子

SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:

图片 17

把里面的进度条单独拿出来,也就是需要实现这样一个效果:

图片 18

脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢。

CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。

See the Pen 不规则进度条 by Chokcoco (@Chokcoco) on CodePen.

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

图片 19

好吧,还是一步一步解释,上面进度条的主要 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>

轴对称包围盒(Axis-Aligned Bounding Box)

概念:判断任意两个(无旋转)矩形的任意一边是否无间距,从而判断是否碰撞。

算法:

JavaScript

rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y

1
2
3
4
rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.height + rect1.y > rect2.y

两矩形间碰撞的各种情况:
图片 20

在线运行示例(先点击运行示例以获取焦点,下同):

缺点:

  • 相对局限:两物体必须是矩形,且均不允许旋转(即关于水平和垂直方向上对称)。
  • 对于包含着图案(非填满整个矩形)的矩形进行碰撞检测,可能存在精度不足的问题。
  • 物体运动速度过快时,可能会在相邻两动画帧之间快速穿越,导致忽略了本应碰撞的事件发生。

适用案例:

  • (类)矩形物体间的碰撞。

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 标签。

圆形碰撞(Circle Collision)

概念:通过判断任意两个圆形的圆心距离是否小于两圆半径之和,若小于则为碰撞。

两点之间的距离由以下公式可得:
图片 21

判断两圆心距离是否小于两半径之和:

JavaScript

Math.sqrt(Math.pow(circleA.x - circleB.x, 2) + Math.pow(circleA.y - circleB.y, 2)) < circleA.radius + circleB.radius

1
2
3
Math.sqrt(Math.pow(circleA.x - circleB.x, 2) +
Math.pow(circleA.y - circleB.y, 2))
< circleA.radius + circleB.radius

图例:
图片 22

在线运行示例:

缺点:

  • 与『轴对称包围盒』类似

适用案例:

  • (类)圆形的物体,如各种球类碰撞。

SVG 基本形状

polyline:是SVG的一个基本形状,用来创建一系列直线连接多个点。

其实,polyline 是一个比较不常用的形状,比较常用的是pathrectcircle 等。这里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创建圆滑过渡角。

SVG 中定义了一些基本形状,在继续下文之前,建议点进去先了解一些基本图形的标签及写法:

图片 23

其他

SVG 线条动画

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

图片 24

上面,我们给两个 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 全都不认识? 图片 25

莫慌,其实很多和 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 制作很多不错的交互场景:

地图格子划分

概念:将地图(场景)划分为一个个格子。地图中参与检测的对象都存储着自身所在格子的坐标,那么你即可以认为两个物体在相邻格子时为碰撞,又或者两个物体在同一格才为碰撞。另外,采用此方式的前提是:地图中所有可能参与碰撞的物体都要是格子单元的大小或者是其整数倍。

蓝色X 为障碍物:
图片 26

实现方法:

JavaScript

// 通过特定标识指定(非)可行区域 map = [ [0, 0, 1, 1, 1, 0, 0, 0, 0], [0, 1, 1, 0, 0, 1, 0, 0, 0], [0, 1, 0, 0, 0, 0, 1, 0, 0], [0, 1, 0, 0, 0, 0, 1, 0, 0], [0, 1, 1, 1, 1, 1, 1, 0, 0] ], // 设定角色的初始位置 player = {left: 2, top: 2}   // 移动前(后)判断角色的下一步的动作(如不能前行) ...

1
2
3
4
5
6
7
8
9
10
11
12
13
// 通过特定标识指定(非)可行区域
map = [
[0, 0, 1, 1, 1, 0, 0, 0, 0],
[0, 1, 1, 0, 0, 1, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 0, 0]
],
// 设定角色的初始位置
player = {left: 2, top: 2}
 
// 移动前(后)判断角色的下一步的动作(如不能前行)
...

在线运行示例:

缺点:

  • 适用场景局限。

适用案例:

  • 推箱子、踩地雷等

SVG 线条动画实现按钮交互

图片 27

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

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:线条动画入门,玩转SVG线条动画

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。