【必发88】编制程序实战,弹动作效果果

by admin on 2019年4月4日

运用 Snap.svg 制作动画

2017/02/22 · HTML5 ·
SVG

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

必发88 1

前端必备神器 Snap.svg 弹动作效果果,前端snap.svg

有人说不会 SVG 的前端开发者不叫开发者,而叫爱好者。前端不光是 Angularjs
了,那时候再不学 SVG 就晚了!(如果您只会 jQuery
就当本身没说。。。)那里本人就给大家大饱眼福四个今天在别处看到的贰个伟人上的
SVG 效果,左侧菜单弹出来会动动弹的说,链接点那里。

及时自身就震惊了,今天忙里偷闲搞清了源码,然后上边是本身潜研后做出来的
德姆o,固然比较粗糙,但照旧很前卫的痛感吗。上边笔者就那几个 DEMO
跟大家分享一下。

此案例供给有个别 PS 或然 AI
中路径的学问,上面是本例中运涉及到的知识点和工具:

snap.svg
svg path data
Adobe Illustrator
animation timing

先付给原理:依据时间转移坐标。如下图所示,本例其实就是 A、B、C
3条线之间的变换,A 是开始状态,点击后通过 B 最终形成
C。当中有四回动画,分别是 A-B 和 B-C,而这一遍动画的 timing function
和时间都以不相同的。

必发88 2

第一步:画草稿

做动画前率先步正是画草稿(如上海教室),小编一般用 AI 来画,因为 AI
能够规范的主宰成分尺寸和地点,而且其原理和 SVG 是同等的。

下一场有的同学就会说,“老湿,是还是不是要保留为 SVG 格式的,然后做修改啊?”

画草稿图的指标只是为了便于的规定各类点的坐标,本身算太费事了,而且还简单失误。除此之外AI 没有别的功能。AI 生成的 SVG
文件在此例中根本不可能拿来用,因为里面的路劲点太混乱了,下边会详说。

哪些?你不会用 AI ?

假诺你还想在前端那条路上走下来的话,那今后就去学吧。(在此地本人想吐槽一下,PS
是用来处理点阵图片的,根本不符合拿来做安顿图。相比较之下 AI
才是做那个的,google 给出的 metrial design 布局模板全都以 AI
格式的。但国内不管是怎么着公司,用 PS 都接近很安心乐意的金科玉律,不知情干什么。)

其次步:计算路径

这一步就相比较复杂了,上边说过了,这几个动画其实就是坐标之间变换。而从肆边形到圆弧之间的更换不光是坐标位移而已,还有曲线弧度的变换。上边的宏图图直接保存为
SVG 后代码如下:

复制代码 代码如下:

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG
Version: 6.00 Build 0)  –>
<svg version=”1.1″ id=”图层_1″ xmlns=””
xmlns:xlink=”” x=”0px” y=”0px”
     viewBox=”0 0 175 175″ enable-background=”new 0 0 175 175″
xml:space=”preserve”>
<!– 路径 A –>
<path fill=”none” stroke=”#BF3A41″ stroke-miterlimit=”10″ d=”
    M12.5,12.5
    h75
    h75
    v75
    v75
    h-75
    h-75
    v-35
    V12.5z”/>
<!– 路径 B –>
<path fill=”none” stroke=”#0000FF” stroke-miterlimit=”10″ d=”
    M37.5,37.5
    c0,0,10-25,50-25
    s50,25,50,25
    s25,10,25,50
    s-25,50-25,50
    s-10,25-50,25
    s-50-25-50-25
    s-25.1-10-25.1-50
    S37.5,37.5,37.5,37.5z”/>
【必发88】编制程序实战,弹动作效果果。<!– 路径 C –>
<path fill=”none” stroke=”#000000″ stroke-miterlimit=”10″ d=”
    M37.5,37.5
    h50
    h50
    v50
    v50
    h-50
    h-50
    v-50
    V37.5z”/>
</svg>

大家只须要关心路径的 d 属性就行了,能够看到,AB
四个途径之间或然可以互相转换的,但她俩和 C
路径(有弧线的途径)之间就无法更换了。他们所用到的绘图命令都不一致,AB
五个都以矩形,绘图时用到的都是h、v,也便是横纵之间的移动,画出来的都是横竖线。而 C 路劲用到的皆以s、c那一个命令,画出来的都以曲线。所以 AI 给出去的图大家不可能用,要自身遵照svg path data 重新绘制三次。

上边小编参考 AI 设计图再一次绘制的3条路线:

复制代码 代码如下:

<!– 路径 A –>
<path d=”
    M37.5,37.5
    S87.5,37.5,87.5,37.5
    S137.5,37.5,137.5,37.5
    S137.5,87.5,137.5,87.5
    S137.5,137.5,137.5,137.5
    S87.5,137.5,87.5,137.5
    S37.5,137.5,37.5,137.5
    S37.5,87.5,37.5,87.5
    S37.5,37.5,37.5,37.5z”>
<!– 路径 B –>
<path d=”
    M 37.5,37.5
    S47.5,12.5,87.5,12.5
    S127.5,25,137.5,37.5
    S162.5,47.5,162.5,87.5
    S150,127.5,137.5,137.5
    S127.5,162.5,87.5,162.5
    S47.5,150,37.5,137.5
    S12.5,127.5,12.5,87.5
    S25,47.5,37.5,37.5z”>
<!– 路径 C –>
<path d=”
    M12.5,12.5
    S87.5,12.5,87.5,12.5
    S162.5,12.5,162.5,12.5
    S162.5,87.5,162.5,87.5
    S162.5,162.5,162.5,162.5
    S87.5,162.5,87.5,162.5
    S12.5,162.5,12.5,162.5
    S12.5,127.5,12.5,127.5
    S12.5,12.5,12.5,12.5z”>

