SVG动画

by admin on 2019年12月4日

一个例子上手 SVG 动画

2017/05/05 · HTML5 ·
SVG

原文出处:
凹凸实验室   

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

图片 1

SVG:

资料1
资料2

图片 2

前面的话

  SVG动画非常强大,只需要设置HTML元素,不需要CSS和JS,就可以实现动画效果。本文将详细介绍SVG动画

 

动画原理

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)坐标向下递增。

图片 3

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

用法:

  • VectorDrawable: 创建基于XML的SVG图形
  • AnimatedVectorDrawable:”胶水”,实现动画
  • 语法什么的看资料。

IMG_2388.PNG

概述

  动画实际上就是值关于时间的一个函数。在这个函数中,包含起始值和结束值,经过的时间一般被称为持续时间。动画执行时的曲线就是动画函数。但是,在计算机中,不可能穷尽每一时刻的状态,而是取多个采样点,每个采样点就叫做帧。要让动画流畅显示,一般地需要每秒60帧

  在SVG中实现动画主要通过SMIL。SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范,在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点,并提供了一些SVG继承实现

  [注意]SVG动画除了IE浏览器不支持之外,兼容其他主流浏览器

 

SVG动画,就是元素的属性值关于时间的变化。
如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计算出每一帧(frame)的插值(interpolation)作为变换的行为。

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坐标

图片 4

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

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分别用来设置描边色和描边的宽度。

图片 5

创建vector SVG文件:
  • 通过下面xml文件,根据语法画: VectorDrawable
  • 网站SVG图片源码/Studio–> new–> vector
    Asset/ps,AI将图片转换成SVG

//res/drawable目录
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <group>
        <!-- 如果指定属性为 pathData,
             则要添加一个属性 android:strokeLineCap="pathType",来告诉系统进行pathData变换-->

        <path
            android:name="path1"
            android:pathData="
            M 20,20
            L 50,20 80,20"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path2"
            android:pathData="
            M 20,80
            L 50,80 80,80"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        //中间的线,自己加上去的。    
        <path
            android:name="path3"
            android:pathData="
            M 20,50
            L 45,50 M 55,50  80,50"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
    </group>
</vector>

一、动画原理

图片 6

IMG_2391.PNG

动画元素

  SVG动画元素共有4个,包括:<set>、<animate>、<animateTransform>、<animateMotion>

【<set>】

<set>可以实现基本的延迟功能。就是指:可以在特定时间之后修改某个属性值(也可以是CSS属性值)

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <set attributeName="x" attributeType="XML" to="60" begin="2s" />
    </text>
  </g>
</svg>

  2s后,文字会向右移动30px

【<animate>】

  <animate>是基础动画元素,用于实现单属性的动画过渡效果 

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate attributeName="x" to="60" begin="0s" dur="2s"  repeatCount="indefinite" />
    </text>
  </g>
</svg>

【<animateTransform>】

  <animateTransform>用于实现transform变换动画效果

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animateTransform attributeName="transform" type="scale" from="1" to="1.5" begin="0s" dur="2s"  repeatCount="indefinite" />
    </text>
  </g>
</svg>

【<animateMotion>】

  <animateMotion>可以让SVG各种图形沿着特定的path路径运动

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="0" x="0">
      火柴
      <animateMotion path="M 20 20 H 60 V 50 Z" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
    <path d="M 20 20 H 60 V 50 Z" fill="transparent" stroke="black"></path>
  </g>
</svg>

 

图片 7

Step3、绘制眼睛

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

使用基础形状,画两个个小圆点。四个属性分别是位置坐标、半径和填充颜色。
图片 8

创建animator:

// res/animtor目录
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20,20 L 50,20 80,20"
    android:valueTo="M 20,20 L 50,50 80,20"
    android:valueType="pathType"/>

二、SMIL for SVG

动画属性

【attributeName】

  attributeName表示要变化的元素属性名称

  ①
