如何使用动画编辑器编辑补间动画

  1. Adobe Animate 用户指南
  2. Animate 简介
    1. Animate 新增功能
    2. 图示术语表
    3. Animate 系统要求
    4. Animate 键盘快捷键
    5. 在 Animate 中使用多种文件类型
  3. 动画
    1. Animate 动画基础知识
    2. 如何在 Animate 中使用帧和关键帧
    3. 在 Animate 中使用逐帧动画
    4. 如何在 Animate 中使用传统补间动画
    5. 画笔工具
    6. 运动辅助线
    7. 补间动画和 ActionScript 3.0
    8. 关于补间动画
    9. 补间动画
    10. 创建补间动画
    11. 使用属性关键帧
    12. 用补间对位置进行动画处理
    13. 如何使用动画编辑器编辑补间动画
    14. 编辑补间动画的运动路径
    15. 处理补间动画
    16. 添加自定义缓动
    17. 创建和应用动画预设
    18. 设置动画的补间范围
    19. 处理另存为 XML 文件的补间动画
    20. 补间动画与传统补间
    21. 形状补间
    22. 在 Animate 中使用骨骼工具动画
    23. 在 Animate 中处理角色 Rig
    24. 如何在 Adobe Animate 中使用遮罩层
    25. 如何在 Animate 中使用场景
  4. 交互性
    1. 如何使用 Animate 创建按钮
    2. 将 Animate 项目转换为其它文档类型格式
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 在 Animate 中通过代码片段添加交互性
    5. 创建自定义 HTML5 组件
    6. 使用 HTML5 Canvas 中的组件
    7. 创建自定义组件:示例
    8. 自定义组件的代码片段
    9. 最佳做法 - 使用 Animate 制作广告
    10. 虚拟现实创作和发布
  5. 工作区和工作流
    1. 创建和管理画笔
    2. 在 HTML5 Canvas 文档中使用 Google 字体
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作区
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 时间轴和 ActionScript
    8. 使用多个时间轴
    9. 设置首选参数
    10. 使用 Animate 创作面板
    11. 使用 Animate 创建时间轴图层
    12. 导出移动应用程序和游戏引擎的动画
    13. 移动和复制对象
    14. 模板
    15. 在 Animate 中查找和替换
    16. 撤消、重做和历史记录面板
    17. 键盘快捷键
    18. 如何在 Animate 中使用时间轴
    19. 创建 HTML 扩展
    20. 图像和动画 GIF 的优化选项
    21. 图像和 GIF 的导出设置
    22. Animate 中的资源面板
  6. 多媒体与视频
    1. 在 Animate 中变形和合并图形对象
    2. 在 Animate 中创建并使用元件实例
    3. 图像描摹
    4. 如何在 Adobe Animate 中使用声音
    5. 导出 SVG 文件
    6. 创建用于 Animate 中的视频文件
    7. 如何在 Animate 中添加视频
    8. 使用视频提示点
    9. 使用 Animate 绘制和创建对象
    10. 改变线条和形状
    11. Animate CC 中的笔触、填充和渐变
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的颜色面板
    14. 使用 Animate 打开 Flash CS6 文件
    15. 在 Animate 中使用传统文本
    16. 向 Animate 中置入图稿
    17. 在 Animate 中导入的位图
    18. 3D 图形
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 绘制线条和形状
    21. 在 Animate 中使用库
    22. 导出声音
    23. 在 Animate CC 中选择对象
    24. 在 Animate 中使用 Illustrator AI 文件
    25. 使用喷涂刷工具应用图案
    26. 应用混合模式
    27. 排列对象
    28. 使用“命令”菜单自动处理任务
    29. 多语言文本
    30. 在 Animate 中使用摄像头
    31. 将 Animate 与 Adobe Scout 一起使用
    32. 使用 Fireworks 文件
    33. 图形滤镜
    34. 声音和 ActionScript
    35. 绘制首选参数
    36. 用钢笔工具绘图
  7. 平台
    1. 将 Animate 项目转换为其它文档类型格式
    2. 自定义平台支持
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 创建和发布 WebGL 文档
    5. 如何打包 AIR for iOS 应用程序
    6. 发布 AIR for Android 应用程序
    7. 发布用于桌面的 Adobe AIR
    8. ActionScript 发布设置
    9. 最佳做法 - 管理应用程序中的 ActionScript
    10. 如何在 Animate 中使用 ActionScript
    11. 最佳做法 - 辅助功能指南
    12. Animate 工作区中的辅助功能
    13. 编写和管理脚本
    14. 启用自定义平台支持
    15. 自定义平台支持概述
    16. 创建辅助内容
    17. 使用自定义平台支持插件
    18. 调试 ActionScript 3.0
    19. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 导出 QuickTime 视频文件
    9. 使用 ActionScript 控制外部视频播放
    10. 最佳做法 - 移动设备内容创建技巧
    11. 最佳做法 - 视频惯例
    12. 最佳做法 - SWF 应用程序创作指南
    13. 最佳做法 - 构造 FLA 文件
    14. 在 Animate 中优化 FLA 文件的最佳做法
    15. ActionScript 发布设置
    16. 指定 Animate 的发布设置
    17. 导出放映文件
    18. 导出图像和动画 GIF
    19. HTML 发布模板
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和发布动画