有过设计基础的同室应该清楚下边代码的意义,正是将拥有锚点转换到平滑,然后再更改手柄的职责。形状没变,纵然代码多了比比皆是,可是把绘制命令都变成了
S ,那样3条路线就唯有数值之间的不等了。而动画片的历程就是数值之间的更换。

第三步:Timing

这一步正是设定动画的时间点和 timing function 。时间点相比较好说,A-B 和
B-C 小编设置的个别是300微秒和400皮秒。

timing function 便是我们在做 CSS 动画中利用到的
animation-timing-function 属性,相比普遍的有
ease、linear、easein,大家也能够用贝塞尔曲线本身定制。不过CSS的 timing
function 比较简单,只好定义一条均匀的曲线,A-B 转换用到的 ease-out,可是B-C 为了展现弹动的法力,所用到的 timing-function
就不是一条均匀曲线这么不难了。

必发88 3

上边列出了某个比较常用的 timing-function ,在那之中山大学约分为
ease、bounce、elastic 三类。ease
1般作为减速也许加速动作效果。bounce就像是他的曲线图1样,1般作为小球落地那种动作效果。而
elastic
壹般用在如琴弦一样的动作效果上,那种动作效果3个性情便是有1部分偏移到负坐标上了,而
B-C 用到的正是其1,如下图。

必发88 4

基于地点已经画出来的门路,结合动画,代码就出来了:

复制代码 代码如下:

var svg=Snap(“#svg”);
var pathes=[
   
“M37.5,37.5S87.5,37.5,87.5,37.5S137.5,37.5,137.5,37.5S137.5,87.5,137.5,87.5
S137.5,137.5,137.5,137.5S87.5,137.5,87.5,137.5S37.5,137.5,37.5,137.5S37.5,87.5,37.5,87.5S37.5,37.5,37.5,37.5z”,
    “M 37.5,37.5 S47.5,12.5,87.5,12.5 S127.5,25,137.5,37.5
S162.5,47.5,162.5,87.5 S150,127.5,137.5,137.5 S127.5,162.5,87.5,162.5
S47.5,150,37.5,137.5 S12.5,127.5,12.5,87.5 S25,47.5,37.5,37.5z”,
   
“M12.5,12.5S87.5,12.5,87.5,12.5S162.5,12.5,162.5,12.5S162.5,87.5,162.5,87.5S162.5,162.5,162.5,162.5S87.5,162.5,87.5,162.5S12.5,162.5,12.5,162.5S12.5,127.5,12.5,127.5S12.5,12.5,12.5,12.5z”
];

var path=svg.path(pathes[0]);

path.attr({
    fill:”#2E70FF”
});

function animateIn(callback){
    path.animate({
        d:pathes[1]
    },300,mina.easeout,function(){
        path.animate({
            d:pathes[0]
        },400,mina.elastic,callback)
    });
};

function animateOut(callback){
    path.animate({
        d:pathes[1]
    },300,mina.easeout,function(){
        path.animate({
            d:pathes[2]
        },400,mina.elastic,callback)
    });
};

Snap 是 Adobe 出品处理 SVG 的库,mina是 Snap
自带的一个卡通工具集,在那之中有那多少个预设的卡通片。

结语

用 Snap 制作的卡通片能够匹配 IE玖,而且速度也不利,自定义功效很强劲。相信不久的前些天还会有越多狂拽酷炫屌炸天的动作效果会用
Snap 制作出来。

比方想深造动作效果的话,可以先看一下 TED 一集关于动作效果的录像

Snap.svg 弹动作效果果,前端snap.svg
有人说不会 SVG 的前端开发者不叫开发者,而叫爱好者。前端不光是 Angularjs
了,那时候再不学…

有人说不会 SVG 的前端开发者不叫开发者,而叫爱好者。前端不光是 Angularjs
了,那时候再不学 SVG 就晚了!(假如您只会 jQuery
就当自家没说。。。)那里自个儿就给我们大饱眼福三个今日在别处看到的3个巨大上的
SVG 效果,左侧菜单弹出来会动动弹的说,链接点那里。

  1. 能够经过 Canvas 画二个矩形并让它动起来,具体代码如下。
    <canvas id=”my_canvas” width=”200″
    height=”150″></canvas>

     <script>
    
         var canvas = document.getElementById("my_canvas");
         var my_context = canvas.getContext("2d");
         my_context.fillStyle = "#f00";
         my_context.fillRect(0, 10, 50, 50);
    
         var posX = 0;
         var drawInterval = setInterval(function () {
    
             posX++;
             if (posX > 150) {
                 posX = 0;
             }
    
             my_context.clearRect(0, 0, 200, 150);
             my_context.fillRect(posX, 10, 50, 50);
    
         }, 1000 / 60);
     </script>
    

一、Snap.svg是什么

【必发88】编制程序实战,弹动作效果果。从主要成效上说,Snap.svg.js 是3个操纵 SVG 节点/制作 SVG
动画的框架,简单点清楚能够看上边文字:

Snap.svg 是二个足以使你操纵 SVG 能源和 jQuery 操作 DOM 1样不难的类库

——译自官网

拿 Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ )
来做比较最合适然而,很可能小编也是参考了 JQ 的 API
设计,那么它们的貌似程度有多高吧?请看下边的比较表:

