一个例子上手

一个例子上手 SVG 动画

2017/05/05 · HTML5 ·
SVG

初稿出处:
坑坑洼洼实验室   

CSS3动画已丰盛强大,但是如故有局地它做不到的地点。合营SVG,让Web动作效果有越多的恐怕性。这一次要做的作用是二个loading动画(如图):个中旋转通过CSS来形成,不过旋转之后圆弧缩小变成笑脸的嘴巴供给依靠SVG来兑现。

图片 1

SVG:

资料1
资料2

图片 2

一个例子上手。动画片原理

Step1、声明SVG视口

XHTML

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

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

内定2个宽高都为100像素的区域,width=”100”和width=”100px”是等价的,当然也足以行使其余的官方单位,例如cm、mm、em等

读书器会设置叁个暗中同意的坐标种类,见图:左上角为原点,在那之中国水力电力对外集团平(x)坐标向右递增,垂直(y)坐标向下递增。

图片 3

在一向不点名的情况下,全体的的数值暗中同意单位都以像素。

用法:

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

IMG_2388.PNG

SVG动画,正是因素的属性值关于时间的变更。
如下图来说,成分的有个别属性值的发轫值(from)到停止值(to)在3个时辰段(duration)遵照时间函数(timing-function)总括出每一帧(frame)的插值(interpolation)作为变换的行事。

Step② 、绘制购物袋

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

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发轫,后边紧跟着几个参数,这八个参数分别用来表示:

  • 椭圆的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

图片 7

Step③ 、绘制眼睛

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

PS:SVG动画是帧动画,在SVG里也正是每秒设置有些个value值。

Step四 、绘制嘴巴

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

SVG动画语法

Step伍 、给嘴巴部分添加动作效果

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)语言的,全称是共同多媒体集成语言。

Step陆 、给眼睛添加动画

三只眼睛都以沿着圆弧运动 ,例如左眼,首先用三个途径来规定它的移动轨迹:

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动画使用

Step⑦ 、将差别地位的动画组成到共同

  • 肉眼的卡通是从嘴巴旋转完结起来,到嘴巴变形完毕结束,由此和嘴巴的卡通片一样,作者设置了三个照应的重中之重时间点。
  • 为了让衔接更顺畅,眼睛的动画片开首比嘴巴变形开始某个提前了一丢丢。

图片 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:只列出常用参数,别的请查阅参考文献。

例子:

相关文章