八个事例上手 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"本条字符串值,表示“Infiniti等待”。需求针对该动漫成分的超链接(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. 旋转之后缩小变形

在四个生生不息里,最终留有二成的小时保持叁个栖息。

图片 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调用的作用是每秒五15回逐帧动漫。

例子:

<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地图