可以是元素直接暴露的属性,例如,对应的text元素上的xy或者font-size;

  ② 可以是CSS属性。例如,透明度opacity

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate attributeName="opacity" to="0" begin="0s" dur="1s"  repeatCount="indefinite" />
    </text>
  </g>
</svg>

【attributeType】

  attributeType支持三个固定参数:CSS、``XML、``auto,用来表明attributeName属性值的列表。x、``y以及transform属于XML;``opacity等CSS属于CSS;``auto为默认值,自动判别的意思(实际上是先当成CSS处理,如果发现不认识,直接XML类别处理)。因此,如果不确信某属性是XML类别还是CSS类别的时候,可以不设置attributeType值,直接让浏览器自己去判断

【from, to, by, values】

from  动画的起始值
to  指定动画的结束值
by 动画的相对变化值
values  用分号分隔的一个或多个值,可以看成是动画的多个关键值点

from、``to、``by、``values相互之间有制约关系:

  1、如果动画的起始值与元素的默认值是一样的,from参数可以省略

  2、如果不考虑values,``to、``by两个参数至少需要有一个出现。否则没有动画效果。to表示绝对值,by表示相对值。以位移距离为例子,如果from100to值为160,则表示移动到160这个位置;如果by值是160,则表示移动到100+160=260这个位置

  3、如果to、``by同时出现,则只识别to

  4、 values值设置并能识别时,from、``to、``by的值都会被忽略

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate attributeName="x" values="30;50;30;70;30" dur="2s"  repeatCount="indefinite" />
    </text>
  </g>
</svg>

【时间表示】

  SVG
animation中的时间表示,常见单位有 "h"、``"min"、``"s"、``"ms"。单位含义都是英文单位的缩写。例如h表示小时(hour)

  时间值支持小数写法,因此,90s也可以使用1.5min表示。时间值还支持hh:mm:ss这种写法,因此,90s也可以使用01:30表示

  如果begin="1.5"没有单位,这里的小数点表示秒,也就是1.5s的意思

【begin、end】

begin指动画开始的时间,begin的定义是分号分隔的一组值。

  例如,beigin="3s;6s"表示的是3s之后动画走一下,6s时候动画再走一下(如果之前动画没走完,会立即停止从头开始)

  所以,如果一次动画时间为3s,
dur="3s",同时没有repeatCount属性时候,可以看到动画似乎连续执行了2

begin的单值除了普通value,还有下面这些类别的value:

offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"

  ① offset-value表示偏移值,数值前面有+-,相对于document的begin值而言。

  ② syncbase-value基于同步确定的值。语法为:[元素的id].begin/end +/- 时间值。就是说借用其他元素的begin值进行加减运算,这个可以准确实现两个独立元素的动画级联效果

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate id="x" attributeName="x" to="70" dur="2" fill="freeze"/>
      <animate attributeName="y" begin="x.end" to="60" dur="2" fill="freeze"/>
    </text>
  </g>
</svg>

  ③ event-value表示与事件相关联的值。类似于PowerPoint动画的“点击执行该动画”。语法是:[元素的id].[事件类型] +/- 时间值

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <circle id="circle1" cx="15" cy="15" r="15"/>
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate id="x" attributeName="x" begin="circle1.click" to="70" dur="2"/>
    </text>
  </g>
</svg>

  点击小球,会触发文字的运动。如果想点击小球2秒后文字才支持,加上偏移时间就可以了——begin="circle1.click+2s"

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <circle id="circle1" cx="15" cy="15" r="15"/>
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate id="x" attributeName="x" begin="circle1.click" to="70" dur="2"/>
    </text>
  </g>
</svg>

  ④ repeat-value指重复N次之后再进行其他运动。语法为:[元素的id].repeat(整数) +/- 时间值

  [注意]经测试该属性并不生效

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate id="x" attributeName="x" to="70" dur="2"/>
      <animate attributeName="y" begin="x.repeat(2)" to="70" dur="2" fill="freeze"/>
    </text>
  </g>
