http://www.web008.net

阅读笔记,制作动画

一、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。

  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>
    

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 资料。

  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. path 动画

`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'

     });

五、几个兼容性说明及建议

这部分会说一下笔者在开发过程中遇到的一些兼容性问题以及使用建议。当然还会有更多的笔者没遇到的问题,欢迎各位看官多多评论交流,不吝赐教。

  • 总的来说,Snap 的 API 兼容性不错,官网声称兼容 IE9 及以上、Safari、Chrome、Firefox、Opera;而移动设备方面,经笔者测试 iOS、安卓 X5 内核、安卓原生浏览器兼容性都不错,文中的例子除了特殊说明外的都可以执行
  • 作用于 svg 节点的 CSS transform 动画在安卓原生浏览器下兼容性不好, X5 则正常
  • iOS7 和 8 下 innerHTML 方法不能用于 svg 里
  • 安卓原生浏览器绘制 svg 图形很可能会产生渲染模糊的现象(如下图),在 svg 里加上一个 text 节点即可神奇的修复

图片 1

这样的节点 <text>a</text> 即可修复模糊的问题,但不能 display:none 隐藏

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

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 () {};
});

demo02.png

使用 Snap.svg 制作动画

2017/02/22 · HTML5 · SVG

原文出处: 凹凸实验室   

图片 2

首先创建出一个宽 200, 高 150 的画布,利用 JS(0,10) 位置画出一个宽 50, 高 50 的填充矩形,然后利用 setInterval() 函数设置每隔 1/60 秒清空画布上的所有内容并重新绘制矩形,因为这里时间的单位是 ms ,所以 1/60 秒写成 1000/60

2). 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 }); }, 1000, 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');
});

图片 3

或者用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上一个复杂的例子——复杂花纹的描边动画,预览地址点此:

图片 4

1). 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: '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);

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

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

图片 5

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

图片 6

三、用 Snap 制作动画

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。