QuartzCode动画教程:如何使用QuartzCode 制作加载、完成和失败动画?

时间: 浏览次数:0 编辑:user05

QuartzCode破解版是一款动画制作开发工具。QuartzCode Mac版有小巧而强大的功能,为您快速创建矢量动画,本文为您带来的是QuartzCode动画教程——如何使用QuartzCode 制作加载、完成和失败动画?

这些是我们将如何创建最终动画,

加载动画

  1. 第一步,将画布大小更改为 30 x 30。这应该适合加载动画。

  2. 要创建加载动画,请创建一个椭圆,然后将其重命名为loadOval。

  3. 我们将设置可以使用图层检查器更改的loadOval属性,如下所示

尺寸 : 22 x 22 线宽:3 填充颜色:透明色 描边颜色:黄色

  1. 所以这是初始的loadOval

  1. 现在要打开椭圆,双击loadOval以更改为“顶点模式”。您也可以单击loadOval,然后单击工具栏上的“顶点模式”。

  2. 单击loadOval笔划以创建新控制点,然后在最后一个控制点和“删除子路径”之间单击鼠标右键以打开loadOval。

  1. 要使loadOval结束,请转到图层检查器并将 Line End 和 Line Join 都设置为圆形,如下图所示。

  1. 现在我们将向loadOval添加加载动画,首先使用“动画列表”添加动画并将其重命名为“加载”。然后在“加载”动画中将转换时间轴添加到loadOval。

  1. 当 Transform Timeline 仍然被选中时,在 Keyframe Inspector 中更改以下内容

时间:缓入缓出 开始时间:0 持续时间:1 重复:无限 在关键帧 2 处,将旋转:z 更改为 -360

  1. 试玩一下,你会有一个很好的加载动画。

加载完成动画

  1. 现在我们将创建“加载完成动画”。首先 使用图层列表或使用快捷键 SHIFT + CMD + H隐藏loadOval图层,以便我们可以专注于创建completePath。

  2. 使用矢量工具创建完整路径,根据需要调整点并将路径重命名为completePath。

  1. 要使用路径动画,建议使两条路径具有相同的点,以使一条路径很好地插入其他路径。

  2. 在这种情况下,loadOval有 5 个控制点,因此我们需要向completePath添加另外 2 个控制点,如下所示,

  1. 取消隐藏loadOval并隐藏completePath,因为completePath 只会用于路径动画。

  2. 添加一个新动画并将其重命名为'completeLoading'。

  3. 选择“completeLoading”动画时,选择loadOval并向其添加路径时间轴。

  4. 选择路径时间轴第二个关键帧,并使用关键帧检查器将路径更改为completePath。这应该是项目现在的样子。

  1. 现在添加 fillColor 时间线,然后选择它的第二个关键帧,然后使用 Keyframe Inspector 将颜色设置为绿色。尝试播放动画。

  1. 为了给动画添加更多的触感,添加一个变换时间轴,将计时功能设置为缓入并更改关键帧如下,

关键帧 1:无变化

关键帧 2:

  • 比例 X : 0.2
  • 比例 Y : 0.2
  • 旋转 Z : -170

关键帧 3:

旋转 Z:无变化

注意: 对于旋转动画,旋转方向未定义,通常基于最小角度。这就是为什么在这种情况下使用旋转 Z -170 的原因。使用 QuartzCode 您可以轻松检查它的方向。

  1. 这是最终的completeLoading动画,不错吧?

加载失败动画

  1. 添加一个新动画并将其重命名为'failLoading'。

  2. 创建如下所示的故障路径,您可以将故障组件分组或附加它们。将其重命名为failPath。

  1. 由于最初不应显示failPath,请使用图层列表或使用快捷键SHIFT + CMD + H 将其隐藏。

  2. 我们将使用不同的技术来制作从加载到失败的动画。您可以像在 'completeLoading' 动画中一样使用路径动画,但结果看起来不会太好,如下所示,

  1. 在仍然选择 'failLoading' 动画的同时,向loadOval添加一个新的变换,并将其关键帧设置如下,

持续时间:0.4

关键帧 1:无变化

关键帧 2:

  • 比例 X : 0.1
  • 比例 Y : 0.1
  • 旋转 Z : -170
  1. 将变换时间线添加到failPath层,然后设置其关键帧如下,

持续时间:0.7

关键帧 1:

  • 比例 X : 0
  • 比例 Y : 0

关键帧 2:

  • 比例 X : 0
  • 比例 Y : 0
  • 时间:0.2

关键帧 3:

  • 比例 X : 1
  • 比例 Y : 1
  1. 为failPath层添加隐藏变换。将第一个和第二个关键帧布尔值都设置为 NO。持续时间无关紧要,因为我们已将两个关键帧值都设置为 NO,这意味着该层将在动画开始时立即显示。尝试播放动画,似乎比使用路径动画更好,对吗?

  1. 这将是我们完成的项目的最终外观。

以下是用Xcode 项目来展示的这些动画的用例

你可以在这里下载 QuartzCode项目

客服QQ:

客服微信

返回顶部