</svg>

  ⑤accessKey-value定义快捷键。即按下某个按键动画开始。语法为:accessKey("character")。``character表示快捷键所在的字符

  [注意]经测试该属性并不生效

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate attributeName="y" begin="accessKey('s')" to="70" dur="2" />
    </text>
  </g>
</svg>

  ⑥ wallclock-sync-value指真实世界的时钟时间定义。时间语法是基于在ISO8601中定义的语法

  ⑦ "indefinite"这个字符串值,表示“无限等待”。需要指向该动画元素的超链接(SVG中的a元素)

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x" begin="indefinite" to="70" dur="1" repeatCount="indefinite"/>
    </text>
     <a xlink:href="#animate1">
          <text  y="30" fill="#cd0000" font-size="20">点击</text>
     </a>    
  </g>
</svg>

【dur】

dur属性值只有两种:常规时间值 | "indefinite"

  “常规时间值”就是3s之类的正常值;"indefinite"指动画不执行

【calcMode, keyTimes, keySplines】

  这几个参数是控制动画曲线的

calcMode属性支持4个值:discrete | linear | paced | spline.
中文意思分别是:“离散”|“线性”|“踏步”|“样条”

discrete from值直接跳到to值
linear animateMotion元素以外元素的calcMode默认值。动画从头到尾的速率都是一致的
paced 通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值,这样点之间“距离”的概念才能被计算(如position, width, height等)。如果”paced“指定,任何keyTimes或keySplines值都失效
spline 插值定义贝塞尔曲线。spline点的定义在keyTimes属性中,每个时间间隔控制点由keySplines定义

keyTimes = “<list>”

  跟上面提到的<list>类似,都是分号分隔一组值。keyTimes是关键时间点的意思,这里有一些约定的规则:首先,keyTimes值的数目要和values一致,如果是from/to/by动画,keyTimes就必须有两个值。然后对于linearspline动画,第一个数字要是0,
最后一个是1。 最后,每个连续的时间值必须比它前面的值大或者相等

paced模式下,keyTimes会被忽略;keyTimes定义错误,也会被忽略;durindefinite也会被忽略

keySplines = “<list>”

keySplines表示的是与keyTimes相关联的一组贝塞尔控制点(默认0 0 1 1)。每个控制点使用4个浮点值表示:x1 y1 x2 y2.
只有模式是spline时候这个参数才有用,也是分号分隔,值范围0~1,总是比keyTimes少一个值。

  如果keySplines值不合法或个数不对,是没有动画效果的

  下面是离散值discrete的例子

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x"  dur="3" values="40;60;80;100" calcMode="discrete" repeatCount="indefinite"/>
    </text>
  </g>
</svg>

  下面是踏步值paces的例子 

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x"  dur="3" values="40;60;80;100" calcMode="paced" repeatCount="indefinite"/>
    </text>
  </g>
</svg>

  下面是贝塞尔曲线spline的例子

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x"  dur="3" values="40;60;100" keyTimes="0; .8; 1" calcMode="spline"  keySplines=".5 0 .5 1; 0 0 1 1" repeatCount="indefinite"/>
    </text>
  </g>
</svg>

【repeatCount, repeatDur】 

repeatCount表示动画执行次数,可以是合法数值或者”indefinite"

repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite"

<animate attributeName="x" to="60" dur="3s" repeatCount="indefinite" repeatDur="10s" /

  上面的代码中,动画只执行完整3个 + 一个1/3个动画。因为repeat总时间是10s

【fill】

fill表示动画间隙的填充方式。支持参数有:freeze | remove。其中remove是默认值,表示动画结束直接回到开始的地方。freeze“冻结”表示动画结束后像是被冻住了,元素保持了动画结束之后的状态

【accumulate, additive】

accumulate是累积的意思。支持参数有:none | sum。默认值是none,如果值是sum表示动画结束时候的位置作为下次动画的起始位置

additive控制动画是否附加。支持参数有:replace | sum。默认值是replace.,如果值是sum表示动画会附加到其他低优先级的动画上

【restart】

restart支持的参数有:always | whenNotActive | never.

