CreateJs教程7章：tweenjs动画类

TweenJS是一个强大的，轻量级的动画引擎，他可以把前面通过Easel.JS绘制的对象动起来。TweenJS可以用来做补间动画，补间动画就是提供一些关键帧，其他帧会由算法自动生成。如果学习过flash补间动画的同学，应该有印象，不过这种印象似乎会暴露我们的年龄。这个技术太古老，以至于知道这个技术的人，应该都30多岁了。

TweenJS可以用在任何的DOM对象中，不一定非要用在Easel.JS绘制的图形中。例如TweenJS可以操作声音，图片、html元素等。

使用tweenjs动画

使用动画，我们需要在一个物体上使用一个tweenjs动画，这里假设在一个圆上使用这个动画，如下图：

动画tweenjs

动画tweenjs demo

需要做以下几件事情来实现这个动画：

  1. 画一个圆形。
  2. 创建一个计时器，直到达到所需的增量为止。
  3. 在每隔一段时间，清除你的蝴蝶图形。
  4. 用一个新的，稍微增加的y值重新绘制你的蝴蝶。
  5. 检查蜱数或期望的蝴蝶y位置是否达到。
  6. 清楚你的计时器

createjs.Tween实现动画

没有tweenjs之前实现一个动画比较困难，有了tweenjs，实现动画就只需要一行代码了：

createjs.Tween.get(circle)
    .to({scaleX: 3, scaleY: 4}, 5000)

这段代码是把circle这个对象在5秒钟内，其宽度(scaleX)扩大到3倍，高度(scaleY)扩大到4倍，最后如下图：

tweenjs-scale缩放

tweenjs扩大动画在线demo

由于这段简单的代码包含了很多知识，我们对这些知识再做一下简单说明。

createjs.Tween.get方法获得需要运动的对象

createjs.Tween.get方法获取需要运动的对象。get方法是静态类Tween的静态方法。这个方法有一个参数，就是它的目标，也就是你想要运动的对象。

Tween ( target  [props] )

get ( target  [props] ) Tween static
  • target : 设置一个对象，这个对象的属性将被tweenjs操作。target是需要运动的对象。
  • [props] : 可选的属性对象。
  • 返回值Tween，这个是返回的自己，这样可以容易的级联调用。

createjs.Tween.to方法，让对象运动起来

to函数为某个属性添加渐变动画，to有去的意思，这个函数的意思就是将某个属性从一个值渐变为另一个值，从而实现动画的效果。关于属性的变化有2种情况：

  1. 如果需要变化的属性是数字，那么会随着duration时间，逐渐变为最终值。
  2. 如果需要变化的属性不是数字，那么会在duration时间结束后，直接变为最终值

也就是说，1是渐变，2是突变。

其原型如下：

to ( props  [duration=0]  [ease="linear"] ) Tween chainable
  • props：指定某些属性最终要变化到的值
  • [duration=0]：可选参数，动画的过渡时间
  • [ease="linear"]：动画变化函数，默认是线性变化linear，关于其他几种变化方式，后面再讲解ease动画
  • Tween：返回一个Tween的实例，用于级联调用

createjs.Tween动画案例

本课的最后，讲一个动画效果，如下：

tweenjs扩大动画在线demo

<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Simple Tweening Example</title>

	<link href="../tween_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../tween_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../tween_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../tween_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../tween_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>

<script id="editable">
	function init() {
		// 1
		stage = new createjs.Stage("canvas1");

		// 2
		var circle = new createjs.Shape();
		circle.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
		circle.x =  stage.canvas.width / 2;
		circle.y = 150;

		// 3
		var highlight = new createjs.Shape();
		highlight.graphics.beginFill("#FFFF66").drawRect(-50, -5, 100, 30);
		highlight.x = 450;
		highlight.y = 30;

		// 4
		var txt = new createjs.Text("TweenJS", "bold 20px Arial");
		txt.textAlign = "center";
		txt.x = 450;
		txt.y = 30;

		// 5
		stage.addChild(circle, highlight, txt);

		// 6
		createjs.Tween.get(circle)
			.to({scaleX: 3, scaleY: 4}, 5000)
	
		// 7
		createjs.Ticker.framerate = 20;
		createjs.Ticker.addEventListener("tick", stage);
	}
</script>
</head>

<body onload="init();">

<header class="TweenJS">
	<h1>TweenJS 动画例子</h1>

	<p>本案例主要说明怎么使用Tweenjs</p>
</header>

<canvas id="canvas1" width="960" height="350"></canvas>
<br/>
<input type="button" value="toggle paused"
	   onclick="createjs.Ticker.paused = !createjs.Ticker.paused;">
</body>
</html>

虽然这段代码非常简单，但是还是简要介绍一下：

  • 引入的几个css文件（shared.css、examples.css、tweenjs.css）都是样式，由于tweenjs是动画库，不是样式库，所以这些样式其实只是美化界面的作用。你可以打开tweenjs.css看一下，这个css看上去是tweenjs提供的默认css，其实里面基本什么也没有，这说明css文件，其实并不重要
  • 代码接下来引入了js文件（easeljs-NEXT.min.js、tweenjs-NEXT.js），这2个js文件非常重要，属于动画库，必须引入。
  • init()函数，当事件onload发生时被调用，onload表示页面加载完成，包括css，js等加载完成。
  • 第1处代码：我们需要初始化一个舞台，简单来说就是一块用来绘制的画布，通过new createjs.Stage创建一个舞台，传入canvasId，从而创建Stage实例。
  • 第2处代码：创建一个形状，该形状为矢量形状，通过createjs.Shape类可以创建，我们需要new出实例，然后调用实例绘制方法，传入填充形状的颜色，和具体的形状类型。drawCircle是绘制一个圆形，填入坐标圆心位置和半径即可。然后我们可以设置图形实例的xy坐标从而改变形状在舞台上的位置。
  • 第3处代码：这段代码和第2段代码类似，不过这里我们调用drawRect绘制的是矩形，前两个参数是xy坐标，后面的参数是宽高
  • 第4处代码：在舞台上创建文本，new createjs.Text创建文本实例，传入我们需要的文字和样式，通过xy改变在舞台上的坐标位置
  • 第5处代码：把创建的舞台元素添加的舞台上，只有把元素添加至舞台，元素才能真正被渲染
  • 第6处代码：这里我们为创建的圆形添加上缓动动画，通过Tween类创建，传入需要执行动画的目标元素，然后设置需要展示的动画属性，最后添加上过渡时间即可完成动画
  • 第7处代码：设置舞台的刷新帧率，可以理解成舞台每秒渲染画面的次数，理论上帧率越高动画执行越流畅，也要考虑到设备实际渲染的能力，传入适合的值，这里我们设置帧率为20，然后让cratejs去监听舞台的心跳事件。如果去掉第7处的代码，那么界面就不会刷新了，可能你什么都看不到。