阅读笔记,制作动画

动用 Snap.svg 制作动画

2017/02/22 · HTML5 ·
SVG

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

图片 1

  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是什么

从重大作用上说,Snap.svg.js 是叁个操纵 SVG 节点/制作 SVG
动画的框架,轻松点清楚可以看下边文字:

Snap.svg 是二个能够使您垄断 SVG 能源和 jQuery 操作 DOM 同样简单的类库

——译自官方网站

拿 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。

第一创立出八个宽 200, 高 150 的画布,利用 JS(0,10)
地方画出二个宽 50, 高 50 的填写矩形,然后使用 setInterval()
函数设置每隔 1/60
秒清空画布上的持有剧情并重复绘制矩形,因为这里时间的单位是 ms ,所以
1/60 秒写成 1000/60

二、Snap 的代码结构

图片 2

作者根据 Snap 的 API
制作了上面包车型客车图片,並且简单标明了批注方便大家领会,能够首要关心一下
Element 和 Paper 那多个类。

  1. 咱俩大概会想要在大家的网页中运用 SVG 图形, 但是 SVG API
    很有深度,可是并不是担心,我们得以使用 Raphaël,那是多个
    SVG JavaScript 库,我们能够运用这些水库蓄水体积易地绘制 SVG 图形,可以在
    Raphaël
    下载该库。

  2. 下边来探访利用 Raphael
    如何绘制图形,首先声美素佳儿(Friso)(Beingmate)个用以作画的包装器
    <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 资料。

`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
是最复杂的一种绘图情势,它能够绘制复杂的图纸——当然6种基本图形也不足为外人道。而至于大旨图像与
path 之间的退换,能够参见本站的此外一篇小说:闲谈 SVG
基本造型调换那一个事。

图片 3

Paper
方法集首要能够绘制6种主导图形(节点),以致文本(节点)、图片(节点)、渐变等。

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);

demo02.png

3. Snap 工具方法

Snap下有成都百货上千实用工具,比方Snap.ajax、Snap.format模板、颜色格式转变和插件方法等。

JavaScript

// 扩展Snap,为其拉长插件方法 Snap.plugin(function (Snap, Element,
Paper, 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 () {};
});
  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, ‘<>’);
    });
    大家恐怕不想让多个元素自动就接触八个动画片效果,平日情形下,独有当鼠标点击也许鼠标超越成分的时候,才触发效果,当然那或多或少也是足以兑现的。下边大家就为我们的因素设置鼠标点击事件。
    rect.node.onclick = function () {
    rect.animate({transform: ‘r 360’}, 3000, ‘<>’, function () {
    rect.animate({transform: ‘s 0.5’}, 3000, ‘<>’);
    });
    }
    也得以将 onclick 改为 onmouseover, onmousedown,onmouseup 等。

三、用 Snap 制作动画

1. 制作动画的方式

Snap 的做动画首要有二种艺术:

  • 使用 Element 里的 animate 方法,Element.animate(attrs, duration,
    [easing], [callback])
  • 运用 Snap 的静态方法,Snap.animate(from, to, setter, duration,
    [easing],
    [callback]),这种办法更通用也更加强硬,钦赐开首终结值,setter里面能够放置八个节点的动画。

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

JavaScript

// 动画样例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’); });

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’);
});

图片 4

2. 卡通的习性

在 Snap 中,可用作动画的品质有啥样呢?作者大概分为了几类:

  • 简言之数值类,如坐标、宽高、opacity、超过八分之四 Paper API
    可安顿的属性值,以致滤镜相关的习性。如{x:100} -> {x:200},
    {width:0} -> {width:100}
  • 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’);
});

图片 5

发表评论

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