KineticJS教程（8）
KineticJS教程（8）
8.动画
动画就是一帧帧的画面按照时间间隔显示出来，Kinetic给我们提供了一个舞台对象的onFrame方法，用这个方法可以绑定一个动画方法，我们要显示的动画的每一帧画面就是在这个方法中完成绘制的。
其中，这个方法接受一个对象frame为参数，此参数对象包含两个属性，一个是frame.time，表示当前帧是动画开始后的毫秒数，另一个属性是 frame.timeDiff，表示的是当前帧与上一帧之间的时间毫秒差。当前帧因该是什么形态就是根据这两个事件来判断的。绘制出当前帧后，注意要调用一下动画所在的层的draw，将当前帧图像显示到屏幕上。
<script>
stage.onFrame(function(frame) {
// update position
// draw layer
});
</script>
如下代码显示了一个左右摆动的圆形
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8″>
<title>KineticJS</title>
<script src=“../kinetic.js”></script>
</head>
<body>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container : “container”,
width : 600,
height : 400
});
var layer = new Kinetic.Layer();
var config = {
x : 300,
y : 200,
radius : 30,
fill : “red”,
stroke : “black”,
strokeWidth : 5
};
var circle = new Kinetic.Circle(config);
layer.add(circle);
stage.add(layer);
var amplitude = 150;
var period = 2000;
var centerX = stage.getWidth() / 2;
//动画帧定义方法
stage.onFrame(function(frame) {
circle
.setX(amplitude
* Math.sin(frame.time * 2 * Math.PI / period)
+ centerX);
layer.draw();
});
//动画开始
stage.start();
//动画停止
//stage.stop();
};
</script>
<div id=“container”></div>
</body>
</html>
动画的开始与停止是用舞台对象的start与stop方法实现的。
<script>
var stage = new Kinetic.Stage({
});
//动画开始
stage.start();
//动画停止
stage.stop();
</script>
KineticJS教程（8）的更多相关文章
- KineticJS教程（12）
KineticJS教程(12) 作者: ysm 12.舞台 12.1.舞台的大小 舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度. <scr ...
- KineticJS教程（11）
KineticJS教程(11) 作者: ysm 11.对象的上下关系 11.1.层的上下关系 Kinetic的层是按照添加到舞台的次序,由下向上排列,上层遮盖下层的图形.每个层各自有一个ZIndex编 ...
- KineticJS教程（10）
KineticJS教程(10) 作者: ysm 10.在容器之间移动图形对象 Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里,这个容器指 ...
- KineticJS教程（9）
KineticJS教程(9) 作者: ysm 9.选择器 Kinetic在舞台.层和组对象上都提供了get方法,用于返回这三者中包含的对象. 9.1.根据ID获取对象 要用id获取对象,首先要给对象 ...
- KineticJS教程（7）
KineticJS教程(7) 作者: ysm 7.图形变换 7.1.线性变化 Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换,也就是从原始的状态线性变 ...
- KineticJS教程（6）
KineticJS教程(6) 作者: ysm 6.拖拽 6.1.拖拽功能 要实现Kinetic对象的拖拽功能很简单,只需要将图形对象的draggable属性设为true就可以了. <script ...
- KineticJS教程（5）
KineticJS教程(5) 作者: ysm 5.事件响应 5.1.图形的事件响应 图形对象对事件的响应处理可以使用 on() 方法绑定事件类型和相应方法. On() 方法需要一个事件类型参数和相应 ...
- KineticJS教程（4）
KineticJS教程(4) 作者: ysm 4.图形样式 4.1.填充 Kinetic中图形的填充属性可以在构造方法中的config参数中的fill属性进行设定,也可以用图形对象的setFill方 ...
- KineticJS教程（3）
KineticJS教程(3) 作者: ysm 3.图形对象 3.1.Shape Kinetic提供了一个Shape对象用于在层上绘制图形,我们可以通过Kinetic.Shape()构造方法返回一个S ...
随机推荐
- 表白 代码 韩梦飞沙-画心.html
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 韩梦飞沙-画心.html <!DOCTYPE html> <html& ...
- dp洋洋散散的知识+code
/*在数轴上有0-N的位置 从0出发每次可以向右走 2 23 233步*/ // 1 总共的方案数 f[i]=f[i-]+f[i-]+f[i-]; f[]=; ;a<=n;a++) { ) f[ ...
- 「UOJ218」火车管理
「UOJ218」火车管理 解题思路:观察发现,在弹出 \(x\) 之前,它前面这个元素都是保持不变的,所以可以用一棵可持久化线段树维护每一个栈顶元素的插入时间,每次找到当前时间\(-1\) 的版本就可 ...
- [NOI2007]货币兑换 --- DP + 斜率优化（CDQ分治）
[NOI2007]货币兑换 题目描述: 小 Y 最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A 纪念券(以下简称 A 券)和 B 纪念券(以下简称 B 券). 每个持有金券的顾客都有一个 ...
- App图标生成器的实现，附源码
背景 网上各种生成app图标的网站和工具,感觉还是用自己写的心里畅快点,所以花了1个小时自己写了个.按照网上给的图标尺寸规范把所有尺寸的都生成了. 建了一个讨论群,533838427.很明显是针对独立 ...
- bzoj 2002 LinkCutTree
我的第一道LCT题(居然1A,O(∩_∩)O哈哈~) 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 大概题意: 给一颗有根树,维护每个 ...
- JDK源码(1.7) -- java.util.AbstractList<E>
java.util.AbstractList<E> 源码分析(JDK1.7) ------------------------------------------------------- ...
- codeforces VK Cup 2015 - Qualification Round 1 B. Photo to Remember 水题
B. Photo to Remember Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/522/ ...
- react-native-image-zoom-viewer学习
github原地址 react-native-image-zoom-viewer实现了类似微信朋友圈浏览图片的效果,点击小图片实现浏览原图效果. 安装: npm i react-native-imag ...
- Python中进程无法结束的处理办法
1.方法一 http://hi.baidu.com/javalang/item/72fabf2359a30b464799625e 也就是说当线程使用start方法运行起来后,只有当run方法运行 ...