SVG 动画精髓(上)

本文作者:ivweb villainthr

TL;DR

本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。

例如:路径动画

图形渐变:

线条动画:

以及,相关的动画的矩阵知识,这个也是现在 CSS 动画里面最重要,同时也是最为欠缺的知识点:

文章会先从基本语法入手,然后,慢慢深入。介绍一些动画基本原理和对应的数学原理知识点。并且文章后面,还附有相关语法的介绍,当你在遇到不熟悉语法的时候可以参考参考。

前面一篇文章,主要介绍了一些 SVG 的基本概念和基本图形。接下来我们需要了解一下,SVG 处理矢量这个特性之外,还有啥内容吸引我们,能让 SVG 现在普及度这么高?

完整版可以关于我的公众号:前端小吉米。

分享吉米的前端路,后面也会定期推出当前热门的前端技术~ 比如,直播,VR

SVG Animation

在 SVG 中,如果我们想实现一个动画效果,可以使用 CSS,JS,或者直接使用 SVG 中自带的 animate元素添加动画。

使用 CSS 的话,有两种选择一种是通过style直接内联在里面,另外是直接使用相关的动画属性-- transform

 <use id="star" class="starStyle" xlink:href="#starDef"
       transform="translate(100, 100)"
       style="fill: #008000; stroke: #008000"/>

而使用 SVG 中自定的 animate 主要还是 SVG 自己的东西,比较好用。如果想用 CSS 的动画,这都无所谓。

先看一个 SVG animate DEMO:

 <rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
  <animate
    attributeName="width"
    attributeType="XML"
    from="200" to="20"
    begin="0s" dur="5s"
    fill="freeze" />
</rect>

通过将 animate 标签嵌套在指定的图形里面,即可实现变换的效果。另外,还有 animateTransform,它主要是用来做变形动画的。

 <rect x="-10" y="-10" width="20" height="20"
    style="fill: #ff9; stroke: black;">
    <animateTransform attributeType="XML"
      attributeName="transform" type="scale"
      from="1" to="4 2"
      begin="0s" dur="4s" fill="freeze"/>
</rect>

简单来说:

  • animate: 相当于 CSS 中的 transition
  • animateTransform: 相当于 CSS 中的 transform

里面一些技术细节我们这里就不过多讲解了。这里,主要想介绍一下 animate 中的 morph 的效果。

animate morph

该效果主要做的就是图形内部的渐变。如图:

这种动画是怎么实现呢?

直接看代码吧:

 <path fill="#1EB287">
    <animate 
             attributeName="d" 
             dur="1440ms" 
             repeatCount="indefinite"
             keyTimes="0;
                       .0625;
                       .208333333;
                       .3125;
                       .395833333;
                       .645833333;
                       .833333333;
                       1"
             calcMode="spline" 
             keySplines="0,0,1,1;
                         .42,0,.58,1;
                         .42,0,1,1;
                         0,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1"
             values="M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 50,0 
                     C 75,25 75,25 100,50 
                     75,75 75,75 50,100
                     25,75 25,75 0,50
                     25,25 25,25 50,0
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;

                     M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;

                     M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;

                     M 100,0 
                     C 100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     50,0 50,0 100,0
                     Z;"/>
  </path>

这么多,是不是感觉有点懵逼。不过,我们细分来看一下其实很简单。里面主要是利用animate 中的 keyTimescalcModekeySplines,以及 values 这几个属性。不急,我们一个一个来解释一下。

  • keyTimes: 这其实和 CSS 中定义的 @keyframes 一样。通过 0-1 之间的值,定义每段动画完成的时间。格式为:value;value...。例如 0;.0625;.208333333;.3125;.395833333;.645833333;.833333333;1。从第一个动画,到第二个动画经历的时间比例为 6.25%。并且,keyTimes 需要和 values 里面定义的帧数一致。
  • calcMode: 用来定义动画具体的插值模型。取值有: discrete | linear[default] | paced | spline。具体可以参考 MDN。这里我们主要介绍一下 spline。该值表示每个动画间使用自定的贝塞尔变换曲线。如果没有特殊要求,使用 linear 其实已经足够了,这样就不用麻烦去定义下面的keySplines 属性。
  • keySplines:该值用来具体定义动画执行时的 贝塞尔曲线。使用格式是通过;来分隔每一个值。即,cubic-bezier(.31,.57,.93,.46)为一组。使用 keySplines 表达,则为:keySplines = ".31,.57,.93,.46;"。当然,里面的贝塞尔曲线组数为 整个动画帧数 - 1

而 values 就很简单了。它是直接结合attributeName 属性,来设置具体的值,每个值之间使用;进行分隔。

像上面那样,可以在指定元素里面嵌套多个 animate,既实现了形状的改变,又实现了颜色的改变。Morph 比较常用于数字的更迭,比如,倒数 10s 的相关动画。到这里,Morpah 相关的知识点就结束了。

接着,让我们来看一下 SVG 中,另外一非常重要的标签 -- animateMotion