使用 Animate CC 中的动画编辑器,您只需要花很少的精力即可创建复杂的补间动画。动画编辑器将应用到选定补间范围的所有属性显示为由一些二维图形构成的缩略视图。您可以修改其中的每一个图形,从而可单独修改其相应的各个补间属性。通过精确控制和高粒度化,您可以使用动画编辑器极大地丰富动画效果,从而模拟真实的行为。

关于动画编辑器

动画编辑器的设计旨在让您可以轻松地创建复杂的补间。使用动画编辑器,您可以控制补间的属性并对它们进行操作。创建补间动画之后,您可以利用动画编辑器来精确调整您的补间。动画编辑器允许您一次选择并修改一个属性,从而实现对补间的集中编辑。

为什么使用动画编辑器?

动画编辑器的设计旨在让您可以轻松地创建复杂的补间。因此,动画编辑器对补间及其属性提供了粒度化控制。以下目标只能借助动画编辑器来实现:

  • 在一个单独的面板中即可以轻松访问和修改应用于某个补间的所有属性。
  • 添加不同的缓动预设或自定义缓动:使用动画编辑器可以添加不同预设、添加多个预设或创建自定义缓动。对补间属性添加缓动是模拟对象真实行为的简便方式。
  • 合成曲线:您可以对单个属性应用缓动,然后使用合成曲线在单个属性图上查看缓动的效果。合成曲线表示实际的补间。
  • 锚点和控制点:您可以使用锚点和控制点隔离补间的关键部分并进行编辑。
  • 动画的精细调整:动画编辑器是制作某些种类动画的唯一方式,如对单个属性通过调整其属性曲线来创建弯曲的路径补间。
(A) 应用到补间的属性 (B) “添加锚点”按钮 (C) 适合视图切换 (D) “删除属性”按钮 (E) 添加缓动 (F) 垂直缩放切换

打开动画编辑器面板

在本文中,假设您已经创建了一个补间动画,欲使用动画编辑器来调整该补间。有关创建补间动画的信息,请参阅补间动画

要打开动画编辑器,可执行以下操作:

  1. 在时间轴上,选择要调整的补间动画,然后双击该补间范围。您也可以用鼠标右键单击该补间范围,然后选择调整补间来调出动画编辑器。

属性曲线

动画编辑器使用二维图形(称为属性曲线)表示补间的属性。这些图形合成在动画编辑器的一个网格中。每个属性有其自己的属性曲线,横轴(从左至右)为时间,纵轴为属性值的改变

可以通过在动画编辑器中编辑属性曲线来操作补间动画。因此,动画编辑器使得属性曲线的顺畅编辑更为容易,从而使用户可以对补间进行精确控制。可以通过添加属性关键帧或锚点来操作属性曲线。您可以对属性曲线的关键部分进行操作,这些关键部分就是您想让补间显示属性转变的位置。

请注意,动画编辑器只允许您编辑那些在补间范围中可以改变的属性。例如,渐变斜角滤镜的品质属性在补间范围中只能被指定一个值,因此不能使用动画编辑器来编辑它。

(A) 顶部互相叠加的属性曲线。(B) 对当前选定属性关注的属性曲线。

锚点

通过锚点可以对属性曲线的关键部分进行明确修改,从而达到对属性曲线的更好控制。在动画编辑器中可以通过添加属性关键帧或锚点来精确控制大多数曲线的形状。

锚点在网格中显示为一个正方形。使用动画编辑器,可以通过对属性曲线添加锚点或修改锚点位置来控制补间的行为。添加锚点时,会创建一个,这是曲线中穿过角度的位置。不过,可以对控制点使用贝塞尔控件,以平滑任一段属性曲线。

控制点

