KineticJS教程（8）

作者: ysm 

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）的更多相关文章

  1. KineticJS教程（12）

    KineticJS教程(12) 作者: ysm  12.舞台 12.1.舞台的大小 舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度. <scr ...

  2. KineticJS教程（11）

    KineticJS教程(11) 作者: ysm 11.对象的上下关系 11.1.层的上下关系 Kinetic的层是按照添加到舞台的次序,由下向上排列,上层遮盖下层的图形.每个层各自有一个ZIndex编 ...

  3. KineticJS教程（10）

    KineticJS教程(10) 作者: ysm  10.在容器之间移动图形对象 Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里,这个容器指 ...

  4. KineticJS教程（9）

    KineticJS教程(9) 作者: ysm  9.选择器 Kinetic在舞台.层和组对象上都提供了get方法,用于返回这三者中包含的对象. 9.1.根据ID获取对象 要用id获取对象,首先要给对象 ...

  5. KineticJS教程（7）

    KineticJS教程(7) 作者: ysm 7.图形变换 7.1.线性变化 Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换,也就是从原始的状态线性变 ...

  6. KineticJS教程（6）

    KineticJS教程(6) 作者: ysm 6.拖拽 6.1.拖拽功能 要实现Kinetic对象的拖拽功能很简单,只需要将图形对象的draggable属性设为true就可以了. <script ...

  7. KineticJS教程（5）

    KineticJS教程(5) 作者: ysm  5.事件响应 5.1.图形的事件响应 图形对象对事件的响应处理可以使用 on() 方法绑定事件类型和相应方法. On() 方法需要一个事件类型参数和相应 ...

  8. KineticJS教程（4）

    KineticJS教程(4) 作者: ysm  4.图形样式 4.1.填充 Kinetic中图形的填充属性可以在构造方法中的config参数中的fill属性进行设定,也可以用图形对象的setFill方 ...

  9. KineticJS教程（3）

    KineticJS教程(3) 作者: ysm  3.图形对象 3.1.Shape Kinetic提供了一个Shape对象用于在层上绘制图形,我们可以通过Kinetic.Shape()构造方法返回一个S ...

随机推荐

  1. HNOI2012永无乡

    fhq treap+启发式合并,将小的合并到大的上面,复杂度NlogN. 最好的一点是通过dfs将一个子树内的元素转到另一个元素上. By:大奕哥 #include<bits/stdc++.h& ...

  2. 【左偏树+贪心】BZOJ1367-[Baltic2004]sequence

    [题目大意] 给定一个序列t1,t2,...,tn ,求一个递增序列z1<z2<...<zn , 使得R=|t1−z1|+|t2−z2|+...+|tn−zn| 的值最小.本题中,我 ...

  3. [转载]C++内存管理

    [导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...

  4. Codeforces Beta Round #10 D. LCIS 动态规划

    D. LCIS 题目连接: http://www.codeforces.com/contest/10/problem/D Description This problem differs from o ...

  5. ROS知识（4）----初级教程之常见问题汇总

    一.开机启动ROS的工作空间的路径设置失败 现象:在教程:http://wiki.ros.org/cn/ROS/Tutorials/CreatingPackage中的第5.1小节,运行以下命令失败: ...

  6. Chrome浏览器video样式控制-隐藏下载按钮

    Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式 一.如何隐藏video的 ...

  7. 修改Linux默认启动级别或模式

    在Linux中有7种启动级别,默认是X-Window,像是Windows的窗口模式,而Linux的操作和配置一般我们都采用输入命令的方式来完成,像DOS操作系统一样,如何让Linux一启动就进入这种模 ...

  8. linux下的系统调用函数到内核函数的追踪

    http://blog.csdn.net/maochengtao/article/details/23598433

  9. MySQL 自动添加DateTime

    数据库表里有个AddDate字段,DateTime类型,不能为空,添加记录时自动添加当前时间. 以前用MSSQL 在默认值写个 getdate()  就OK! MySQL写这个报错啊,迷糊! 查了一下 ...

  10. 体验NW.js打包一个桌面应用

    1.安装nw,(也可在官网下载然后配置变量) npm install nw -g 一个最最简单的nw应用,只需要有index.html和package.json文件即可 2.项目准备,目录结构 app ...