/ context(上下文) 选择器 事件绑定 节点操作 属性操作 链式写法
Snap svg Snap.select(‘circle’) el.click(…)/el.touchend(…) after()/remove()/append() attr() svg.paper.circle(50,50,40).attr({fill:”#f00”});
JQ document jQuery(‘div’) el.click(…) after()/remove()/append() attr() elem.addClass(‘hide’).remove();

在 JQ 中,可操作的最外层 DOM 边界是 document 。而在 Snap
的概念里,可操作的最外层的节点是 svg ,svg
节点的精选、事件绑定都亟待在那些上下文里做到。

在上头的自己检查自纠图能够看看很多 JQ
的黑影,无论是采用器、事件绑定、节点操作等等,都以至极的近乎 JQ ,有 JQ
基础的同学基本能够半天左右 Snap 的任何 API。

即刻自笔者就震惊了,明日忙里偷闲搞清了源码,然后上面是本人潜研后做出来的
德姆o,即使相比粗糙,但仍旧很前卫的觉得啊。下边作者就以此 DEMO
跟大家分享一下。

先是创造出一个宽 200, 高 150 的画布,利用 JS(0,10)
地方画出三个宽 50, 高 50 的填写矩形,然后利用 setInterval()
函数设置每隔 1/60
秒清空画布上的有着剧情并再一次绘制矩形,因为此地时间的单位是 ms ,所以
1/60 秒写成 1000/60

贰、Snap 的代码结构

必发88 5

小编依照 Snap 的 API
制作了地方的图样,并且不难标注了诠释方便咱们理解,能够重点关心一下
Element 和 Paper 那八个类。

  1. 咱俩只怕会想要在大家的网页中运用 SVG 图形, 但是 SVG API
    很有深度,不过并非担心,大家得以采纳 Raphaël,这是三个
    SVG JavaScript 库,大家得以选择这些库轻松地绘制 SVG 图形,可以在
    Raphaël
    下载该库。

  2. 上面来探望利用 Raphael
    怎样绘制图形,首先声多美滋(Dumex)(Nutrilon)个用来作画的包装器
    <div id=”my_svg”></div>
    绘图二个矩形并设置其填写颜色
    var paper = Raphael(document.getElementById(“my_svg”), 600, 400);
    var rect = paper.rect(0, 0, 600, 400);
    rect.attr(“fill”, “#FFF”);
    制图贰个圆形
    var paper = Raphael(document.getElementById(“my_svg”), 600, 400);
    var circle = paper.circle(300, 200, 120);
    circle.attr(“fill”, “#F00”);
    circle.attr(“stroke-width”, 0);
    绘制二个三角。
    var paper = Raphael(document.getElementById(“my_svg”), 600, 400);
    var triangle = paper.path(‘M100,100 L100,150,L150,150 Z’);
    看得出,那里是运用 path 路径绘制的,那里的 M 相当于
    moveTo()L 相当于 lineTo(),而最终的 Z 表示关闭路径。

  3. Raphaël 还为 SVG
    提供了种种样式选项,上边就以此画五个带渐变的矩形。
    var paper = Raphael(document.getElementById(“my_svg”), 600, 400);
    var rect = paper.rect(0, 0, 480, 320);
    rect.attr({
    ‘gradient’: ’90-#393-#396′,
    ‘stroke-width’: 0
    });
    功能图如下

    demo01.png

1. Element

这么些有个别是节点操作相关的方法集,也是该类库最基础的局地。

JavaScript

// 选取节点 var svg = Snap(‘#svg’); svg.select(‘circle’); // 选择
svg.select(‘.rect_01’); // 选择

1
2
3
4
// 选择节点
var svg = Snap(‘#svg’);
svg.select(‘circle’); // 选择
svg.select(‘.rect_01’); // 选择

JavaScript

// 事件绑定 var svg = Snap(‘#svg’);
svg.select(‘circle’).click(function() { // do something });

1
2
3
4
5
// 事件绑定
var svg = Snap(‘#svg’);
svg.select(‘circle’).click(function() {
// do something
});

更多措施请参见文后 API 资料。

该案例需求有个别 PS 也许 AI
中路径的文化,上面是本例中运涉及到的知识点和工具:

`90-#393-#396` ,`90`
是渐变梯度,接下来的两个参数是颜色码。很多时候我们可能不知道怎么选择颜色,可以去
[Web
安全色](https://link.jianshu.com?t=http://www.bootcss.com/p/websafecolors/)
挑选自己喜欢的颜色。我们还可以给我们的图形加上边框,并设置边框的样式。  
rect.attr({  
'gradient': '90-\#393-\#396',  
'stroke-width': 20,  
'stroke': '\#3C6',  
'stroke-linejoin': 'round'

     });

2. Paper

那有的是画画相关的方法集,这是大致各种动画框架都有个别某些,类似于createjs的Graphics。

SVG
有6种主干图形:矩形、圆形
、椭圆、线条、折线、多边形。还有其余一种:路径(path),path
是最复杂的一种绘图格局,它可以绘制复杂的图样——当然陆种基本图形也不值得一提。而至于中央图像与
path 之间的转移,能够参见本站的别的1篇小说:聊天 SVG
基本造型转换那三个事。

必发88 6

Paper
方法集首要可以绘制六种着力图形(节点),以及文本(节点)、图片(节点)、渐变等。

JavaScript

// 画三个圆 var svg = Snap(‘#svg’); svg.paper.circle({ cx: 100, cy:
100, r: 50, fill: ‘#f00’ });   // 创制一张图纸
svg.paper.image(‘url.jpg’, 0, 400, 300, 300);

1
2
3
4
5
6
7
8
9
10
11
// 画一个圆
var svg = Snap(‘#svg’);
svg.paper.circle({
cx: 100,
cy: 100,
r: 50,
fill: ‘#f00’
});
 
// 创建一张图片
svg.paper.image(‘url.jpg’, 0, 400, 300, 300);

snap.svg
svg path data
Adobe Illustrator
animation timing

demo02.png

三. Snap 工具方法

Snap下有好多实用工具,比如
Snap.ajax、Snap.format模板、颜色格式转换和插件方法等。

JavaScript

// 扩充Snap,为其增进插件方法 Snap.plugin(function (Snap, Element,
帕佩r, global, Fragment) { Snap.newmethod = function () {};
Element.prototype.newmethod = function () {}; Paper.prototype.newmethod
= function () {}; });

1
2
3
4
5
6
// 扩展Snap,为其添加插件方法
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
Snap.newmethod = function () {};
Element.prototype.newmethod = function () {};
Paper.prototype.newmethod = function () {};
});

先付给原理:依照时间更换坐标。如下图所示,本例其实正是 A、B、C
三条线时期的转换,A 是发端状态,点击后通过 B 最终形成
C。当中有五回动画,分别是 A-B 和 B-C,而那五次动画的 timing function
和岁月都以例外的。

  1. Raphaël
    对动画的支撑也特别有力,比如说大家能够选取上边那一行代码,让大家地点绘制的图形旋转
    360 度。
    rect.animate({transform: ‘r 360’}, 3000, ‘<>’);
    这里,r 实际上正是 rotate 的缩写 ,<>
    表示淡入淡出的动画片效果。当然还有其余成效,比如说 < 是淡入,>
    是淡出。在 CSS 中设置过 transform 的人都精晓,既然有 rotate
    ,那肯定得有 scale,translate
    吧?是的,都有,他们得以组合起来使用,就像是上面那样。
    rect.animate({transform: ‘r 360 t 100,100 s 0.2’}, 3000,
    ‘<>’);
    animate()
    函数中大家还足以安装回调函数,在首先个卡通效果执行实现之后,继续下三个动画效果。
    rect.animate({transform: ‘r 360’}, 3000, ‘<>’, function () {
    rect.animate({transform: ‘s 0.5’}, 3000, ‘<>’);
    });
    大家可能不想让三个因素自动就接触3个卡通效果,1般景观下,唯有当鼠标点击可能鼠标越过成分的时候,才触发效果,当然那或多或少也是可以达成的。下边大家就为大家的成分设置鼠标点击事件。
    rect.node.onclick = function () {
    rect.animate({transform: ‘r 360’}, 3000, ‘<>’, function () {
    rect.animate({transform: ‘s 0.5’}, 3000, ‘<>’);
    });
    }
    也足以将 onclick 改为 onmouseover, onmousedown,onmouseup 等。

叁、用 Snap 制作动画

必发88 7

1. 创造动画的法子

Snap 的做动画重点有二种方式:

  • 使用 Element 里的 animate 方法,Element.animate(attrs, duration,
    [easing], [callback])
  • 行使 Snap 的静态方法,Snap.animate(from, to, setter, duration,
    [easing],
    [callback]),那种办法更通用也更强劲,钦赐早先终结值,setter里面能够停放多少个节点的动画。

样例:演示Element.animate方法的运用。预览地址点此

JavaScript

// 动画样例一 var svg = Snap(‘#svg’); svg.select(‘circle’).animate({r:
100}, 1000, mina.easeout(), function() { console.log(‘animation end’);
});   // 动画样例贰 var svg = Snap(‘#svg’); var circle =
svg.select(‘circle’); var rect = svg.select(‘rect’); Snap.animate(0,
100, function(val) { circle.attr({r: val}); rect.attr({x: val}); },
1000, mina.easeout(), function() { console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 动画样例1
var svg = Snap(‘#svg’);
svg.select(‘circle’).animate({r: 100}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});
 
// 动画样例2
var svg = Snap(‘#svg’);
var circle = svg.select(‘circle’);
var rect = svg.select(‘rect’);
Snap.animate(0, 100, function(val) {
circle.attr({r: val});
rect.attr({x: val});
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

必发88 8

第一步:画草稿

贰. 动画的习性

在 Snap 中,可看作动画的品质有何样吧?小编大约分为了几类:

  • 简单的讲数值类,如坐标、宽高、opacity、超越50% Paper API
    可安插的属性值,甚至滤镜相关的性质。如{x:拾0} -> {x:200},
    {width:0} -> {width:十0}
  • path 相关动画,如d属性(变形动画)、描边动画、路径跟随动画
  • matrix 类,放大缩短、位移、旋转等,和 CSS 的 transform 类似
  • 颜色类,颜色变换动画,如 fill、stroke 属性,如{fill:’#f00’} ->
    {fill:’#f0f’}

样例:颜色变换动画,预览地址点此

JavaScript

// 动画样例,颜色变化动画 var svg = Snap(‘#svg’); var circle =
svg.paper.circle({cx: 100, cy: 100, r: 50, fill: ‘#f00’});
circle.animate({fill: ‘#00f’}, 1000, mina.easeout(), function() {
console.log(‘animation end’); });

1
2
3
4
5
6
// 动画样例,颜色变化动画
var svg = Snap(‘#svg’);
var circle = svg.paper.circle({cx: 100, cy: 100, r: 50, fill: ‘#f00’});
circle.animate({fill: ‘#00f’}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

必发88 9

做动画前率先步就是画草稿(如上海图书馆),笔者一般用 AI 来画,因为 AI
可以规范的控制成分尺寸和职位,而且其规律和 SVG 是千篇一律的。

4、path & matrix 动画详解

以此小节重点会讲上面第1小节提到的 path、matrix 相关动画方式,以及和 CSS
的 transform 动画的异议。

接下来有的同学就会说,“老湿,是还是不是要保存为 SVG 格式的,然后做修改啊?”

1. path 动画

一). path 变形动画

那种类型的动画分外有力。上文已涉嫌基本图形和 path
能够互相转换的,所以基本图形间的变形动画也是确立的。不仅如此,更复杂的
path 图形,比如波浪、房子、汽车、白云、小icon等,都是足以并行变形。

path 的d属性在 Snap
的分析规则里能够通过一层层的数学生运动算,动画中通过插值,达到最终态的d值,不过中间的插值总结大家无能为力干预。

JavaScript

// 开始态 var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758
45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500
C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914
246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417
225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500
C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371
363.758,80.355 364.500,109.500′,stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
setTimeout(function() { // 终止态:曲线变直 // path.animate({d: ‘M一,十0
L350,100’}, 一千, mina.easeout(), function() { // console.log(‘animation
end’); // }); // 终止态:心形 path.animate({d: ‘M11四.500,5八.500
C106.230,5八.751 2三.907,-3七.26二 伍.500,贰一.500 C-二陆.75九,1贰四.483
11一.7陆1,2二1.360 11九.500,21玖.500 C154.464,21一.0玖陆 20一.23四,149.580
220.500,10四.500 C250.260,34.86四 220.89二,7.15九 1九四.500,一.500
C160.45伍,-5.800 12二.34四,5八.26二 114.500,5八.500 Z’}, 1000, mina.easeout(),
function() { console.log(‘animation end’); }); }, 1000);

1
2
3
4
5
6
7
8
9
10
11
12
// 开始态
var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500′,stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
setTimeout(function() {
// 终止态:曲线变直
// path.animate({d: ‘M1,100 L350,100’}, 1000, mina.easeout(), function() {
// console.log(‘animation end’);
// });
// 终止态:心形
path.animate({d: ‘M114.500,58.500 C106.230,58.751 23.907,-37.262 5.500,21.500 C-26.759,124.483 111.761,221.360 119.500,219.500 C154.464,211.096 201.234,149.580 220.500,104.500 C250.260,34.864 220.892,7.159 194.500,1.500 C160.455,-5.800 122.344,58.262 114.500,58.500 Z’}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});
}, 1000);

样例:曲线变直线,预览地址点此

必发88 10

样例:曲线变心形,预览地址点此

必发88 11

画草稿图的目标只是为着便利的规定种种点的坐标,自身算太难为了,而且还易于失误。除却AI 未有任何成效。AI 生成的 SVG
文件在此例中常有不可能拿来用,因为当中的路劲点太混乱了,上面会详说。

二). path 描边动画

那种动画主要用的是 svg 的 stroke-dasharray、stroke-dashoffset
属性,这中卡通格局在本站的别的一篇作品有详实介绍,那里不再赘述:三看
SVG Web 动效

样例:不难曲线描边动画

JavaScript

var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758
45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500
C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914
246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417
225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500
C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371
363.758,80.355 364.500,109.500′, stroke:’#f00’, fill:
‘rgba(0,0,0,0)’}); var length = Snap.path.getTotalLength(path);
path.attr({ ‘stroke-dashoffset’: length, ‘stroke-dasharray’: length //
用Snap的API总结复杂的path长度 }); Snap.animate(length, 0, function(val)
{ path.attr({ ‘stroke-dashoffset’: val }); }, 一千, mina.easeout(),
function() { console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
11
12
13
var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500′, stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
var length = Snap.path.getTotalLength(path);
path.attr({
‘stroke-dashoffset’: length,
‘stroke-dasharray’: length // 用Snap的API计算复杂的path长度
});
Snap.animate(length, 0, function(val) {
path.attr({
‘stroke-dashoffset’: val
});
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

必发88 12

或者用CSS实现:

CSS

@keyframes demo4 { 100% { stroke-dashoffset: 0 } } .demo4 { animation:
demo4 1s ease-out infinite both; }

1
2
3
4
5
6
7
8
@keyframes demo4 {
100% {
stroke-dashoffset: 0
}
}
.demo4 {
animation: demo4 1s ease-out infinite both;
}

样例:花纹描边。那是codepen上2个扑朔迷离的事例——复杂花纹的描边动画,预览地址点此:

必发88 13

什么样?你不会用 AI ?

叁). path 路径跟随动画

那种动画是指一个 svg
节点(基本图形、文本、图片等)沿着轨迹移动的卡通,重要适用于模拟交通工具航行轨迹、粒子散开轨迹等。

那种动画的要害之处在于要驾驭 path 的长度与坐标之间的应和关系,Snap
提供了可供获取path的长度以及基于长度获取地点坐标
API。结合方面包车型大巴 Snap.animate 方法,路径跟随动画的创建会变得分外简单。

样例:跟随曲线运动的小飞机,预览地址点此:

JavaScript

var length = Snap.path.getTotalLength(path); // 获取path的长度
Snap.animate(0, length, function(val) { var point =
Snap.path.getPointAtLength(path, val); // 依照path长度变化获取坐标 var m
= new Snap.Matrix(); m.translate(point.x, point.y);
m.rotate(point.alpha-90); //
使飞机总是朝着曲线趋势。point.阿尔法:点的切线和水准线形成的夹角
plane.transform(m); }, 20000, mina.easeout(), function() {
console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
var length = Snap.path.getTotalLength(path); // 获取path的长度
Snap.animate(0, length, function(val) {
var point = Snap.path.getPointAtLength(path, val); // 根据path长度变化获取坐标
var m = new Snap.Matrix();
m.translate(point.x, point.y);
m.rotate(point.alpha-90); // 使飞机总是朝着曲线方向。point.alpha:点的切线和水平线形成的夹角
plane.transform(m);
}, 30000, mina.easeout(), function() {
console.log(‘animation end’);
});

必发88 14

样例:双1二开场动画,那是笔者二零一八年双12做的1个路线跟随动画效果,预览地址点此:

必发88 15

其它,用新的 CSS 属性 motion-path
也足以实现类似意义,但当下支撑程度堪忧,只有 PC 的 chrome 以及
Opera、最新的X伍内核手提式有线话机浏览器 协理情形较好。

CSS

@keyframes demo伍 { 0% { motion-offset: 0; } 百分百 { motion-offset: 百分之百;
} } .demo伍 { motion-path:
path(“M22一.71二,180.442C二叁7.17陆,17柒.728,27玖.34八,17捌.0玖四,二陆一,15二c-18.74贰-二陆.65肆-4捌.5四三-2八.207-63-22-1四.九捌一,六.43一-34.7陆三,⑥.357-3四,40s6六.0九,7四.16二,8八,6八,60.35八-二3.74二,67-4九,1四.21一-5玖.957-27-八一S16叁.688,8八.66四,1五3,九8c-7.82八,陆.83捌-3二.0四伍,22.95二-32,64,0.03九,3伍.4九一,七.87八,62.87二,1四,78s5二.7三柒,3玖.5伍柒,7三,4一,5八.63八,16.552,十伍-7c4四.24九-2二.47八,75.073-9四.40玖,55-164C34玖.76捌,肆陆.792,贰一7.14二,5四.51玖,200,55S10四.陆一三,6六.12八,7八,11一c-1六.92二,2八.53二-1陆.5,96.61六,一,13四,1肆.4八贰,30.932,5一.8八,5八.5二,6八,64,3玖.98八,1叁.5玖三,100.08一,2壹.6一5,12玖,壹7”);
motion-rotation: auto 90deg; // 使飞机方向始终朝着曲线 animation: demo5
10s linear infinite both; }

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes demo5 {
0% {
motion-offset: 0;
}
100% {
motion-offset: 100%;
}
}
.demo5 {
motion-path: path("M221.712,180.442C237.176,177.728,279.348,178.094,261,152c-18.742-26.654-48.543-28.207-63-22-14.981,6.431-34.763,6.357-34,40s66.09,74.162,88,68,60.358-23.742,67-49,14.211-59.957-27-81S163.688,88.664,153,98c-7.828,6.838-32.045,22.952-32,64,0.039,35.491,7.878,62.872,14,78s52.737,39.557,73,41,58.638,16.552,105-7c44.249-22.478,75.073-94.409,55-164C349.768,46.792,217.142,54.519,200,55S104.613,66.128,78,111c-16.922,28.532-16.5,96.616,1,134,14.482,30.932,51.88,58.52,68,64,39.988,13.593,100.081,21.615,129,17");
motion-rotation: auto 90deg; // 使飞机方向始终朝着曲线
animation: demo5 10s linear infinite both;
}

预览地址点此(请在风行版
chrome、Opera 或新型的X五内核手提式无线电电话机浏览器查看)

即使你还想在前者那条路上走下来的话,那现在就去学吧。(在那里作者想吐槽一下,PS
是用来处理点阵图片的,根本不适合拿来做设计图。比较之下 AI
才是做这么些的,google 给出的 metrial design 布局模板全都以 AI
格式的。但国内不管是什么公司,用 PS 都类似很欣欣自得的典范,不知情怎么。)

2. matrix动画

Snap 的 matrix 动画包罗各位熟知的 translate/scale/rotate/skew
动画,原理和 CSS 的 transform 也大约一致。

1)
matrix不难位活动画,预览地址点此:

必发88 16

JavaScript

// 简单位活动画 var rect = svg.paper.rect({x: 十0, y: 十0, width: 50,
height: 30, fill: ‘#f00’}); var anim = function() { Snap.animate(0,
150, function(val) { var m = new Snap.Matrix(); m.translate(val, 0); //
translate位移API rect.transform(m); // 在rect节点应用matrix }, 1000,
mina.easeout(), function() { console.log(‘animation end’);
setTimeout(anim, 300); }); } anim();

1
2
3
4
5
6
7
8
9
10
11
12
13
// 简单位移动画
var rect = svg.paper.rect({x: 100, y: 100, width: 50, height: 30, fill: ‘#f00’});
var anim = function() {
Snap.animate(0, 150, function(val) {
var m = new Snap.Matrix();
m.translate(val, 0); // translate位移API
rect.transform(m); // 在rect节点应用matrix
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
setTimeout(anim, 300);
});
}
anim();

贰)
matrix位移、旋转复合动画,预览地址点此:
必发88 17

JavaScript

// 位移、旋转复合动画 var rect = svg.paper.rect({x: 拾, y: 100, width:
50, height: 30, fill: ‘#f00’}); var g = svg.paper.group(rect); //
创设了1个分组节点g作为位移动画节点 var anim_rotate = function() { //
节点旋转部分 Snap.animate(0, 250, function(val) { var m = new
Snap.Matrix(); m.rotate((val/250)*360, 10+二伍, 100+一五); //
注意,后边两位数是旋转核心点,属于相对坐标,svg里节点的转移中心都以纯属坐标,和CSS的transform-origin取值不太相同
rect.transform(m); }, 500, mina.easeout(), function() {
console.log(‘animation end’); anim_rotate(); }); }; anim_rotate(); var
anim_move = function() { // 节点位移部分 Snap.animate(0, 250,
function(val) { var m = new Snap.Matrix(); m.translate(val, 0);
g.transform(m); }, 两千, mina.easeout(), function() {
console.log(‘animation end’); anim_move(); }); }; anim_move();

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
// 位移、旋转复合动画
var rect = svg.paper.rect({x: 10, y: 100, width: 50, height: 30, fill: ‘#f00’});
var g = svg.paper.group(rect); // 创建了一个分组节点g作为位移动画节点
var anim_rotate = function() { // 节点旋转部分
Snap.animate(0, 250, function(val) {
var m = new Snap.Matrix();
m.rotate((val/250)*360, 10+25, 100+15); // 注意,后面两位数是旋转中心点,属于绝对坐标,svg里节点的变换中心都是绝对坐标,和CSS的transform-origin取值不太一样
rect.transform(m);
}, 500, mina.easeout(), function() {
console.log(‘animation end’);
anim_rotate();
});
};
anim_rotate();
var anim_move = function() { // 节点位移部分
Snap.animate(0, 250, function(val) {
var m = new Snap.Matrix();
m.translate(val, 0);
g.transform(m);
}, 2000, mina.easeout(), function() {
console.log(‘animation end’);
anim_move();
});
};
anim_move();

上面八个卡通用 CSS 的方式贯彻代码如下:

CSS

@keyframes demo6 { 百分百 { transform: translate3d(250px, 0, 0); } } //
不难位活动画CSS版 .demo陆 { animation: demo陆 2s linear infinite both; }  
@keyframes demo七_rotate { 100% { transform: rotate(360deg); } }
@keyframes demo7_move { 百分之百 { transform: translate三d(250px, 0, 0); } }
// 旋转、位移符合动画CSS版 .demo七 { animation: demo柒_move 2s linear
infinite both; rect { transform-origin: 35px 115px; animation:
demo7_rotate .5s linear infinite both; } }

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
@keyframes demo6 {
100% {
transform: translate3d(250px, 0, 0);
}
}
// 简单位移动画CSS版
.demo6 {
animation: demo6 2s linear infinite both;
}
 
@keyframes demo7_rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes demo7_move {
100% {
transform: translate3d(250px, 0, 0);
}
}
// 旋转、位移符合动画CSS版
.demo7 {
animation: demo7_move 2s linear infinite both;
rect {
transform-origin: 35px 115px;
animation: demo7_rotate .5s linear infinite both;
}
}

简简单单位移动画CSS版预览点此必发88,;旋转、位移符合动画CSS版预览点此。

第三步:总计路径

五、多少个包容性表明及提议

那部分会说一下小编在付出进度中蒙受的一对兼容性难题以及选择提出。当然还会有越来越多的撰稿人没蒙受的题材,欢迎各位看官多多评论沟通,不吝赐教。

  • 总的看,Snap 的 API 包容性不错,官网宣称包容 IE9
    及以上、Safari、Chrome、Firefox、Opera
    ;而运动装备方面,经我测试
    iOS、安卓 X五内核、安卓原生浏览器包容性都毋庸置疑,文中的事例除了新鲜表明外的都得以实施
  • 作用于 svg 节点的 CSS transform
    动画在安卓原生浏览器下兼容性倒霉, X5 则平常
  • iOS7 和 8 下 innerHTML 方法无法用来 svg 里
  • 安卓原生浏览器绘图 svg
    图形很或然会生出渲染模糊的情景(如下图),在 svg 里加上2个 text
    节点即可神奇的修补

必发88 18

如此那般的节点 <text>a</text> 即可修复模糊的难题,但无法display:none 隐藏

这一步就比较复杂了,上边说过了,那个动画其实就是坐标之间变换。而从4边形到圆弧之间的变换不光是坐标位移而已,还有曲线弧度的转换。上面的安顿图直接保存为
SVG 后代码如下:

在采取提出地方:

  • 壹般的话,transform 动画可以优先选拔 CSS
    的法子达成,但借使要求复杂的支行控制恐怕更好的兼容性,能够试试 Snap
    的 transform&matrix 方式
  • Snap 的有点动画需求大量乘除,固然 svg
    里的节点属于“相对定位”,动画时1般不会挑起重排(参考下图),但在运动装备上也要专注动画成分不宜过多。以
    image 动画为例, 经笔者测试,150×150 左右的图纸动画节点控制在 10个左右主导能实现抢先2/四机型的属性需要
  • 滤镜类属性在移动设备上不宜做动画

小飞机动画在 chrome 的渲染层边界图:
必发88 19

深蓝边为 svg 的边界(即渲染层,为了有利于查看 svg 节点经过了
transform:rotateY(30deg) ;蔚蓝为重绘部分。能够看出 svg
里的卡通片成分只会唤起重绘,而里边的节点用 translateZ
也并不会新开一个渲染层。

复制代码 代码如下:

陆、参考资料

Snap.svg官网

Web动画API教程5:可爱的位移路径(Motion
Path)

张鑫旭:Snap.svg
API粤语文书档案兼demo实例页面

1 赞 1 收藏
评论

必发88 20

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG
Version: 6.00 Build 0)  –>
<svg version=”1.1″ id=”图层_1″ xmlns=””
xmlns:xlink=”” x=”0px” y=”0px”
     viewBox=”0 0 175 175″ enable-background=”new 0 0 175 175″
xml:space=”preserve”>
<!– 路径 A –>
<path fill=”none” stroke=”#BF3A41″ stroke-miterlimit=”10″ d=”
    M12.5,12.5
    h75
    h75
    v75
    v75
    h-75
    h-75
    v-35
    V12.5z”/>
<!– 路径 B –>
<path fill=”none” stroke=”#0000FF” stroke-miterlimit=”10″ d=”
    M37.5,37.5
    c0,0,10-25,50-25
    s50,25,50,25
    s25,10,25,50
    s-25,50-25,50
    s-10,25-50,25
    s-50-25-50-25
    s-25.1-10-25.1-50
    S37.5,37.5,37.5,37.5z”/>
<!– 路径 C –>
<path fill=”none” stroke=”#000000″ stroke-miterlimit=”10″ d=”
    M37.5,37.5
    h50
    h50
    v50
    v50
    h-50
    h-50
    v-50
    V37.5z”/>
</svg>

大家只必要关心路径的 d 属性就行了,能够看来,AB
四个途径之间只怕能够并行转换的,但她俩和 C
路径(有弧线的门道)之间就不可能更换了。他们所用到的绘图命令都不如,AB
多少个都以矩形,绘图时用到的都以h、v,也便是横纵之间的移动,画出来的都以横竖线。而 C 路劲用到的都以s、c这个命令,画出来的都以曲线。所以 AI 给出去的图我们无法用,要自身依照svg path data 重新绘制2回。

上面小编参考 AI 设计图再度绘制的三条路线:

复制代码 代码如下:

<!– 路径 A –>
<path d=”
    M37.5,37.5
    S87.5,37.5,87.5,37.5
    S137.5,37.5,137.5,37.5
    S137.5,87.5,137.5,87.5
    S137.5,137.5,137.5,137.5
    S87.5,137.5,87.5,137.5
    S37.5,137.5,37.5,137.5
    S37.5,87.5,37.5,87.5
    S37.5,37.5,37.5,37.5z”>
<!– 路径 B –>
<path d=”
    M 37.5,37.5
    S47.5,12.5,87.5,12.5
    S127.5,25,137.5,37.5
    S162.5,47.5,162.5,87.5
    S150,127.5,137.5,137.5
    S127.5,162.5,87.5,162.5
    S47.5,150,37.5,137.5
    S12.5,127.5,12.5,87.5
    S25,47.5,37.5,37.5z”>
<!– 路径 C –>
<path d=”
    M12.5,12.5
    S87.5,12.5,87.5,12.5
    S162.5,12.5,162.5,12.5
    S162.5,87.5,162.5,87.5
    S162.5,162.5,162.5,162.5
    S87.5,162.5,87.5,162.5
    S12.5,162.5,12.5,162.5
    S12.5,127.5,12.5,127.5
    S12.5,12.5,12.5,12.5z”>

有过设计基础的同窗应该掌握上边代码的含义,正是将有所锚点转换来平滑,然后再更改手柄的地方。形状没变,即便代码多了过多,不过把绘制命令都改成了
S ,那样3条路子就唯有数值之间的例外了。而动画片的长河正是数值之间的变换。

第三步:Timing

这一步正是设定动画的时间点和 timing function 。时间点比较好说,A-B 和
B-C 作者设置的各自是300阿秒和400飞秒。

timing function 正是大家在做 CSS 动画中选拔到的
animation-timing-function 属性,比较广泛的有
ease、linear、easein,大家也能够用贝塞尔曲线自身定制。不过CSS的 timing
function 相比简单,只好定义一条均匀的曲线,A-B 转换用到的 ease-out,不过B-C 为了展示弹动的职能,所用到的 timing-function
就不是一条均匀曲线这么简单了。

必发88 21

上边列出了有的相比常用的 timing-function ,个中山大学约分为
ease、bounce、elastic 三类。ease
壹般作为减速或然加速动作效果。bounce就像他的曲线图壹样,一般作为小球落地那种动作效果。而
elastic
壹般用在如琴弦1样的动作效果上,那种动作效果四个特点正是有一对偏移到负坐标上了,而
B-C 用到的正是那几个,如下图。

必发88 22

依照地点已经画出来的路径,结合动画,代码就出来了:

复制代码 代码如下:

var svg=Snap(“#svg”);
var pathes=[
   
“M37.5,37.5S87.5,37.5,87.5,37.5S137.5,37.5,137.5,37.5S137.5,87.5,137.5,87.5
S137.5,137.5,137.5,137.5S87.5,137.5,87.5,137.5S37.5,137.5,37.5,137.5S37.5,87.5,37.5,87.5S37.5,37.5,37.5,37.5z”,
    “M 37.5,37.5 S47.5,12.5,87.5,12.5 S127.5,25,137.5,37.5
S162.5,47.5,162.5,87.5 S150,127.5,137.5,137.5 S127.5,162.5,87.5,162.5
S47.5,150,37.5,137.5 S12.5,127.5,12.5,87.5 S25,47.5,37.5,37.5z”,
   
“M12.5,12.5S87.5,12.5,87.5,12.5S162.5,12.5,162.5,12.5S162.5,87.5,162.5,87.5S162.5,162.5,162.5,162.5S87.5,162.5,87.5,162.5S12.5,162.5,12.5,162.5S12.5,127.5,12.5,127.5S12.5,12.5,12.5,12.5z”
];

var path=svg.path(pathes[0]);

path.attr({
    fill:”#2E70FF”
});

function animateIn(callback){
    path.animate({
        d:pathes[1]
    },300,mina.easeout,function(){
        path.animate({
            d:pathes[0]
        },400,mina.elastic,callback)
    });
};

function animateOut(callback){
    path.animate({
        d:pathes[1]
    },300,mina.easeout,function(){
        path.animate({
            d:pathes[2]
        },400,mina.elastic,callback)
    });
};

Snap 是 Adobe 出品处理 SVG 的库,mina是 Snap
自带的2个卡通工具集,在那之中有过多预设的卡通。

结语

用 Snap 制作的卡通能够匹配 IE9,而且速度也合情合理,自定义成效很有力。相信不久的未来还会有更加多狂拽酷炫屌炸天的动作效果会用
Snap 制作出来。

借使想学习动作效果的话,能够先看一下 TED 一集关于动作效果的录像

您恐怕感兴趣的稿子:

  • python用Pygal怎么样变迁美丽的SVG图像详解
  • jQuery 生成svg矢量贰维码
  • Svg.js实例教程及使用手册详解(1)
  • 用svg制作富有动态的tooltip
  • 推荐10 款 SVG 动画的 JavaScript
  • 传闻jquery和svg完毕超炫酷的卡通片特效
  • Python达成批量把SVG格式转成png、pdf格式的代码分享
  • 依据SVG的web页面图形绘制API介绍及编制程序演示
  • JavaScript
    判断浏览器是或不是帮忙SVG的代码
  • svg动画之动态描边效果

发表评论

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

网站地图xml地图