EaselJS简明教程2-动画

最新推荐文章于 2021-06-19 05:30:00 发布

whqet

最新推荐文章于 2021-06-19 05:30:00 发布

阅读量8.5k

点赞数 4

分类专栏： html5 javascript canvas&svg 文章标签： canvas createJS 简明教程

本文链接：https://blog.csdn.net/whqet/article/details/19234055

版权

系列教程目录

EaselJS简明教程1-绘图

EaselJS简明教程2-动画

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