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 ...
随机推荐
- HNOI2012永无乡
fhq treap+启发式合并,将小的合并到大的上面,复杂度NlogN. 最好的一点是通过dfs将一个子树内的元素转到另一个元素上. By:大奕哥 #include<bits/stdc++.h& ...
- 【左偏树+贪心】BZOJ1367-[Baltic2004]sequence
[题目大意] 给定一个序列t1,t2,...,tn ,求一个递增序列z1<z2<...<zn , 使得R=|t1−z1|+|t2−z2|+...+|tn−zn| 的值最小.本题中,我 ...
- [转载]C++内存管理
[导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...
- Codeforces Beta Round #10 D. LCIS 动态规划
D. LCIS 题目连接: http://www.codeforces.com/contest/10/problem/D Description This problem differs from o ...
- ROS知识(4)----初级教程之常见问题汇总
一.开机启动ROS的工作空间的路径设置失败 现象:在教程:http://wiki.ros.org/cn/ROS/Tutorials/CreatingPackage中的第5.1小节,运行以下命令失败: ...
- Chrome浏览器video样式控制-隐藏下载按钮
Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式 一.如何隐藏video的 ...
- 修改Linux默认启动级别或模式
在Linux中有7种启动级别,默认是X-Window,像是Windows的窗口模式,而Linux的操作和配置一般我们都采用输入命令的方式来完成,像DOS操作系统一样,如何让Linux一启动就进入这种模 ...
- linux下的系统调用函数到内核函数的追踪
http://blog.csdn.net/maochengtao/article/details/23598433
- MySQL 自动添加DateTime
数据库表里有个AddDate字段,DateTime类型,不能为空,添加记录时自动添加当前时间. 以前用MSSQL 在默认值写个 getdate() 就OK! MySQL写这个报错啊,迷糊! 查了一下 ...
- 体验NW.js打包一个桌面应用
1.安装nw,(也可在官网下载然后配置变量) npm install nw -g 一个最最简单的nw应用,只需要有index.html和package.json文件即可 2.项目准备,目录结构 app ...