通过控制点可以平滑或修改锚点任一端的属性曲线。使用标准贝塞尔控件可以修改控制点。

编辑属性曲线

要编辑补间的属性,可执行以下操作:

  1. 在 Animate CC 中,选中一个补间范围,单击鼠标右键 > 选择调整补间来调出动画编辑器(或者只需双击选定的补间范围)。
  2. 向下滚动,选择想要编辑的属性。要进行反向选择,可单击鼠标右键,然后选择“反向选择”。
  3. 通过使用视图中的所选属性的属性曲线,您可以选择执行以下操作:
    1. 添加锚点,方法是单击 按钮,然后单击属性曲线上的所需帧以添加锚点。或者双击曲线来添加一个锚点。
    2. 选择一个现有锚点(任一方向),将其移动到网格中需要的帧处。垂直方向的移动受属性的值范围的限制。
    3. 删除锚点,方法是选择一个锚点,然后按 Ctrl 单击鼠标(在 MAC 中,按 Cmd 单击鼠标)。

使用控制点编辑属性曲线

要使用控制点编辑属性曲线,可执行以下操作:

  1. 在 Animate CC 中,选中一个补间范围,单击鼠标右键 > 选择调整补间来调出动画编辑器(或者双击选定的补间范围)。
  2. 向下滚动,选择想要编辑的属性。要进行反向选择,可单击鼠标右键,然后选择“反向选择”。
  3. 通过使用视图中的所选属性的属性曲线,您可以选择执行以下操作:
    1. 添加锚点,方法是单击 按钮,然后单击网格中要添加锚点的帧。或者双击曲线来添加一个锚点。

      或者

    2. 选择网格中一个现有的锚点。
  4. 选中锚点后,按住 Alt 垂直拖动它以启用控制点。可以使用贝塞尔控件修改曲线的形状,从而平滑角线段。 

复制属性曲线

您还可以在动画编辑器中为多个属性复制属性曲线。

要复制属性曲线,可执行以下操作:

  1. 在 Animate CC 中,选中一个补间范围,单击鼠标右键 > 选择调整补间来调出动画编辑器(或者双击选定的补间范围)。
  2. 选择要复制其曲线的属性,然后单击鼠标右键 > 复制,或者是按 Ctrl + C(在 MAC 中,按 Cmd + C)。
  3. 要根据绝对值粘贴曲线,选择要在其中粘贴所复制属性曲线的属性,然后单击鼠标右键 > 粘贴,或者是按 Ctrl + V(在 MAC 中,按 Cmd + V)。
  4. 要在目标曲线范围内粘贴曲线,选择要在其中粘贴所复制属性曲线的属性,然后单击鼠标右键 > 在当前范围内粘贴

翻转属性曲线

要翻转属性曲线,可执行以下操作:

  1. 在动画编辑器中,选择一个属性。
  2. 单击鼠标右键 > 翻转即可翻转属性曲线。

应用预设缓动和自定义缓动

通过缓动可以控制补间的速度,从而产生逼真的动画效果。通过对补间动画应用缓动,可以对动画的开头和结束部分进行操作,以使对象的移动更为自然。例如,有一种情况经常使用缓动,即在对象的运动路径结尾处添加逼真的加速和减速效果。在一个坚果壳中,Animate CC 根据对属性应用的缓动,来改变属性值的变化速率。

缓动可以简单,也可以复杂。Animate 包含多种适用于简单或复杂效果的预设缓动。您还可以对缓动指定强度,以增强补间的视觉效果。在动画编辑器中,还可以创建自己的自定义缓动曲线。

因为动画编辑器中的缓动曲线可以很复杂,所以可以使用它们在舞台上创建复杂的动画而无需在舞台上创建复杂的运动路径。除空间属性“X 位置”和“Y 位置”外,还可以使用缓动曲线创建其他任何属性的复杂补间。

为反弹预设缓动绘制的曲线

自定义缓动

自定义缓动允许您使用动画编辑器中的自定义缓动曲线来创建自己的缓动。然后可以将此自定义缓动应用到选定补间的任何属性。

自定义缓动图表示动作随时间变化的幅度。横轴表示帧,纵轴表示补间的变化比例。动画中的第一个值在 0% 的位置,最后一个关键帧可以设置为 0% 到 100% 之间的值。补间实例的变化速率由图形曲线的斜率表示。如果在图中创建的是一条水平线(无斜度),则速率为 0;如果在图中创建的是一条垂直线,则会有一个瞬间的速率变化。

