如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画

CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。

一个简单的tick动画看起来是这样的：

 var stage, circle;
    function init(){
        stage = new createjs.Stage(document.getElementById('game'));
        createjs.Ticker.addEventListener("tick", handleTick);
        createjs.Ticker.setFPS(60);
        circle = new createjs.Shape();
        circle.graphics.f("red").dc(0,0,50);
        circle.x = 0;
        circle.y = 100;
        stage.addChild(circle);

        circle.addEventListener("click", function(event){
            createjs.Ticker.setPaused(!createjs.Ticker.getPaused());
        });

    }

    function handleTick(event){
    if(!event.paused){
        circle.x +=5;
        if(circle.x > 1000){
            circle.x = 0;
        }
    }
        stage.update();
    }

每个时间周期，circle的x+5，很自然circle就会在页面上从左到右的移动，可以给circle添加一个鼠标点击事件让动画暂停运行，当鼠标按下，使用createjs.Ticker.getPaused()获取当前运行状态，并使用setPaused做成相反的赋值，参数event的paused属性作为动画开关，点击就可以暂停。

event参数还包含了其他重要的属性，比如使用event.delta可以获取刷新的时间间隔。

既然用Ticker可以完成动画，TweenJS又有什么作用呢？

使用TweenJS可以帮助开发者创建较复杂的动画效果，以及通过设置CSS来实现CSS动画，在Ticker动画中，完成一个直线运动的例子比较简单，如果要是想比较复杂的动画效果，比如让小球在桌面方形轨迹运动，或实现小球碰到墙之后的弹力效果，使用Ticker实现起来就比较复杂（当然也可以通过一些Math函数，实现一些复杂的运动轨迹）。

先从上面的例子开始，让小球在屏幕上来回移动，使用TweenJS来实现的只需要：

<pre class="javascript" name="code">   var stage, circle;
    function init(){
        stage = new createjs.Stage(document.getElementById('game'));
        createjs.Ticker.addEventListener("tick", handleTick);
        createjs.Ticker.setFPS(60);
        circle = new createjs.Shape();
        circle.graphics.f("red").dc(0,0,50);
        circle.x = 0;
        circle.y = 100;
        stage.addChild(circle);
        createjs.Tween.get(circle,{loop:true}).to({x:1000},2000);
		//只需要加这一句
    }

    function handleTick(event){
        stage.update();
    }

是不是简单了不少！

1.要想使用TweenJS，首先要在HTML中导入js库

<script src="tweenjs-0.6.1.min.js"></script>

2.调用方式

扫描二维码关注公众号，回复： 5675392 查看本文章

createjs.Tween.get().wait().to().call();

使用get()获取要添加运动轨迹的元素，如果需要动画循环进行，只需要加上{loop:true}，当然还有其他选项，比如override

wait()可以让动画延迟播放

to()来确定运动的轨迹，只需要指明你打算让circle到达的位置坐标即可，TweenJS会自动为你创建动画过程，to()的第一个参数{x:1000}，指明了x坐标的终点，而且在{}中不只可以改变坐标，alpha:0.5可以改变透明度，scaleX/Y = 2可以改变大小，rotation:360可以改变角度，实现旋转；to()的第二个参数，指明动画的时常，也是就是x坐标运动到终点所用的时间，这里还有第三个参数createjs.Ease，可以设置运动的轨迹和运动的方式。

call(),可以在动画结束后，调用一个函数，当然也可以省略如果不需要的话。

3.想让你的元素做连续的复杂运动，只要不断的添加to()就可以了，比如让小球做方形轨迹的运动，并且在过程中改变大小，透明度

 createjs.Tween.get(circle,{loop:true}).to({x:900},2000)
                .to({y:600,alpha:0.2},2000)
                .to({x:100,alpha:1, scaleX:1.5,scaleY:1.5},2000)
                .to({y:100, scaleX:1,scaleY:1},2000);

to()的第三个参数，createjs.Ease可以实现复杂的运动轨迹，比如要实现一个小球落地效果，落地后再弹几下，只需要加一个createjs.Ease.bounceOut

createjs.Tween.get(circle,{loop:true}).wait(200).to({y:650},1000,createjs.Ease.bounceOut);

使用Ease可以控制运动的轨迹，实现曲线的运动，还可以控制运动过程，比如先加速再减速等，在Tweenjs官方示例中有两个可以用来观察Ease提供的各个参数对运动过程产生的影响，

http://andysaia.com/blog/tweenjs/

http://www.createjs.com/demos/tweenjs/tween_sparktable

基本的Tween用法就是这些，通过连续的to()和Createjs.Ease组合，可以创建出很复杂的动画效果，在TweenJS中,还包含了几个插件，CSSPlugin和MotionGuidePlugin他们并不直接包含在导入的tweenjs-0.6.1.min.js当中，想使用的话，打开Tweenjs目录，在src文件夹下面的tweenjs中可以找到，以CSSPlugin为例吧

导入CSSPluginjs库

<script src="CSSPlugin.js"></script>

createjs.CSSPlugin.install(createjs.Tween);
        var box = document.createElement("div");
        box.style.width = "100px";
        box.style.height = "100px";
        box.style.position = "absolute";
        box.style.borderRadius = "8px";
        box.style.backgroundColor = "#0F0";

        document.body.appendChild(box);

首先调用install方法，然后就可以设置被选取得页面元素的style来修改它的css

有个例子作为参考：

<script>
	var colorSeed = 0;

	function init() {
		createjs.CSSPlugin.install(createjs.Tween);

		createjs.Ticker.setFPS(20);
		var count = 600;
		while (--count >= 0) {
			var box = document.createElement("div");
			box.style.width = "6px";
			box.style.height = "2px";
			box.style.position = "absolute";
			box.style.borderRadius = "2px";
			box.style.backgroundColor = "#0F0";
			document.body.appendChild(box);
			var a = (Math.random() * Math.PI * 2 * 16 | 0) / 16;
			box.style.webkitTransform = "rotate(" + a + "rad)";
			var d = 30;
			box.style.left = window.innerWidth / 2 + Math.cos(a - 0.2 - Math.random()) * d + "px";
			box.style.top = window.innerHeight / 2 + Math.sin(a - 0.2 - Math.random()) * d + "px";
			d = (Math.min(window.innerWidth, window.innerHeight) - 16) / 2 * (Math.random() * 0.3 + 0.7);
			var x = window.innerWidth / 2 + Math.cos(a) * d;
			var y = window.innerHeight / 2 + Math.sin(a) * d;
			createjs.Tween.get(box, {loop: true}, true).set({opacity: "0"}, box.style).wait(Math.random() * 1000 + 1 | 0).call(updateColor).to({top: y, left: x, width: 16, height: 4, opacity: 1}, Math.random() * 1500 + 1000, easeIn);
		}
		// tween the base color that divs will be assigned when they start moving:
		createjs.Tween.get(this, {loop: true}).to({colorSeed: 360}, 5000);
	}

	function updateColor(tween) {
		// grab the tween's target (the style object), and update it's color
		tween._target.style.backgroundColor = "hsl(" + (Math.random() * 60 + colorSeed | 0) + ",100%,50%)";
	}

	// very simple easing equation:
	function easeIn(ratio) {
		return ratio * ratio;
	}

</script>

如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画

猜你喜欢