制作动画,阅读笔记
分类:计算机知识

使用 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 如何绘制图形,首先声明一个用于作画的包装器
    <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

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:制作动画,阅读笔记

上一篇:前端图片引入方式神演算,页面里有用武之地吗 下一篇:没有了
猜你喜欢
热门排行
精彩图文