CreateJS 学习4 动画、TweenJS

水平移动动画示例

<html><head><script src="easeljs.min.js" charset="utf-8"></script></head><body><canvas id="canvas" width="500" height="300"></canvas><script>var canvas = document.getElementById("canvas");var stage = new createjs.Stage(canvas);//直接使用canvas的IDvar shape=new createjs.Shape();shape.graphics.beginFill("red").drawRect(0,0,50,50);  createjs.Ticker.addEventListener("tick", tick);createjs.Ticker.setFPS(60);stage.addChild(shape);function tick(e) {if(shape.x>stage.canvas.width){  shape.x=0;  }  shape.x++;  stage.update();}</script></body>
</html>

TweenJS

补间动画

中文文档：
http://www.createjs.cc/tweenjs/docs/modules/TweenJS.html

简单的补间动画

这个渐变将渐变目标alpha属性用一秒从0渐变到1,然后调用handleComplete函数。

<html><head><script src="easeljs.min.js" charset="utf-8"></script><script src="tweenjs.min.js" charset="utf-8"></script></head><body><canvas id="canvas" width="500" height="300"></canvas><script>var canvas = document.getElementById("canvas");var stage = new createjs.Stage(canvas);//直接使用canvas的IDvar shape=new createjs.Shape();shape.graphics.beginFill("red").drawRect(0,0,50,50);  createjs.Ticker.addEventListener("tick", tick);createjs.Ticker.setFPS(60);stage.addChild(shape);shape.alpha=0;createjs.Tween.get(shape).to({alpha:1},1000).call(handleComplete);function handleComplete(){console.log('end');}function tick(e) {stage.update();}</script></body>
</html>

