制作动画,编程实战【永利澳门游戏网址304】

采纳 Snap.svg 制作动漫

2017/02/22 · HTML5 ·
SVG

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

永利澳门游戏网址304 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 的代码结构

永利澳门游戏网址304 2

小编依照 Snap 的 API
制作了地点的图纸,况且轻松标记了讲明方便大家明白,能够首要关注一下
Element 和 Paper 那四个类。

  1. 我们大概会想要在我们的网页中应用 SVG 图形, 但是 SVG API
    很有深度,然则不用想念,大家能够运用 Raphaël,那是二个
    SVG JavaScript 库,大家得以应用那么些库轻易地绘制 SVG 图形,可以在
    Raphaël
    下载该库。

  2. 上面来探望利用 Raphael
    怎样绘制图形,首先声雅培(Abbott卡塔尔国(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 资料。

`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
基本造型转换那个事。

永利澳门游戏网址304 3

Paper
方法集重要能够绘制6种骨干图形(节点卡塔 尔(英语:State of Qatar),以致文本(节点卡塔 尔(阿拉伯语:قطر‎、图片(节点卡塔 尔(阿拉伯语:قطر‎、渐变等。

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 度。
    永利澳门游戏网址304,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’);
});

永利澳门游戏网址304 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’);
});

永利澳门游戏网址304 5

发表评论

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