形状补间

  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 为这两帧之间的帧内插这些中间形状,创建从一个形状变形为另一个形状的动画效果。

在 Animate 中,可以对均匀的实心笔触和不均匀的花式笔触添加形状补间。还可以对使用可变宽度工具增强的笔触添加形状补间。您可以对要使用的形状进行试验来确定结果。可以使用形状提示来告诉 Animate 起始形状上的哪些点与结束形状上的特定点对应。

也可以对补间形状内的形状的位置和颜色进行补间。

若要对组、实例或位图图像应用形状补间,请分离这些元素。若要对文本应用形状补间,请将文本分离两次,从而将文本转换为对象。请参阅分离元件实例

创建形状补间

以下步骤演示如何在时间轴的第 1 帧与第 30 帧之间创建形状补间。不过,您也可以在所选的时间轴的任何部分中创建补间。

  1. 在第 1 帧中,使用矩形工具绘制一个正方形。
  2. 选择同一图层的第 30 帧,然后通过选择“插入”>“时间轴”>“空白关键帧”或按 F7 来添加一个空白关键帧。

  3. 在舞台上,使用椭圆工具在第 30 帧中绘制一个圆。

    此时,第 1 帧中包含一个带正方形的关键帧,并且第 30 帧中包含一个带圆形的关键帧。

  4. 时间轴上,从位于包含两个形状的图层中的两个关键帧之间的多个帧中选择一个帧。

  5. 选择“插入”>“形状补间”

    Animate 将形状内插到这两个关键帧之间的所有帧中。

  6. 若要预览补间,请在时间轴中将播放头拖过这些帧,或按 Enter 键。

  7. 除了形状之外,要进行补间移动,请将第 30 帧中的形状移动到与第 1 帧不同的位置。

    通过按 Enter 键预览动画。

  8. 若要对形状的颜色进行补间,请确保第 1 帧中的形状与第 30 帧中的形状具有不同的颜色。
  9. 若要向补间添加缓动,请选择一个帧,然后在属性检查器中的“缓动”字段中输入一个值。

    若要在补间开始处缓动,请输入负值。若要在补间结束处缓动,请输入正值。

创建缓动预设或自定义缓动

缓动预设是可以应用于舞台上某个对象的预配置缓动。

形状补间可以使用一组常用的缓动预设。您可以从缓动预设列表中选择预设,然后将其应用于选定属性。您还可以将自定义缓动应用于形状补间。

  1. 在 Animate 时间轴中单击包含形状补间的图层。

  2. 要打开“补间”属性,请单击属性面板中的“补间”类别。

    补间属性
    补间属性

  3. 从缓动类型弹出对话框中选择缓动预设。双击该预设类型以应用。 

    如果选择应用传统缓动,也可以通过移动滑块来增大或减小缓动强度。 

    缓动预设类型
    缓动预设类型

  4. 单击“缓动”旁边的“编辑”图标以应用自定义缓动。

    “自定义缓动”对话框显示一个表示运动程度随时间而变化的图形。水平轴表示帧,垂直轴表示变化的百分比。第一个关键帧表示为 0%,最后一个关键帧表示为 100%。

    图形曲线的斜率表示对象的变化速率。曲线水平时(无斜率),变化速率为零;曲线垂直时,变化速率最大,一瞬间完成变化。

    显示恒定速率的“自定义缓动”图形
    显示恒定速率的“自定义缓动”图形。通过在形状补间中选择一个帧,然后单击属性检查器的“缓动”部分中的“编辑”按钮,可以打开此对话框。

    您可通过从“自定义”列表中选择您的自定义缓动,来保存一个自定义缓动并重复使用它。在进行更改后,在编辑模式下单击“保存和应用”按钮。在以下屏幕快照中,您可以查找名为 MyEase1 的自定义缓动预设。

    自定义缓动预设
    自定义缓动预设

    通过选择相应的范围和应用预设缓动,您可以在时间轴中的多个范围内使用这些预设缓动。

    多个间距的缓动预设
    对多个间距应用缓动预设

使用形状提示控制形状变化

若要控制更加复杂或罕见的形状变化,可以使用形状提示。形状提示会标识起始形状和结束形状中相对应的点。例如,如果要补间一张正在改变表情的脸部图画时,可以使用形状提示来标记每只眼睛。这样在形状发生变化时,脸部就不会乱成一团,每只眼睛还都可以辨认,并在转换过程中分别变化。

字母形式的形状提示
字母形式的形状提示

形状提示包含从 a 到 z 的字母,用于识别起始形状和结束形状中相对应的点。最多可以使用 26 个形状提示。