对属性曲线应用缓动曲线

要对补间的属性添加缓动,可执行以下操作:

  1. 在动画编辑器中,选择要对其应用缓动的属性,然后单击添加缓动按钮以显示“缓动”面板。
  2. 在“缓动”面板中,可以选择:
    1. 从左窗格选择一个预设,以应用预设缓动。在“缓动”字段中输入一个值,以指定缓动强度。
    2. 选择左窗格中的“自定义缓动”然后修改缓动曲线,以创建一个自定义缓动。有关更多信息,请参阅创建和应用自定义缓动曲线
  3. 单击“缓动”面板之外的任意位置关闭该面板。请注意,“添加缓动”按钮会显示您应用到属性的缓动的名称。

创建和应用自定义缓动曲线

要对补间属性创建和应用自定义缓动,可执行以下操作:

  1. 在动画编辑器中,选择要对其应用自定义缓动的属性,然后单击“添加缓动”按钮以显示“缓动”面板。
  2. 在“缓动”面板中,可通过以下方式修改默认的自定义缓动曲线:
    1. 按住 Alt 单击曲线,在曲线上添加锚点。然后可以将这些点移动到网格中任何需要的位置。
    2. 对锚点启用控制点(按住 alt 单击锚点),以平滑锚点任一端的曲线段。
  3. 单击“缓动”面板外部关闭该面板。请注意,“添加缓动”按钮会显示“自定义”字样,表示您对属性应用了自定义缓动。

复制缓动曲线

要复制缓动曲线,可执行以下操作:

  1. 在“缓动”面板中,选择要复制的缓动曲线,然后按 Ctrl + C(在 MAC 中,按 Cmd + C)。
  2. 选择要在其中粘贴所复制缓动曲线的属性,然后按 Ctrl + V(在 MAC 中,按 Cmd + V)。

对多个属性应用缓动

现在可以对属性组应用预设缓动或自定义缓动了。动画编辑器将属性按层次结构组织成属性组和一些子属性。在此层次结构中,您可以选择对任一级别的属性(即单个属性或属性组)应用缓动。

请注意,在对某个属性组应用缓动之后,您还可以继续编辑各个子属性。这也就意味着,您可以对某个子属性应用另外不同的缓动(不同于对组应用的缓动)。

要对多个属性应用缓动,可执行以下操作:

  1. 在动画编辑器中,选择该属性组,然后单击“添加缓动”按钮以显示“缓动”面板。
  2. 在“缓动”面板中,选择一个预设缓动或创建一个自定义缓动。单击“缓动”面板之外的任意位置,即可对该属性组应用选定的缓动。

合成曲线

对属性曲线应用缓动曲线时,网格中便会显示一条视觉叠加曲线,它称为合成曲线。合成曲线可精确表示应用于属性曲线的缓动效果。它显示了补间对象的最终动画效果。测试动画时,合成曲线可以让您更易于了解在舞台上看到的效果。

(A) 应用于 X 位置属性的弹入预设缓动的合成曲线

控制动画编辑器的显示

在动画编辑器中,可以控制显示要编辑哪些属性曲线以及每条属性曲线的显示大小。以大尺寸显示的属性曲线更易于编辑。

  • 新的动画编辑器只显示应用于补间的那些属性。
  • 您可以使用“适合视图切换”() 功能,让动画编辑器适应时间轴的宽度。
  • 可以调整动画编辑器的大小,并使用时间轴缩放控件选择显示更少 () 或更多 () 的帧。还可以使用滑块设置动画编辑器的合适视图。
  • 动画编辑器还具有垂直缩放切换功能。可以使用“垂直缩放”在动画编辑器内显示属性值的适当范围。借助放大功能还可以对属性曲线进行更为精细的重点编辑。
  • 默认情况下,属性在动画编辑器的左窗格中是展开显示的。不过,单击属性名称可折叠下拉列表。

键盘快捷键

双击属性曲线可以添加锚点。

按住 Alt 拖动锚点可以启用控制点。

按住 Alt 拖动选定控制点可对其进行操作(单侧编辑)。

按住 Alt 单击锚点可禁用控制点(角点)。

按住 Shift 拖动锚点可沿直线方向移动它。

按住 Command/Control 单击锚点可删除它。

上下箭头键 - 垂直移动选定锚点。

Command/Control + C/V - 复制/粘贴选定曲线。

Command/Control + R - 翻转选定曲线。

Command/Control + 滚动鼠标 - 放大/缩小。

Adobe 徽标

登录到您的帐户