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 ...
随机推荐
- 【BZOJ 3443】 3443: 装备合成 （离线+线段树）
3443: 装备合成 Time Limit: 15 Sec Memory Limit: 128 MBSubmit: 63 Solved: 31 Description [背景] lll69 ...
- April Fools Day Contest 2016 G. You're a Professional
G. You're a Professional 题目连接: http://www.codeforces.com/contest/656/problem/G Description A simple ...
- acdream 1735 输油管道 贪心
输油管道 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acdream.info/problem?pid=1735 Description ...
- JDK及JRE中bin工具说明
jre/bin工具说明:javac:Java编译器,将Java源代码换成字节代 java:Java解释器,直接从类文件执行Java应用程序代码 appletviewer(小程序浏览器):一种执行HTM ...
- Scrapy 轻松定制网络爬虫(转)
网络爬虫(Web Crawler, Spider)就是一个在网络上乱爬的机器人.当然它通常并不是一个实体的机器人,因为网络本身也是虚拟的东西,所以这个“机器人”其实也就是一段程序,并且它也不是乱爬,而 ...
- 源码管理--llorch的Visual Studio基本教程（四）
通用的演示样例说明: 本系列博客仅仅讨论工具的基础,不讨论不论什么语言. 甚至不讨论快捷键:-) 能够用鼠标就完毕本教程 IDE默认指代的是Visual Studio 2013 Community E ...
- 软件版本GA,RC,alpha,beta,Build 含义
(1)RC:(Release Candidate) Candidate是候选人的意思,用在软件上就是候选版本.Release.Candidate.就是发行候选版本.和Beta版最大的差别在于Beta阶 ...
- Assignment (HDU 2853 最大权匹配KM)
Assignment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- squid中实现https的透明代理
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- eclipse安装Run-Jetty-Run插件，修改实时生效
http://marketplace.eclipse.org/content/run-jetty-run 1.直接拖拽到eclipse安装(7/8/9版本都安装) 2.以调试的方式启动jetty( ...