CreateJS/TweenJS多运动路径动画开发指南

概述

本文将深入解析CreateJS/TweenJS中的MotionGuidePlugin插件在多运动路径动画中的应用。通过分析一个完整的示例，我们将了解如何实现复杂的动画效果，包括路径引导、旋转动画、自动方向对齐等高级功能。

核心概念

1. MotionGuidePlugin插件

MotionGuidePlugin是TweenJS的一个重要扩展，它允许对象沿着预定义的路径运动。这个插件需要显式安装：

createjs.MotionGuidePlugin.install(createjs.Tween);

2. 基础动画构建

示例中展示了如何创建一个简单的圆形对象并设置初始位置：

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

ball.set({x: 100, y: 100});

动画序列详解

1. 基本动画

.to({x: 150, y: 150}, 1000)
.to({rotation: -45}, 1000)

这两行代码分别实现了：

• 在1秒内移动到(150,150)坐标
• 在1秒内旋转-45度

2. 路径引导动画

.to({guide: {path: [150,150, 800,100, 800,280], orient: "auto"}}, 2000)

关键参数解析：

• path: 定义路径点数组，格式为[x1,y1, x2,y2,...]
• orient: "auto"表示对象会自动旋转以匹配路径方向

3. 反向路径动画

.to({guide: {path: [100, 100, 700, 100, 800, 280], start: 1, end: 0}}, 2000)

特殊参数：

• start: 1: 从路径终点开始
• end: 0: 到路径起点结束
• 实现了反向运动效果

4. 复合动画

.to({rotation: -360, guide: {path: [800,280, 200,280, 150,150]}}, 2000, createjs.Ease.bounceOut)

同时执行：

• 旋转动画(-360度)
• 路径引导动画
• 应用了bounceOut缓动函数

文本同步提示

示例中创建了一个文本对象，其内容随动画进度变化：

createjs.Tween.get(txt, {loop: -1, bounce: true})
    .wait(1000)
    .to({text: "Move to 150,150"}).wait(1000)
    // 更多文本变化...

高级配置

1. 循环与反弹

createjs.Tween.get(ball, {loop: -1, bounce: true}, true)

• loop: -1: 无限循环
• bounce: true: 动画完成后反向播放

2. 渲染控制

createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", stage);

使用requestAnimationFrame实现流畅动画

实际应用建议

1. 路径设计：复杂路径应先用绘图工具设计好，再转换为坐标点数组
2. 性能优化：避免在移动设备上使用过多路径点
3. 缓动函数：合理搭配缓动函数增强动画效果
4. 方向控制：orient参数对车辆、角色等需要面向移动方向的动画特别有用

调试技巧

示例中提供了暂停/继续按钮，方便调试：

<input type="button" value="toggle paused" onclick="createjs.Ticker.paused = !createjs.Ticker.paused;">

总结

通过这个多运动路径动画示例，我们全面了解了CreateJS/TweenJS中MotionGuidePlugin的强大功能。掌握这些技术后，开发者可以创建出各种复杂的路径动画效果，为网页和游戏开发增添更多可能性。