always是默认值,表示总是。whenNotActive表示动画正在进行的时候,是不能重启动画的。never表示动画是一波流

【min、max】

min/max表示动画执行最短和最长时间。支持参数为时间值和"media"(媒介元素有效), max还支持indefinite

 

PS:SVG动画是帧动画,在SVG里也就是每秒设置多少个value值。

Step4、绘制嘴巴

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一起用来实现动效。

图片 9

创建 animated-vector文件:

  • “胶水” 把 VectorDrawable 和 objectAnimator 连起来。

//  res/drawable目录
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    //引入vector
    android:drawable="@drawable/svg_lines">
    <target
        //此处的name必须和vector中的name一致,才能知道动画要作用到哪个path
        android:name="path1"
        //动画
        android:animation="@animator/obj_svg_path_1">
    </target>
    <target
        android:name="path2"
        android:animation="@animator/obj_svg_path_2">
    </target>
</animated-vector>

SMIL已嵌入到浏览器引擎,可以直接使用<animate>…标签来做动画

图片 10

IMG_2392.PNG

API

  SVG animation有内置的API可以暂停和启动动画的。语法为:

// 暂停
svg.pauseAnimations();

// 恢复
svg.unpauseAnimations()

<svg height="70" xmlns="http://www.w3.org/2000/svg" id="svg">
  <g id="test"> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x"  dur="2" to="80" repeatCount="indefinite" />     
    </text>
  </g>
</svg>
<script>
svg.onclick = function(){
  if(!this.paused){
    this.paused = true;
    this.pauseAnimations();
  }else{
    this.paused = false;
    this.unpauseAnimations();
  }
} 
</script>

  点击文字可暂停或恢复

 

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. 旋转之后缩短变形

在一个循环里,最后留有30%的时间保持一个停留。

图片 11

开始动画:

// xml中设置backgroud,代码中用getBackground();
// xml中设置src属性,代码中用getDrawable();
// Animatable animDrawable = (Animatable)ivSvgTarget.getBackground();
Animatable animDrawable = (Animatable) ivSvgTarget.getDrawable();
if (!animDrawable.isRunning()) {
    animDrawable.start();
    }

定位动画目标

图片 12

IMG_2397.PNG

SVG动画是基于SMIL(Synchronized Multimedia Integration
Language)语言的,全称是同步多媒体集成语言。

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

图片 13

2.1 基本动画

图片 14

IMG_2398.PNG

图片 15

IMG_2400.PNG

图片 16

IMG_2401.PNG

图片 17

IMG_2403.PNG

图片 18

IMG_2404.PNG

图片 19

IMG_2405.PNG

SVG动画使用

Step7、将不同部位的动画组合到一起

  • 眼睛的动画是从嘴巴旋转完成开始,到嘴巴变形完成结束,因此和嘴巴的动画一样,我设置了四个对应的关键时间点。
  • 为了让衔接更顺畅,眼睛的动画开始比嘴巴变形开始稍微提前了一点点。

图片 20

参考:

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

    1 赞 2 收藏
    评论

图片 21

2.2 变换动画

图片 22

IMG_2406.PNG

图片 23

IMG_2407.PNG

图片 24

IMG_2409.PNG

SVG元素使用动画有两种方式:

2.3 轨迹移动动画

图片 25

IMG_2455.PNG

图片 26

IMG_2458.PNG

图片 27

IMG_2459.PNG

图片 28

IMG_2460.PNG

图片 29

IMG_2461.PNG

  1. 被xlink:href引用

    

  2. 包含在目标元素里

      <animate></animate>
    

三、脚本动画

图片 30

IMG_2462.PNG

图片 31

IMG_2463.PNG

图片 32

IMG_2464.PNG

图片 33

IMG_2465.PNG

图片 34

IMG_2466.PNG

图片 35

IMG_2467.PNG

图片 36

IMG_2468.PNG

图片 37

IMG_2469.PNG

图片 38

IMG_2470.PNG

图片 39

IMG_2471.PNG

图片 40

IMG_2473.PNG

图片 41

