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套件中的TweenJS是一个轻量级但功能强大的JavaScript补间动画引擎，它为Web开发者提供了创建流畅动画效果的便捷方式。本文将通过分析一个基础示例，深入讲解TweenJS的核心功能和使用方法。

示例概述

这个示例展示了TweenJS的几个关键特性：

1. 基本的补间动画创建
2. 动画链式调用
3. 回调函数的使用
4. 全局暂停控制
5. 循环动画设置

核心代码解析

1. 基础设置

首先需要初始化舞台(Stage)和显示对象：

stage = new createjs.Stage("canvas1");

var circle = new createjs.Shape();
circle.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
circle.x = circle.y = 50;

这里创建了一个红色圆形作为主要动画对象，以及一些文本和矩形作为辅助显示对象。

2. 基础补间动画

最简单的补间动画示例：

createjs.Tween.get(circle, {loop: -1})
    .wait(1000)
    .to({scaleX: 0.2, scaleY: 0.2})
    .wait(1000)
    .to({scaleX: 1, scaleY: 1}, 1000, createjs.Ease.bounceOut)

这段代码实现了：

• 等待1秒
• 立即缩小到0.2倍
• 再等待1秒
• 使用反弹效果动画回到原始大小
• loop: -1参数使动画无限循环

3. 复杂动画链

更复杂的动画链示例：

createjs.Tween.get(circle, {loop: -1, override:false})
    .to({x: 500, y: 200, alpha: 0.1}, 1000, createjs.Ease.get(1))
    .to({x: 50}, 1000, createjs.Ease.get(-1))
    .call(console.log, ["wait..."], console)
    .wait(700)
    .to({y: 50, alpha: 1}, 300)
    .call(console.log, ["done!"], console);

这段代码展示了：

• 多属性同时动画(x,y,alpha)
• 不同的缓动函数(createjs.Ease.get(1)和get(-1))
• 回调函数的使用(.call)
• 动画过程中的等待(.wait)
• override:false参数表示不覆盖之前的动画

4. 文本动画与全局暂停

createjs.Tween.get(txt, {loop: -1, ignoreGlobalPause: true})
    .to({text: "A JavaScript tweening engine"}, 1500)
    .set({visible: false}, highlight)
    .to({text: "by Grant Skinner & gskinner"}, 1500)
    .to({text: "TweenJS"}, 1500).set({visible: true}, highlight);

这段代码的特殊之处：

• 文本内容的动画变化
• 同时控制其他对象的属性(.set)
• ignoreGlobalPause: true使动画不受全局暂停影响

关键概念详解

1. 缓动函数(Easing)

TweenJS提供了多种缓动函数来控制动画的速度变化：

• createjs.Ease.bounceOut：反弹效果
• createjs.Ease.get(1)：缓出效果
• createjs.Ease.get(-1)：缓入效果

2. 动画链方法

TweenJS提供了一系列链式方法：

• .to()：动画到指定属性
• .wait()：等待指定毫秒
• .call()：调用函数
• .set()：立即设置属性

3. 全局控制

通过Ticker可以控制全局动画：

createjs.Ticker.framerate = 20; // 设置帧率
createjs.Ticker.paused = true/false; // 暂停/继续所有动画

实际应用建议

1. 性能优化：合理设置帧率，20-30fps通常足够
2. 动画组合：使用多个简单动画组合复杂效果
3. 回调使用：在动画关键节点添加回调处理业务逻辑
4. 全局控制：利用Ticker管理整体动画状态

总结

通过这个简单示例，我们学习了TweenJS的核心功能。TweenJS的强大之处在于其简洁的API和灵活的动画控制能力，适合各种Web动画场景。掌握这些基础后，开发者可以创建出更加复杂和吸引人的动画效果。

建议读者可以尝试修改示例中的参数，如动画时间、缓动函数等，观察不同效果，这是理解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