核心原理
想象一下，你有一张写满字的纸（文字层），还有一张同样大小的白纸（遮罩层），一开始，白纸完全盖住文字，你用剪刀在这张白纸上剪出一个“口”字，并让这个“口”字从左到右移动，随着“口”字的移动，下面的文字就会一点点地被“露”出来，这个“口”字和它的移动轨迹,就是我们的遮罩动画。
（图片来源网络，侵删）
详细教程步骤
我们将制作一个简单的场景：一行标题文字“欢迎使用Animate”,让它从左到右逐字出现。
第一步：创建新文档并设置文字
- 打开 Adobe Animate，点击
文件>新建。 - 在弹出的窗口中，选择
ActionScript 3.0或ActionScript 3.0 AIR（对于这个基础动画，两者没有区别），然后点击“确定”。 - 在
属性面板中，设置舞台的大小，800 x 400像素,背景色为你喜欢的颜色。 - 创建文字：
- 选择左侧工具栏中的 文本工具。
- 在舞台上点击一下，输入你想要显示的文字，欢迎使用Animate”。
- 在右侧的
属性面板中，设置好字体、字号、颜色等,让文字看起来美观。
第二步：将文字转换为图形元件
为了方便后续操作,我们最好将文字转换为一个可编辑的图形元件。
- 选中你刚刚创建的文字。
- 右键点击文字，选择
转换为元件。 - 在弹出的窗口中，命名为“我的文字”，类型选择为 “图形”，然后点击“确定”。
第三步：创建遮罩层
这是最关键的一步。
- 在图层面板中,确保你的文字层是当前选中的层。
- 点击图层面板下方的 “插入图层” 按钮，新建一个图层，我们可以将它命名为“遮罩层”。
- 调整图层顺序：将新建的“遮罩层”拖拽到“我的文字”层的上方。
第四步：在遮罩层上绘制遮罩形状
- 锁定“我的文字”层（点击眼睛图标下方的锁头图标）,防止误操作。
- 选中“遮罩层”。
- 选择 矩形工具。
- 在舞台上绘制一个细长的矩形，这个矩形的宽度应该刚好能覆盖一个字，高度则要完全覆盖住文字的高度。
第五步：创建逐字出现的动画
我们要让这个遮罩矩形从左到右移动,从而实现文字逐字出现的效果。
（图片来源网络，侵删）
-
设置关键帧：
- 在“遮罩层”的第 1 帧，确保你的矩形在最左边,完全覆盖第一个字。
- 在时间轴上，点击“遮罩层”的第 1 帧，按
F6插入一个关键帧,这一帧是我们的起始点。 - 将时间轴的播放头拖到足够远的帧数，比如第 60 帧（根据你的文字长度和想要的动画速度来定），在第 60 帧按
F6再插入一个关键帧。
-
创建移动补间动画：
- 在“遮罩层”的时间轴上，点击选中第 1 帧到第 60 帧之间的任意一帧（灰色背景的帧）。
- 在
属性面板中，找到 “补间” 选项，将其设置为 “动画”，你会看到帧之间出现了一条绿色的箭头,这表示移动补间动画已成功创建。
-
移动遮罩矩形到终点：
- 保持选中第 60 帧。
- 在舞台上，将你绘制的那个细长矩形水平拖拽到最右边,让它完全移出文字区域的右侧。
-
应用遮罩效果：
（图片来源网络，侵删）- 在图层面板中，右键点击“遮罩层”的名称。
- 在弹出的菜单中选择 “遮罩层”。
- 你会看到，“我的文字”层会向右缩进，并显示在遮罩层下面，图层名称也会变为“被遮罩”。
按 Ctrl + Enter (Windows) 或 Cmd + Enter (Mac) 测试你的影片！你应该能看到文字一行一行地从左边“写”出来了。
进阶技巧与优化
技巧1：如何让文字“打字机”效果更平滑？
上面的方法是一个字一个字地跳出来的，如果想模拟真实的打字机效果，每个字是连续出现的,可以这样做：
- 将矩形变窄：在第四步绘制遮罩矩形时，把矩形的宽度设置得比一个字还要窄,比如半个字的宽度。
- 调整动画长度：根据文字总长度，相应地延长动画的总帧数，让矩形移动得更慢、更平滑。
这样，遮罩就会像光标一样，连续地扫过文字,而不是跳跃。
技巧2：如何让光标有闪烁效果？
- 新建图层：在“遮罩层”上方再新建一个图层，命名为“光标”。
- 绘制光标：在“光标”层上，用矩形工具画一个细长的竖条,作为光标。
- 制作闪烁动画：
- 在“光标”层的第1帧,让光标出现在文字末尾。
- 在第2帧按
F6插入关键帧，然后在舞台上按Delete键删除光标。 - 在第3帧按
F6插入关键帧,重新绘制光标。 - 在第4帧按
F6插入关键帧，再按Delete删除光标。 - 如此反复，在第5、7、9...等奇数帧都保留光标，在第6、8、10...等偶数帧都删除光标。
- 同步动画：在“光标”层的最后一帧（比如第60帧）也插入一个关键帧，并确保光标是显示状态，在第1帧和最后一帧之间创建“传统运动补间”或“补间动画”,让光标跟随文字一起移动。
技巧3：使用代码实现（ActionScript 3.0）
对于更灵活的控制，比如可以暂停、重播，或者用于用户输入,可以用代码实现。
-
准备元件：将文字转换为“影片剪辑”元件，而不是“图形”元件,在库中双击这个影片剪辑元件。
-
在元件内部：创建一个新的图层，命名为“AS”，在这个图层的第1帧，打开 动作 面板（F9）,输入以下代码：
// 禁用元件的自动播放 this.stop(); // 定义要显示的文本 var myText:String = "欢迎使用Animate，这是用代码实现的打字机效果！"; // 初始化一个索引，从0开始 var charIndex:int = 0; // 创建一个文本字段来显示文字 var displayText:TextField = new TextField(); displayText.textColor = 0x000000; // 文字颜色 displayText.selectable = false; // 不可选 displayText.autoSize = TextFieldAutoSize.LEFT; // 自动调整大小 addChild(displayText); // 创建一个定时器，每隔一定时间（例如100毫秒）触发一次 var myTimer:Timer = new Timer(100); myTimer.addEventListener(TimerEvent.TIMER, addChar); myTimer.start(); // 定时器触发时执行的函数 function addChar(e:TimerEvent):void { // 如果索引小于文本长度 if (charIndex < myText.length) { // 将当前索引的字符追加到显示文本的末尾 displayText.appendText(myText.charAt(charIndex)); // 索引加1，准备显示下一个字符 charIndex++; } else { // 如果所有字符都显示完了，停止定时器 myTimer.stop(); } } -
回到主场景，将这个影片剪辑元件拖到舞台上，按
Ctrl + Enter测试,你会发现文字会自动一个一个地打出来。
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 遮罩动画 | 直观，易于理解和制作，效果稳定。 | 修改文字或调整速度需要重新设置关键帧，不够灵活。 | 、字幕、不需要交互的动画。 |
| 代码实现 | 非常灵活，易于控制（暂停、重播、动态文本），代码复用性强。 | 需要一定的编程基础，调试相对复杂。 | 需要用户交互、动态加载内容或需要精确控制的复杂动画。 |
对于初学者来说，强烈建议先掌握遮罩动画法，这是动画制作的基础，当你熟悉了之后，再尝试用代码来实现,会让你的动画能力更上一层楼。