该标签可以让指定的元素,绕着指定的路径进行运动。所以这对于复杂的路径来说非常有用,因为我们很难使用 transform 去模拟复杂的变换路径。看一个 DEMO

animateMotion

animateMotion 大致的属性和 animate差不多,不过,它还拥有自己特有的属性,比如 keyPointsrotatepath 等。不过,calcMode 在 AM(animateMotion) 中的默认属性由,linear 变为 paced

这些属性,我们慢慢介绍,先从最简单的开始吧。首先,我们来看一个 DEMO:

<g>
  <rect x="0" y="0" width="30" height="30" style="fill: #ccc;"/>
  <circle cx="30" cy="30" r="15" style="fill: #cfc; stroke: green;"/>
  <animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/>
</g>
  • from,to:指定两点的位置,位置参数是以元素的坐标为原点的。
  • dur:执行渲染时间
  • fill:指定动画结束后停留的装填。有freezeremove 效果。remove 表示回到动画开始的位置,freeze 表示停留在动画结束的位置。

如果,你想要更复杂的路径,可以直接使用path 属性来指定路径。用法和 path标签中d 属性是一样的。

<rect x="0" y="0" width="30" height="30" style="fill: #ccc;">
    <animateMotion
    path="M50,125 C 100,25 150,225, 200, 125"
    dur="6s" fill="freeze"/>
</rect>

或者使用mpath 标签,引用外部的 path

<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
      stroke="lightgrey" stroke-width="2" 
      fill="none" id="theMotionPath"/>
  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
  <circle cx="110" cy="10" r="3" fill="lightgrey"  />

  <!-- Red circle which will be moved along the motion path. -->
  <circle cx="" cy="" r="5" fill="red">

    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite">
      <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
  </circle>

动画效果为:

所以,一般而言我们在定义 AM 的路径的时候,只用一种方式定义即可,否则会发生相应的覆盖:mpath>path>values>from/to

在 AM 运动中,还有一个很重要的概念就是旋转角。默认情况下,运动物体的角度是按照它和坐标轴的初始角度确定的。例如:

这样看起来确实有些别扭,那能不能让物体垂直于路径进行运动呢?

有的,根据rotate 属性值,一共有 3 个值可供选择。

  • auto:让物体垂直于路径的切线方向运动。不过,如果你的路径是闭合曲线的话,需要注意起始点的位置。

例如:

  • auto-reverse:让物体垂直于路径的切线方向并 + 180°。也就是和 auto 运动关于切线对称。
  • Number:让物体以固定的旋转角度运动。这个就相当于使用 transform:rotate(deg) 进行控制。

在动画设置标签中,还有一个更简单的--set

set

该标签也是用来模拟transition 效果的。它和 animate的主要区别是,它仅仅需要 to 的指定属性,而不需要其他的参考属性,比如fromby 等。那它有啥特别的存在意义吗?

有的,因为 set 针对于所有属性,甚至包括 style 里面的相关 CSS 属性。所以,可以靠它来很好描述一些非 number 的属性值。

 <text text-anchor="middle" x="60" y="60" style="visibility: hidden;">
  <set attributeName="visibility" attributeType="CSS"
    to="visible" begin="4.5s" dur="1s" fill="freeze"/>
  All gone!
</text>

矩阵动画

上面差不多简单阐述了关于 SVG 一些比较有特点的动画。当然,还有比较重要的线条动画,这个我们放到后面进行讲解。这里先来看一下所有动画中,非常重要的矩阵原理。线性代数应该是大学里面来说,最容易学的一门科目,MD。。。还记得,大学线代期末考试的时候,100 分的同学应该说是如韭菜地般,一抓一大片(对不起,我没能和他们同流合污。)

那矩阵是如何在动画中使用的呢?

简单的说,矩阵中的每个元素其实可以等价代换为每个因式里面的系数:

上面也叫作 三维矩阵。即,它涉及到 x,y,z 轴的计算。那对于我们平面 2D 变换来说,那么此时矩阵又是哪种形式呢?

很简单,只要将 z 轴永远置为一个常数就 OK。这里,惯例上是直接取 0 0 1 来设置。

不信的话,大家只要代进去乘以乘,应该就可以得到结果了。所以,在二维中,具体变换方式为:

后面,我们也会依据这个公式进行相关的变形操作。那矩阵变换是怎么运用到 CSS/SVG 当中呢?

在 CSS 中,是直接使用 transform 中的属性: transform: matrix(a,b,c,d,e,f);

当然,在 SVG 中也是一样的:

<g transform="matrix(1,2,3,4,5,6)">
    <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/>
  </g>

所以,我们主要的重点就是讲解一下matrix这个属性。它的格式为: matrix(a,b,c,d,e,f);

对应于我们上面的公式有:

在接触transform的时候,大家应该了解到 transform里面有很多固定的动画属性:

  • translate()
  • rotate()
  • scale()
  • skew()

实际上,在底层还是使用 matrix 实现的变换。就拿 translate 举个例子吧。

