vnsc5858威尼斯城官网 > 澳门威斯尼斯人网址 > 编程实战,制作动画

原标题:编程实战,制作动画

浏览次数:84 时间:2019-09-14

2. Paper

这部分是画图相关的方法集,这是几乎每个动画框架都有的部分,类似于createjs的Graphics。

SVG 有6种基本图形:矩形、圆形 、椭圆、线条、折线、多边形。还有另外一种:路径(path),path 是最复杂的一种绘图方式,它可以绘制复杂的图形——当然6种基本图形也不在话下。而关于基本图像与 path 之间的转换,可以参考本站的另外一篇文章:聊聊 SVG 基本形状转换那些事。

澳门威斯尼斯人网址 1

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

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. 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. 可以通过 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. path 动画

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

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. 我们可能会想要在我们的网页中使用 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

二、Snap 的代码结构

澳门威斯尼斯人网址 2

笔者根据 Snap 的 API 制作了上面的图表,并且简单标注了注释方便大家理解,可以重点关注一下 Element 和 Paper 这两个类。

`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. matrix动画

Snap 的 matrix 动画包含各位熟悉的 translate/scale/rotate/skew 动画,原理和 CSS 的 transform 也几乎一致。

1) matrix简单位移动画,预览地址点此:

澳门威斯尼斯人网址 3

JavaScript

// 简单位移动画 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();

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

2) matrix位移、旋转复合动画,预览地址点此:
澳门威斯尼斯人网址 4

JavaScript

// 位移、旋转复合动画 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();

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

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版预览点此;旋转、位移符合动画CSS版预览点此。

使用 Snap.svg 制作动画

2017/02/22 · HTML5 · SVG

原文出处: 凹凸实验室   

澳门威斯尼斯人网址 5

六、参考资料

Snap.svg官网

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

张鑫旭:Snap.svg API中文文档兼demo实例页面

1 赞 1 收藏 评论

澳门威斯尼斯人网址 6

本文由vnsc5858威尼斯城官网发布于澳门威斯尼斯人网址,转载请注明出处:编程实战,制作动画

关键词:

上一篇:没有了

下一篇:没有了