TweenJS类库主要用来调整和动画HTML5和Javascript属性。提供了简单并且强大的tweening接口。支持数字对象属性和CSS样式属性,允许你使用链式语法来生成复杂的过程
设置一个Tween,你需要调用Tween(target, [props], [pluginData])构建器,参数如下:
target - 调整属性的对象
-
props - 相关属性的配置,例如({loop:true, paused:true}), 所有属性缺省为false。支持的属性如下:
- loop: 设置循环
- useTicks: 使用ticks来设置持续而不使用毫秒
- ignoreGlobalPause: 设置忽略全局暂停
- override: 如果为true,Tween.removeTweens(target) 将会被调用来移除其他同一个对象上的tween
- paused: 设置是否启动暂停的tween
- position: 设置出示的tween位置
- onChange: specifies a listener for the "change" event.
pluginData - 一个包含安装插件数据的对象
Tween类针对一个对象设置tween相关属性。实例方法可以被链式操作,方便编辑序列。这是一个简单但是强大的类
- to(pros.duration,ease)方法,针对目标属性队列一个tween从初始值到当前值,设置duration为0则立刻跳到指定值。数字类型的值,会从目前值调整到设置的值。而非数字属性则会在持续时间结束时被设置
- wait(duration,passive) 队列一个等待(一个空的tween)
- call(callback,params,scope) 队列一个指定方法的调用
TweenJS 支持大量的ease(缓动),由Ease类定义
使用示例:
var canvas = document.getElementById('myCanvas'),
stage = new createjs.Stage(canvas);
var stageWidth = canvas.width;
var stageHeight = canvas.height;
var characterWidth = 75;
var characterHeight = 96;
var spritesheet;
var charactor;
window.onload = function(){
spritesheet = new createjs.SpriteSheet({
'images': ['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],
'frames': {"height": 96, "count": 10, "width": 75}
});
charactor = new createjs.Sprite(spritesheet);
charactor.x = (stageWidth - characterWidth)/2;
charactor.y = (stageHeight - characterHeight)/2;
stage.addChild(charactor);
charactor.play();
/*
* 以下代码生成了tween动画人物相关效果
*/
// 生成上下移动人物效果(一次性)
createjs.Tween.get(charactor, {loop:false})
.to({y:150}, 500, createjs.Ease.quadInOut)
.to({y:50}, 500, createjs.Ease.quadInOut);
// 生成人物左右移动效果(无限循环)
createjs.Tween.get(charactor, {loop:true})
.wait(3000)
.call(charactor.gotoAndStop, [5], charactor)
.wait(300)
.to({x:450}, 1200, createjs.Ease.backInOut)
.call(charactor.gotoAndStop, [0], charactor)
.wait(2000)
.call(charactor.gotoAndStop, [5], charactor)
.wait(300)
.to({x:(stageWidth - characterWidth)/2}, 500, createjs.Ease.backInOut)
.call(charactor.gotoAndStop, [0], charactor);
createjs.Ticker.setFPS(35);
createjs.Ticker.addEventListener("tick", tick);
function tick(){
stage.update();
}
};