IMG_2476.PNG

图片 42

IMG_2479.PNG

图片 43

IMG_2480.PNG

图片 44

IMG_2481.PNG

图片 45

IMG_2482.PNG

图片 46

IMG_2483.PNG

图片 47

IMG_2484.PNG

<animate>标签

该标签用于基本动画。

参数 描述
attributeName 要变化属性名称
1.可以是元素直接暴露的属性
2.可以是CSS属性
attributeType  用来表明attributeName属性值的类型
支持三个固定参数,CSS/XML/auto,默认值auto。
例如:x、 y以及transform就属于XML, opacity就属于CSS。
from 起始值
起始值与元素的默认值是一样的,该参数可省略。
to 结束值
by 相对from的变化值
PS:当有to值时,该值无效。
values 动画的多个关键值,用分号分隔。
dur 持续时间
取值:常规时间值 | "indefinite"
repeatCount 动画执行次数
取值:合法数值或者“indefinite”
fill 动画间隙的填充方式
取值:freeze | remove(默认值)。
remove:表示动画结束直接回到开始的地方。
freeze:表示动画结束后保持了动画结束之后的状态。
calcMode 控制动画的快慢
取值:discrete | linear(默认值) | paced | spline.
中文意思分别是:“离散”|“线性”|“踏步”|“样条”。
另外,该参数要结合keyTimes、keySplines使用,数值的是对应values的,
所以如果没有设置values和keyTime或keySplines,是没有效果的。
begin 动画开始的时机,取值:
time-value | offset-value | syncbase-value | event-value | repeat-value |
accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"
1. time-value:动画开始时间,可传多个值,分号分隔。
2. syncbase-value:[元素的id].begin/end +/- 时间值(offset-value)
    某个动画效果开始或结束触发此动画的,可加上偏移量。
3. event-value:事件触发
4. repeat-value:指某animation重复多少次开始。
    语法为:[元素的id].repeat(整数) +/- 时间值
end end与begin除了名字和字面含义不一样,其值的种类与表意都是一模一样的。

PS:只列出常用参数,其他请查阅参考文献。

例子:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <rect x="50" y ="50" width="100" height="50" fill="red">
          <animate attributeType="XML"
               attributeName="x"
               from="50"
               to="400"
               dur="5s"
               fill="freeze">
          </animate>
     </rect>
     <rect x="50" y ="150" width="100" height="50" fill="green">
          <animate attributeType="XML"
               attributeName="x"
               from="50"
               by="400"
               dur="5s"
               fill="freeze">
          </animate>
     </rect>
     <rect x="50" y ="250" width="100" height="50" fill="blue">
          <animate attributeType="XML"
               attributeName="x"
               values="50;450;50"
               dur="10s"
               >
          </animate>
     </rect>
     <rect x="50" y ="350" width="100" height="50" fill="orange">
          <animate attributeType="XML"
               attributeName="x"
               dur="10s"
               values="50;450;50"
               calcMode="spline"
               keySplines=".5 0 .5 1; 0 0 1 1"
               fill="freeze"
               >
          </animate>
     </rect>
     <rect x="50" y ="450" width="100" height="50" fill="black">
          <animate attributeType="XML"
               attributeName="x"
               from="50"
               by="400"
               dur="5s"
               calcMode="spline"
               keySplines=".5 0 .5 1; 0 0 1 1"
               fill="freeze"
               >
          </animate>
     </rect>
</svg>

效果:

图片 48