起始关键帧中的形状提示是黄色的,结束关键帧中的形状提示是绿色的,当不在一条曲线上时为红色。

要在补间形状时获得最佳效果,请遵循这些准则:

  • 在复杂的补间形状中,需要创建中间形状然后再进行补间,而不要只定义起始和结束的形状。

  • 确保形状提示是符合逻辑的。例如,如果在一个三角形中使用三个形状提示,则在原始三角形和补间三角形中它们的顺序必须相同。命令在第一个关键帧中不能为 a,b,c,在第二个中不能为 a,c,b

  • 如果按逆时针顺序从形状的左上角开始放置形状提示,它们的工作效果最好。

使用形状提示

  1. 选择补间形状序列中的第一个关键帧。
  2. 选择“修改”>“形状”>“添加形状提示”。起始形状提示会在该形状的某处显示为一个带有字母 a 的红色圆圈。

  3. 将形状提示移动到要标记的点。
  4. 选择补间序列中的最后一个关键帧。结束形状提示会在该形状的某处显示为一个带有字母 a 的绿色圆圈。

  5. 将形状提示移到结束形状中与您标记的第一点对应的点。

  6. 若要查看形状提示如何更改补间形状,请再次播放动画。若要微调补间,请移动形状提示。
  7. 要添加更多形状提示,请重复此过程。将出现新的提示,所带的字母紧接之前字母的顺序(bc 等等)。

查看所有形状提示

  1. 选择“视图”>“显示形状提示”。仅当包含形状提示的图层和关键帧处于活动状态时,“显示形状提示”才可用。

删除形状提示

  1. 将其拖离舞台。

删除所有形状提示

  1. 选择“修改”>“形状”>“删除所有提示”

使用可变宽度向笔触添加形状补间

Animate 允许您对具有可变宽度的笔触添加形状补间。此前,Animate 仅支持对实心均匀笔触和形状创建形状补间。这使得设计人员对不均匀的笔触(如使用可变宽度工具增强的笔触)无法创建形状补间。对具有可变宽度的笔触进行补间极大地拓展了在 Animate 中的设计潜力。

对花式笔触添加形状补间与对形状或实心均匀笔触添加形状补间是一样的。该工作流程需要由用户定义补间的起始和最终形状,然后 Animate 会创建补间的过渡帧。

关于可变宽度工具

可变宽度工具允许您增强均匀实心笔触来创建漂亮的花式笔触。有关如何使用可变宽度工具增强笔触的信息,请参阅使用可变宽度工具增强笔触和形状

对可变宽度笔触添加形状补间

  1. 在 Animate CC 中,使用线条工具绘制一个线条。

    笔触值设置为两个像素的线条笔触
    使用线条工具在舞台上绘制的一个线条笔触,其值设为两个像素。

  2. 使用“可变宽度”工具在笔触中间添加宽度(见下图)。有关使用可变宽度工具的信息,请参阅使用可变宽度工具增强笔触

    值为 68.0 像素的可变宽度笔触
    使用可变宽度工具创建的可变宽度笔触,笔触值设为 68.0 像素。

  3. 在时间轴上选择另一帧(如帧 30),然后为补间创建笔触的最终形状。

    添加到形状补间最后一个关键帧的最终形状
    添加到形状补间最后一个关键帧的最终形状。

  4. 右键单击帧 1 到 30 之间的任一帧,选择“创建形状补间”

对可变宽度配置文件添加形状补间

Animate 还允许您对另存为可变宽度配置文件的花式笔触添加形状补间。您可以对补间的起始形状和最终形状应用宽度配置文件,以便让 Animate 创建一个平滑的形状补间。

宽度配置文件是为便于重复利用而使用可变宽度工具创建并保存的花式笔触。有关宽度配置文件的详细信息,请参阅保存宽度配置文件

要对可变宽度配置文件添加形状补间,可执行以下操作:

  1. 在 Animate 中,使用线条工具在舞台上绘制一个线条。

    值为两个像素的线条笔触
    使用线条工具在舞台上绘制的一个线条笔触,其值设为两个像素。

  2. 在属性监视器中,从“宽度”下拉菜单中选择并应用一个宽度配置文件。

    笔触值为 68.0 像素的可变宽度笔触
    使用可变宽度工具创建的可变宽度笔触,笔触值设为 68.0 像素。

  3. 在时间轴上选择另一帧(如帧 30),然后从属性监视器的“宽度”下拉菜单中选择所需的宽度配置文件。

  4. 要将形状补间添加到选定的宽度配置文件,请右键单击帧 1 到 30 之间的任一帧,选择“创建形状补间”

Adobe 徽标

登录到您的帐户