如何用HTML5、CSS、JS结合CreateJS制作含单页动画的教学幻灯片？

绝对可行！而且用CreateJS来做这个HTML5 Canvas教学幻灯片是非常合适的选择——它本身就是为Canvas上的交互式动画、富媒体内容设计的，完全能替代Animate CC的手动编码方案，后续维护和修改也更灵活，不用依赖特定软件。

为什么这个方案可行？ #

• CreateJS的模块刚好匹配你的需求：
  • EaselJS：帮你轻松管理Canvas上的2D元素（形状、文本、位图），相当于给Canvas加了一个类DOM的元素体系，方便你组织每页的内容。
  • TweenJS：专门处理动画过渡，移动、缩放、淡入淡出这些基础动画直接用它的API就能实现，不用自己写复杂的帧循环。
  • StageGL（可选）：如果幻灯片元素较多，用它可以开启WebGL加速，让动画更流畅。
• 完全脱离软件依赖：所有代码都是HTML/CSS/JS，用普通编辑器就能修改，不存在Animate CC导出后代码混乱、难以编辑的问题。
• 导航功能容易实现：可以通过监听键盘事件（左右箭头）、点击按钮来切换页面，结合CreateJS的场景管理（比如用Container作为每页的容器，切换时隐藏/显示容器或者切换舞台的子元素）就能搞定。

单页/场景内动画的实现思路与实用示例 #

不用找外部教程，直接跟着这些步骤就能上手：

1. 基础动画（移动、缩放）示例 #

先初始化CreateJS的舞台和元素，然后用TweenJS做动画：

// 初始化舞台
const stage = new createjs.Stage("canvasId");

// 创建一个矩形元素（教学幻灯片里的内容元素）
const box = new createjs.Shape();
box.graphics.beginFill("#FF0000").drawRect(0, 0, 100, 100);
box.x = 50;
box.y = 50;
stage.addChild(box);

// 移动动画：从当前位置移动到(300, 200)，耗时1秒
createjs.Tween.get(box)
  .to({x: 300, y: 200}, 1000)
  .call(() => console.log("移动完成"));

// 缩放动画：在移动完成后，缩放至2倍大小
createjs.Tween.get(box)
  .wait(1000) // 等移动动画结束
  .to({scaleX: 2, scaleY: 2}, 500);

// 开启帧循环
createjs.Ticker.addEventListener("tick", stage);

2. 单页场景的动画编排 #

把单页的所有元素放在一个Container里，统一管理动画序列：

// 创建单页容器
const page1 = new createjs.Container();
stage.addChild(page1);

// 往容器里加元素：标题、图形、文本
const title = new createjs.Text("第1页：基础动画", "24px Arial", "#333");
title.x = 100;
page1.addChild(title);

const circle = new createjs.Shape();
circle.graphics.beginFill("#0066CC").drawCircle(0, 0, 50);
circle.x = 200;
circle.y = 200;
page1.addChild(circle);

// 编排动画序列：标题淡入 → 圆形移动 → 圆形缩放
createjs.Tween.get(title).from({alpha: 0}, 800);
createjs.Tween.get(circle)
  .wait(800) // 等标题淡入
  .to({x: 400}, 1000)
  .to({scaleX: 1.5, scaleY: 1.5}, 600);

3. 幻灯片导航与场景切换 #

给舞台加导航控制，切换不同的页面容器：

// 定义多页容器
const page1 = new createjs.Container();
const page2 = new createjs.Container();
// ... 给page2添加元素和动画

// 默认显示第一页
stage.addChild(page1);
let currentPage = 1;

// 键盘导航：左箭头切上一页，右箭头切下一页
document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowRight" && currentPage === 1) {
    // 隐藏page1，显示page2，同时可以加过渡动画
    createjs.Tween.get(page1).to({alpha: 0}, 500).call(() => {
      stage.removeChild(page1);
      stage.addChild(page2);
      createjs.Tween.get(page2).from({alpha: 0}, 500);
      currentPage = 2;
    });
  } else if (e.key === "ArrowLeft" && currentPage === 2) {
    // 切回page1
    createjs.Tween.get(page2).to({alpha: 0}, 500).call(() => {
      stage.removeChild(page2);
      stage.addChild(page1);
      createjs.Tween.get(page1).from({alpha: 0}, 500);
      currentPage = 1;
    });
  }
});

4. 进阶技巧：动画时间线管理 #

如果单页动画比较复杂，可以用Timeline来编排多个动画的顺序：

const timeline = new createjs.Timeline();
// 添加多个动画到时间线
timeline.addTween(createjs.Tween.get(title).from({alpha: 0}, 800));
timeline.addTween(createjs.Tween.get(circle).wait(800).to({x:400},1000), 0); // 第二个参数是开始时间偏移
timeline.addTween(createjs.Tween.get(circle).to({scaleX:1.5, scaleY:1.5},600), 1800); // 1800ms时开始缩放

// 可以暂停、播放、跳转时间线
// timeline.pause();
// timeline.play();
// timeline.setPosition(1000); // 跳转到1秒的位置

总结 #

这个方案完全可行，而且CreateJS的API非常直观，适合手动编码实现教学幻灯片的动画和导航。上面的示例已经覆盖了你需要的核心功能：单页内的元素移动/缩放动画、幻灯片切换导航，你可以基于这些示例扩展更多复杂的动画效果。

内容的提问来源于stack exchange，提问作者Dom