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 ...
随机推荐
- sublime text3 常用插件
1.代码格式化:html-css-js prettify 2.代码注释:docBlockr 3.代码管理:git.gitGutter 4.快速编辑:emmet 5.代码匹配:bracket highl ...
- 活动a 使用 启动为结果 方法 启动 活动 b， b什么都不做 并返回给a，a中的 在活动结果时候 回调 是否被执行？
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 活动a 使用 启动为结果 方法 启动 活动 b, b什么都不做 并返回给a,a中的 在活 ...
- [CF1043G]Speckled Band
题意:给定字符串$s_{1\cdots n}$,多次询问它的一个子串$s_{l\cdots r}$能否被切割成多个部分,使得至少有一个部分出现两次,且切出来的本质不同字符串数最少 做一道题学了两个算法 ...
- ElasticSearch学习笔记--2、ES相关配置
1.配置文件 ES的配置文件位置:config/elasticsearch.yml可以直接搜索elasticsearch.yml 2.配置远程api访问 network.host: 192.168.1 ...
- SpringBoot 如何从前台传递数组
1.SpringBoot 如何从前台传递数组 2.前台 $.ajax({ url: 'deleteBsGiftById', type: 'post', dataType: 'json', data: ...
- python输出字符串，UnicodeEncodeError: 'ascii' codec can't encode characters in position问题
2017-06-28更新:换到python3.x中,编码问题减少了很多.这篇博文不适用于python3.x http://blog.sina.com.cn/s/blog_64a3795a01018vy ...
- Inrush limiter also provides short-circuit protection
For containing large amounts of bulk capacitance, controlling inrush currents poses problems. The si ...
- Handling Errors and Exceptions
http://delphi.about.com/od/objectpascalide/a/errorexception.htm Unfortunately, building applications ...
- ida plug-in helloworld
#include <ida.hpp> #include <idp.hpp> #include <loader.hpp> #include <kernwin.h ...
- Surface Mount Package Details
http://www.centralsemi.com/product/packages/index2.php http://www.infineon.com/cms/cn/product/packag ...