QuartzCode教程：如何使用QuartzCode制作百分比投票动画？

QuartzCode Mac版是一款Mac平台的轻量级的动画制作开发工具，可以针对iOS以及Mac OS X快速生成Objective-C以及Swift code。在这篇文章中，我将解释如何使用 QuartzCode 创建诸如百分比投票动画之类的东西。

QuartzCode for Mac(轻量级的动画制作开发工具) 1.67.1免激活版

QuartzCode是一款Mac平台的轻量级的动画制作开发工具，可以针对iOS以及Mac OS X快速生成Objective-C以及Swift code。

大小：15.17 MB时间：2022.09.13

我将首先展示最终结果。

在本教程中，我还将展示如何在 Xcode 中编辑生成的代码，以便可以更改百分比动画。

1. 首先我们需要创建人物图标。在画布上创建两个椭圆，然后编辑控制点如下。在工具栏中，使用 Boolean > Append Paths 将这两层合并为一层。将图层重命名为 peopleMask。此层稍后将充当主层的蒙版。

2. 使用 Insert > CALayer 创建一个 CALayer。将其调整为 {90, 220}，将其背景颜色设置为灰色并将其重命名为 main。

3. 要使用peopleMask遮罩主层，我们需要先将peopleMask作为主层的子层。使用图层列表将 peopleMask 拖到 main 中，使其看起来像这样。

4. 要遮罩主图层，请选择 peopleMask，单击鼠标右键并选择“用作超级图层的遮罩”。所以这就是蒙版后主层的样子。图层列表中的“M”符号表示 peopleMask 成功成为其上层的蒙版。

5. 对于填充动画，创建一个新的 CALayer 并将其作为主图层的子图层，并将其大小设置为与主图层相同。重命名图层以填充并将其背景设置为蓝色。

6. 因为填充层会从底部从零高度增加到全高度，所以使用图层检查器将其锚点设置为{0.5, 1}并将其高度设置为1。

7. 现在使用时间轴面板添加边界动画以填充图层。然后使用关键帧检查器将边界 toValue 设置为其全高，即 218。同时将时间设置为 Ease In Ease Out。

8. 播放动画，可以看到高度是从下到上动画的，遮罩效果也很好！

9. 那么，如何让动画停在某个百分比？为此，我们需要在 Xcode 中编辑 QuartzCode 生成的代码。

10. 但是在此之前，创建一个文本图层并将其放在主图层下方并将其重命名为百分比。百分比层显示选民的百分比。将文本字符串更改为“100%”。

11. 为百分比层添加变换动画并设置从填充层的边界动画即将结束时的开始时间。使用关键帧检查器，将 fromValue 设置为启用并将缩放 x 和缩放 y 更改为 0。将计时功能更改为缓入，然后单击其右侧的按钮并更改计时功能，如下所示：

12. 播放动画，可以看到这里有问题。

13. 百分比层最初应该是不可见的。要隐藏百分比图层，请在图层列表中勾选百分比图层的眼睛按钮。此步骤应确保百分比层最初是隐藏的。

14. 要再次取消隐藏，添加隐藏动画并将其开始时间设置为等于变换动画。对于隐藏动画， fromValue 和 toValue 都应该设置为 NO 以指示图层应该取消隐藏。下图显示了 QuartzCode 中的最终动画和设置。

15. 为了使其可用于不同的百分比，我们需要在 Xcode 中编辑生成的代码。我不会详细讨论如何设置 Xcode 项目，但会跳到如何编辑生成的代码。

16. 这是初始生成代码的样子，我们需要编辑 startAllAnimations: 和 fillAnimation 以便我们可以使用代码将动画设置为任何百分比。

17. 下图显示了编辑代码的结果。使用这个编辑过的代码，我们可以调用 startAllAnimationsWithFraction: 并传递 0-1 之间的分数值以使其动画化为该值百分比。例如，如果我们放置 0.35 分数，填充层将从其高度的 0% 到 35% 进行动画处理，将百分比图层颜色设置为红色，并将其字符串设置为百分比值。您可以使用下面提供的 Xcode 项目自行尝试。

以上就是QuartzCode教程：如何使用QuartzCode制作百分比投票动画，我希望这个教程对你有用。