begin例子:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="50" y="30" id="t" stroke="red">click red go</text>
     <rect x="50" y ="50" width="100" height="50" fill="red">
          <animate attributeType="XML"
               attributeName="x"
               begin="t.click"
               from="50"
               to="400"
               dur="5s"
               fill="freeze">
          </animate>
     </rect>
     <rect x="50" y ="150" width="100" height="50" fill="green">
          <!--表示的是3s之后动画开始,10s时候动画再开始一次
               (如果之前动画没走完,会立即停止从头开始)-->
          <animate attributeType="XML"
               attributeName="x"
               begin="3s;10s"
               from="50"
               to="400"
               dur="5s"
               fill="freeze">
          </animate>
     </rect>
     <rect x="50" y ="250" width="100" height="50" fill="blue">
          <animate id="goleft" attributeType="XML"
               attributeName="x"
               from="50"
               to="400"
               dur="5s"
               fill="freeze"
               >
          </animate>
          <!--注意begin的id是animate的id,不是元素的-->
          <animate attributeType="XML"
               attributeName="y"
               begin="goleft.end"
               to="350"
               dur="2s"
               fill="freeze"
               >
          </animate>
     </rect>
     <rect x="50" y ="350" width="100" height="50" fill="orange">
          <animate id="goleft" attributeType="XML"
               attributeName="x"
               from="50"
               to="400"
               dur="5s"
               fill="freeze"
               >
          </animate>
          <!--注意begin的id是animate的id,不是元素的-->
          <animate attributeType="XML"
               attributeName="y"
               to="400"
               dur="5s"
               fill="freeze"
               >
          </animate>
     </rect>
     <line stroke='black' x1="50" y1="350" x2="500" y2="350"/>
     <line stroke='black' x1="50" y1="400" x2="500" y2="400"//>
</svg>

效果:

图片 49

注意:

  1. 多个animate是可以叠加的。

<animateTransform>标签

该标签用于变换动画,animateTransform也有animate的参数,额外的是type。

参数 描述
type 变换的类型,取值:translate、scale、rotate、skewX、skewY

例子:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 800 800">
     <rect x="50" y ="50" width="50" height="50" fill="red">
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="rotate"
               from="0 75 75"
               to="360 75 75"
               dur="2"
               repeatCount="indefinite"/>
     </rect>
     <!--x、y都放大了-->
     <rect x="50" y ="150" width="50" height="50" fill="green">
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="scale"
               from="1"
               to="2"
               dur="2"
               fill="freeze"/>
     </rect>     
     <rect x="50" y ="250" width="50" height="50" fill="blue">
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="translate"
               to="250 0"
               dur="2"
               fill="freeze"/>
     </rect>
     <rect x="50" y ="150" width="50" height="50" fill="black">
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="rotate"
               from="0 75 125"
               to="360 75 125"
               dur="2"
               repeatCount="indefinite" additive="sum"/>
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="scale"
               from="1"
               to="2"
               dur="2"
               fill="freeze" additive="sum"/>
     </rect>
</svg>

效果:

图片 50

注意:

1. animateTransform也是可以叠加的,不过要加上additive=”sum”,否则后面的无效了。

<animateMotion>标签

这个标签让元素在路径(Path)上滑动。

例子:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <path d="M100,400Q150,300 250,400 T400,400" stroke="red" fill="none"/>
     <rect width="20" height="20" fill="red">
          <animateMotion
               path="M100,400Q150,300 250,400 T400,400"
               rotate="auto"
               dur="3s"
               fill="freeze">
          </animateMotion>
     </rect>
</svg>

效果:

图片 51

注意:

  1. 设置rotate=”auto”,可以让元素根据路径的切线方向做旋转。

脚本动画

SVG的requestAnimationFrame函数可以让我们用js来做动画,浏览器对requestAnimationFrame调用的频率是每秒60次逐帧动画。

例子:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <rect id="rect" x="50" y="50" width="100" height="100" fill="green" />
</svg>
<script>
    var cur = 0;
    var rect=document.getElementById("rect");
    var frames = window.requestAnimationFrame(doAnim);
    function doAnim(){
        if(cur>=360){
            //取消帧动画
            window.cancelAnimationFrame(frames);
            return;
        }
        cur++;
        rect.setAttribute("transform", "rotate(" + cur + ",100, 100)");
        frames = window.requestAnimationFrame(doAnim);
    }
</script>

PS:效果就是正方形旋转360°后停止。

 

参考视频

1. SVG课程(慕课网)

 

参考文献

1. 

2. 

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :

发表评论

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

网站地图xml地图