可链式编程的补间动画

 target.alpha = 1;createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 1000).call(handleComplete);function handleComplete() {//渐变完成执行}

水平移动tweenjs代码

<html><head><script src="easeljs.min.js" charset="utf-8"></script><script src="tweenjs.min.js" charset="utf-8"></script></head><body><canvas id="canvas" width="500" height="300"></canvas><script>var canvas = document.getElementById("canvas");var stage = new createjs.Stage(canvas);//直接使用canvas的IDvar shape=new createjs.Shape();shape.graphics.beginFill("red").drawRect(0,0,50,50);  createjs.Ticker.addEventListener("tick", tick);createjs.Ticker.setFPS(60);stage.addChild(shape);var position={x:100,y:0};var tween = new createjs.Tween.get(shape,{loop:true}).to({x:500},2000);function tick(e) {stage.update();}</script></body>
</html>

说明：

get()获取要添加运动轨迹的元素
如果需要动画循环进行，只需要加上{loop:true}，还有其他选项，比如override
wait()可以让动画延迟播放
to()来确定运动的轨迹
to()的第一个参数{x:1000}，指明了x坐标的终点，而且在{}中不只可以改变坐标，
alpha:0.5可以改变透明度，
scaleX/Y = 2可以改变大小，
rotation:360可以改变角度，实现旋转；
to()的第二个参数，指明动画的时常，也是就是x坐标运动到终点所用的时间，
第三个参数createjs.Ease，可以设置运动的轨迹和运动的方式。
call(),可以在动画结束后，调用一个函数。

一个复杂点的链式操作

<html><head><script src="easeljs.min.js" charset="utf-8"></script><script src="tweenjs.min.js" charset="utf-8"></script></head><body><canvas id="canvas" width="500" height="300"></canvas><script>var canvas = document.getElementById("canvas");var stage = new createjs.Stage(canvas);//直接使用canvas的IDvar circle=new createjs.Shape();circle.graphics.beginFill("red").drawCircle(20,20,50);  createjs.Ticker.addEventListener("tick", tick);createjs.Ticker.setFPS(60);stage.addChild(circle);var position={x:100,y:0};createjs.Tween.get(circle,{loop:true}).to({x:500},2000)  .to({y:300,alpha:0.2},2000)  .to({x:100,alpha:1, scaleX:1.5,scaleY:1.5},2000)  .to({y:100, scaleX:1,scaleY:1},2000);  function tick(e) {stage.update();}</script></body>
</html>

效果：

弹跳效果

<html><head><script src="easeljs.min.js" charset="utf-8"></script><script src="tweenjs.min.js" charset="utf-8"></script></head><body><canvas id="canvas" width="500" height="700"></canvas><script>var canvas = document.getElementById("canvas");var stage = new createjs.Stage(canvas);//直接使用canvas的IDvar circle=new createjs.Shape();circle.graphics.beginFill("red").drawCircle(60,20,50);  createjs.Ticker.addEventListener("tick", tick);createjs.Ticker.setFPS(60);stage.addChild(circle);createjs.Tween.get(circle,{loop:true}).wait(200).to({y:450},2000,createjs.Ease.bounceOut);  function tick(e) {stage.update();}</script></body>
</html>

其它更多Ease效果演示：
http://andysaia.com/blog/tweenjs/
更多demo：
https://www.createjs.com/demos/tweenjs/tween_circles

逐帧动画

<html><head><script src="easeljs.min.js" charset="utf-8"></script></head><body><canvas id="canvas" width="500" height="300"></canvas><script>var canvas = document.getElementById("canvas"),stage = new createjs.Stage(canvas);function setup() {var spritesheet = new createjs.SpriteSheet({"images": ['http://www.igeekbar.com/igeekbar/networks/uploadimgthumb/7a59e1d8-ac16-47d7-a642-fd626cbf3efe.jpg'],"frames": {"height": 195, "count": 11, "width": 313},"animations": { run: [0,10]}});var character = new createjs.Sprite(spritesheet, "run");character.framerate = 11; character.play();//播放动画stage.addChild(character);createjs.Ticker.addEventListener("tick", tick);}function tick(event) {stage.update();}setup();</script></body>
</html>

动画图片：

运行效果：

参考：
http://blog.csdn.net/lanix516/article/details/47323573

另外tweenjs还有 CSSPluginjs、MotionGuidePlugin插件库。

CreateJS 学习4 动画、TweenJS相关推荐

iOS学习——核心动画之Layer基础
iOS学习--核心动画之Layer基础 1.CALayer是什么? CALayer我们又称它叫做层.在每个UIView内部都有一个layer这样一个属性,UIView之所以能够显示,就是因为它里面有这 ...
学习UE4动画蓝图：实现双脚贴地
目标在上一篇博客<学习UE4动画蓝图:配置脚部IK>中,IK功能解决了"脚部陷入地下"的问题,但是还是有"脚部悬空"的问题.<[UE4蓝图] ...
系统学习iOS动画之六：3D动画
本文是我学习<iOS Animations by Tutorials> 笔记中的一篇. 文中详细代码都放在我的Github上 andyRon/LearniOSAnimations. 到目前 ...
kotlin设置按钮不可点击_3dmax渲染720全景效果图动画流程，学习VR动画不可错过的必备知识...
3dmax渲染720全景效果图动画流程,学习VR动画不可错过的必备知识 7 20全景效果图是这几年全国兴起的一门小技术,是适应快速.立体.多方位看图的一个重要方法.今天我就来说一下,制作720全景动画 ...
[0 to 0.5]从零开始学习Android动画知识(下)
[0 to 0.5]从零开始学习Android动画知识(下) 矢量动画(Scalable Vector Graphics) 不同于前面的为控件做动画效果的方法,矢量动画则是为图形做出动画效果矢量图 ...
如何高效的学习Android动画
前言本篇文章就是在知乎回答的一个问题,这里记录下,以后看到我博客的朋友也可以看到. 曾经也同楼主一样,对Android中的动画不是很清楚,什么帧,Tween,属性等等,很多知识,也很琐碎,后来觉得动 ...
高效学习Android动画
当时系统学习Android动画还有一部分原因:将来成为一个android组件开发工程师,如果想做出一些高性能,nice的动画就必须对动画的基础知识有深入的理解,因此就打算系统的学习一下.经过一段时间的 ...
系统学习iOS动画之七：其它类型的动画
本文是我学习<iOS Animations by Tutorials> 笔记中的一篇. 文中详细代码都放在我的Github上 andyRon/LearniOSAnimations. 前面学 ...
[0 to 0.5]从零开始学习Android动画知识(中)
[0 to 0.5]从零开始学习Android动画知识(中) 属性动画(Property Animation) 属性动画(Property Animation)是在 Android 3.0(API 1 ...