系列教程目录
EaselJS简明教程2动画,动画是将静止的画面变为动态的艺术,由静止到动态的实现,主要依靠人眼的视觉残留效应。
动画可以分为逐帧动画和补间动画两种,逐帧动画把动画(例如人物动作)进行分解,然后绘制出连续的、具有代表性的动作,连续播放形成动画,逐帧动画适用于复杂的不连续的动画。
补间动画,指我们给定动作的初始状态和结束状态,然后动画系统(例如动画软件)自动补齐中间状态,从而形成动画,补间动画适用于物体的移动、状态的改变等简单的动画。
1.逐帧动画
首先看看我的codepen上的实例一。
<canvas id="testCanvas" width="960" height="400"></canvas>
// 创建stage并把它放到舞台上
stage = new createjs.Stage(document.getElementById("testCanvas"));
// 定义SpriteSheet
var ss = new createjs.SpriteSheet({
"animations":
{
"run": [0, 25, "jump"],
"jump": [26, 63, "run"]},
"images": ["http://createjs.com