translate 的格式为: translate(dx,dy)

相当于参考当前原点,在 x/y 轴上移动 dx/dy 的距离。那么映射到矩阵,应该如何表示呢?

很简单,它等同于: matrix(1 0 0 1 dx dy);

使用代数证明一下:

假设有matrix(1 0 0 1 20 30)

变为矩阵为:

根据,上面的表达式有:

 X = x'*1 + y'*0 + 20 = x' + 20
Y = x'*0 + y'*0 + 30 = y' + 30

所以,就是 X 在原有 X 轴坐标上向右移动 20 的距离,Y 相对于原有移动 30 的距离。

那么其他几个属性呢?也是怎么变化的吗?

恩,类似。只是里面取值不一样:

  • scale(x,y): 放大 X/Y 轴,矩阵的表达为 matrix(x 0 0 y 0 0)。
  • rotate(θ): 坐标旋转,矩阵的表达为 matrix(cosθ sinθ -sinθ cosθ 0 0)。
  • skew(θx,θy): X/Y 轴拉伸,矩阵的表达为 matrix(1 tanθx tanθy 1 0 0)。

注意,上面三个都会改变原有物体的坐标系!!! 这点很重要,换句话说,后面每次变换都是基于前面一个的变换结果的。

详情看图:

详情可以参考:MDN matrix

不过,这并不是我们使用 matrix 的重点,也不是它的优势。它的优势在于可计算,即,能够将复杂的动画集合到一个表达式中,并且,后续的变换可以直接基于当前的 matrix。

我们先来了解一下,如果多个变换动画一起使用,matrix 应该如何表达呢?

只需要找到我们变换动画对应的矩阵,然后相乘即可。例如,先旋转 45°,然后放大 1.5 倍,则有变换动画为: transform: rotate(45deg) scale(1.5,1.5);

注意,虽然,你定义动画是分开的,但此时的动画是同时进行的。为啥?因为,这两个动画实际上可以整合成为一个变换矩阵:

并且,位置是不可以调换的。比如,transform: scale(2,2) translate(20px,30px)。即,你先放大两倍,然后移动 20,30 的距离。注意,这里移动的 20,30 相对的是已经放大过后的坐标,相对于原坐标而言就是 40,60 了。 如果,你调换位置,即transform: translate(20px,30px) scale(2,2)。就变成现在原坐标移动 20,30,然后再放大两倍。

而上面强调的顺序关系,实际上就可以理解为矩阵不满足交换律的原则。因为一旦交换,结果很可能不一样。

矩阵高级用法

上面的内容只是简单的描述了关于矩阵的概念。在实际中,矩阵可以说是真正利器。

假设现在有一个动画,要求你将一个物体从一个点通过抛物线的方式移动到另外一个点,那么此时要求 JS/CSS 随你挑。此时,你会不会感觉,呼吸急促,头脑发热呢?

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习原理

pytorch基础笔记pytorch的windoows下安装pytorch的使用Dynamic Computation Graph用pytorch实现线性回归

1585
来自专栏腾讯社交用户体验设计

带你轻松打开svg滤镜的大门

803
来自专栏HTML5学堂

CSS3渐变,就是这么玩

HTML5学堂(码匠):渐变背景是一直在页面中常见的元素之一,但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦,需要设计...

3075
来自专栏WOLFRAM

Mathematica 11.2 中文版现已发布!

1133
来自专栏ATYUN订阅号

如何用自己的数据训练MASK R-CNN模型

计算机一直很擅长数字处理,却苦于分析图像中的大量数据。直到最近,创建图形处理单元库已不仅仅用于游戏,现在我们可以利用数千个核心的原始力量来揭示图片背后的含义。

1386
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

4 高等数学中若干简单数值计算算例

高等数学贯穿了很多理工科的专业课,例如《工程热力学》气体做功的积分计算、《工程流体力学》光滑管道内流动速度分布(泊萧叶方程,Poiseuille,1840)的推...

730
来自专栏PPV课数据科学社区

R数据可视化之ggplot2 (一)

学完R语言的基本操作后,我们还可以继续学习R的几大著名而且使用强大的包,今天讲其中的一个,就是ggplot2,至于这个包的评价和地位,我就不多说了,感兴趣可以百...

29512
来自专栏闪电gogogo的专栏

Matplotlib

942
来自专栏数据小魔方

R语言可视化——箱线图及其美化技巧

今天跟大家分享如何在R语言中利用ggplot函数制作箱线图及其美化。 箱线图也是经常会用到的用于呈现数据分布形态的重要的图表类型。 还是以ggplot2包内置的...

2916
来自专栏ATYUN订阅号

TensorFlow:使用Cloud TPU在30分钟内训练出实时移动对象检测器

是否能够更快地训练和提供对象检测模型?我们已经听到了这种的反馈,在今天我们很高兴地宣布支持训练Cloud TPU上的对象检测模型,模型量化以及并添加了包括Ret...

1195

扫码关注云+社区