CreateJS/TweenJS 入门教程：简单补间动画实现详解

CreateJS/TweenJS 入门教程：简单补间动画实现详解

TweenJS A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries. 项目地址: https://gitcode.com/gh_mirrors/tw/TweenJS

前言

CreateJS是一套强大的HTML5动画和交互库集合，其中的TweenJS模块专门用于创建平滑的补间动画效果。本文将通过分析一个简单的弹跳球动画示例，深入讲解TweenJS的核心用法和实现原理。

示例概述

这个简单示例展示了一个红色小球从画布顶部下落，弹跳后向右移动，最后放大的动画过程。整个过程流畅自然，充分展现了TweenJS在动画控制方面的能力。

核心代码解析

1. 初始化阶段

var canvas, stage;

function init() {
    canvas = document.getElementById("testCanvas");
    stage = new createjs.Stage(canvas);

首先获取canvas元素并创建EaselJS的舞台(Stage)对象，这是所有显示对象的容器。

2. 创建显示对象

var ball = new createjs.Shape();
ball.graphics.setStrokeStyle(5, 'round', 'round');
ball.graphics.beginStroke('#000000');
ball.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
ball.graphics.setStrokeStyle(1, 'round', 'round');
ball.graphics.beginStroke('#000000');
ball.graphics.moveTo(0, 0);
ball.graphics.lineTo(0, 50);
ball.graphics.endStroke();

这段代码创建了一个圆形Shape对象，并设置了以下属性：

• 5像素宽的黑色描边
• 红色填充
• 半径50像素的圆形
• 从圆心向下延伸50像素的直线（模拟球体的"阴影"效果）

3. 设置初始位置

ball.x = 200;
ball.y = -50;

将小球初始位置设置在画布上方(y坐标为-50)，为后续下落动画做准备。

4. 创建补间动画

createjs.Tween.get(ball, {loop: -1})
    .to({x: ball.x, y: canvas.height - 55, rotation: -360}, 1500, createjs.Ease.bounceOut)
    .wait(1000)
    .to({x: canvas.width - 55, rotation: 360}, 2500, createjs.Ease.bounceOut)
    .wait(1000)
    .to({scaleX: 2, scaleY: 2}, 2500, createjs.Ease.quadOut)
    .wait(1000)

这是整个示例的核心部分，使用TweenJS创建了一个复杂的动画序列：

1. createjs.Tween.get(ball, {loop: -1}) - 获取ball对象的Tween实例，并设置无限循环

2. 第一个.to()动画：

   • 目标属性：保持x不变，y移动到画布底部，旋转-360度
   • 持续时间：1500毫秒
   • 缓动函数：bounceOut（模拟弹跳效果）

3. .wait(1000) - 暂停1000毫秒

4. 第二个.to()动画：

   • 目标属性：x移动到画布右侧，旋转360度
   • 持续时间：2500毫秒
   • 缓动函数：bounceOut

5. 第三个.to()动画：

   • 目标属性：x和y方向都放大到2倍
   • 持续时间：2500毫秒
   • 缓动函数：quadOut（二次缓出）

5. 添加到舞台并启动动画

stage.addChild(ball);
createjs.Ticker.addEventListener("tick", stage);

将小球添加到舞台，并注册Ticker事件来持续更新舞台。

关键技术点解析

1. 缓动函数(Easing)

TweenJS提供了多种缓动函数，控制动画的速度变化。本示例使用了：

• bounceOut：模拟物体弹跳的效果
• quadOut：二次缓出，动画结束时速度逐渐减慢

2. 链式调用

TweenJS支持链式调用，可以方便地创建复杂的动画序列。每个.to()或.wait()都会在上一个动画完成后执行。

3. 循环动画

通过{loop: -1}参数设置动画无限循环，也可以指定具体循环次数。

4. 复合动画

单个.to()可以同时改变多个属性（如位置、旋转、缩放等），TweenJS会自动处理这些属性的同步变化。

实际应用建议

1. 性能优化：对于复杂的动画场景，可以考虑使用createjs.Ticker.setFPS()限制帧率

2. 动画组合：可以将多个Tween组合使用，创建更复杂的交互效果

3. 事件监听：TweenJS支持添加各种事件监听，如change、complete等

4. 缓动函数选择：根据实际效果需求选择合适的缓动函数，可以大大提升动画表现力

总结

通过这个简单的示例，我们学习了TweenJS的基本使用方法。TweenJS的强大之处在于它简洁的API和丰富的功能，开发者可以用很少的代码实现复杂的动画效果。掌握TweenJS的核心概念后，可以轻松创建各种网页动画效果，提升用户体验。

TweenJS A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries. 项目地址: https://gitcode.com/gh_mirrors/tw/TweenJS