xml地图|网站地图|网站标签 [设为首页] [加入收藏]

软件资讯

当前位置:美高梅游戏网站 > 软件资讯 > 用svg制作动画

用svg制作动画

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-12-04 04:04

使用 Snap.svg 制作动画

2017/02/22 · HTML5 · SVG

原文出处: 凹凸实验室   

图片 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg>
        <rect x="10" y="10" width="50" height="30">
            <animate attributeType="XML"
            attributeName="width"
            to="100"
            fill="freeze"
            dur="1s" />
        </rect>
    </svg>
</body>
</html>

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

二、Snap 的代码结构

图片 2

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

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

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

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

三、用 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

本文由美高梅游戏网站发布于软件资讯,转载请注明出处:用svg制作动画

关键词:

上一篇:十二个令人侧目的HTML5和JavaScript效果

下一篇:没有了