QuartzCode注册版是一款动画制作开发工具。QuartzCode Mac版有小巧而强大的功能，为您快速创建矢量动画，本文为您带来的是QuartzCode动画教程——如何使用QuartzCode 制作加载、完成和失败动画？1 n8 W2 h& o, k8 _
这些是我们将如何创建最终动画，
8 @% Q) o' f( j5 Y9 k
9 p) E* J* v- `2 W
' `4 n& X& {2 U2 e " a" d; c6 k; e0 b4 x; L% o
加载动画[ol]第一步，将画布大小更改为 30 x 30。这应该适合加载动画。要创建加载动画，请创建一个椭圆，然后将其重命名为loadOval。我们将设置可以使用图层检查器更改的loadOval属性，如下所示$ I2 `) k0 G& ~7 ? r
[/ol]尺寸 : 22 x 22
- }5 t7 T) g' J$ V% L线宽：3) t4 o5 W. j$ Y! X/ _) H& E; }
填充颜色：透明色
6 p7 {, R; w" _描边颜色：黄色所以这是初始的loadOval[/ol]
6 c+ h, j3 }+ ^# @4 ?3 Q2 S 现在要打开椭圆，双击loadOval以更改为“顶点模式”。您也可以单击loadOval，然后单击工具栏上的“顶点模式”。单击loadOval笔划以创建新控制点，然后在最后一个控制点和“删除子路径”之间单击鼠标右键以打开loadOval。
+ ^7 \' C6 `, J B1 c8 o[/ol]
( ^ }6 n k' p9 I8 D9 a: s9 u 要使loadOval结束，请转到图层检查器并将 Line End 和 Line Join 都设置为圆形，如下图所示。[/ol]
) S& [) `8 J: }% r/ { 现在我们将向loadOval添加加载动画，首先使用“动画列表”添加动画并将其重命名为“加载”。然后在“加载”动画中将转换时间轴添加到loadOval。[/ol]
$ ] U% S5 d3 J, P$ t 当 Transform Timeline 仍然被选中时，在 Keyframe Inspector 中更改以下内容[/ol]时间：缓入缓出
S, t, }$ H' q" Y9 y9 ]7 X开始时间：0
' C @/ `: ]% p持续时间：1* T# ~$ Q: t2 G
重复：无限
! V, Q: z u$ ]5 B. X: O在关键帧 2 处，将旋转：z 更改为 -360
. P# J+ \8 j3 r, \" o0 G% E8 k 试玩一下，你会有一个很好的加载动画。[/ol]加载完成动画现在我们将创建“加载完成动画”。首先 使用图层列表或使用快捷键 SHIFT + CMD + H隐藏loadOval图层，以便我们可以专注于创建completePath。使用矢量工具创建完整路径，根据需要调整点并将路径重命名为completePath。
`) t5 J$ {2 \# N: ]* a% @3 m[/ol]- s1 \$ _8 Y, c4 o# D
 要使用路径动画，建议使两条路径具有相同的点，以使一条路径很好地插入其他路径。在这种情况下，loadOval有 5 个控制点，因此我们需要向completePath添加另外 2 个控制点，如下所示，$ e; M+ ^- k% w
[/ol]
' k g0 B8 I) t$ M( ~1 [/ s6 d 取消隐藏loadOval并隐藏completePath，因为completePath 只会用于路径动画。添加一个新动画并将其重命名为'completeLoading'。选择“completeLoading”动画时，选择loadOval并向其添加路径时间轴。选择路径时间轴第二个关键帧，并使用关键帧检查器将路径更改为completePath。这应该是项目现在的样子。: Z, ~% e/ [9 }; F8 G' g4 s3 t: J
[/ol]) Y$ e: U+ @( t, w* x7 H
 现在添加 fillColor 时间线，然后选择它的第二个关键帧，然后使用 Keyframe Inspector 将颜色设置为绿色。尝试播放动画。[/ol]
; k' T9 s1 f+ t6 M+ ^$ B, g 为了给动画添加更多的触感，添加一个变换时间轴，将计时功能设置为缓入并更改关键帧如下，[/ol]关键帧 1：无变化
: @/ S) E8 F: q- k( g* r关键帧 2：
- b0 l9 W, E" L) \* n比例 X : 0.2比例 Y : 0.2旋转 Z : -170关键帧 3：, E7 |, h7 P& [+ @
旋转 Z：无变化- n8 ~, X" K3 R- ?
注意： 对于旋转动画，旋转方向未定义，通常基于最小角度。这就是为什么在这种情况下使用旋转 Z -170 的原因。使用 QuartzCode 您可以轻松检查它的方向。这是最终的completeLoading动画，不错吧？[/ol]
! }7 K' p' P$ N) H
2 A+ u* j& |) w. D+ W' C9 F加载失败动画添加一个新动画并将其重命名为'failLoading'。创建如下所示的故障路径，您可以将故障组件分组或附加它们。将其重命名为failPath。
8 r* W. X! o2 l3 i" A7 Q3 ?[/ol]
- d6 `% [4 M1 L, ^/ } 由于最初不应显示failPath，请使用图层列表或使用快捷键SHIFT + CMD + H 将其隐藏。我们将使用不同的技术来制作从加载到失败的动画。您可以像在 'completeLoading' 动画中一样使用路径动画，但结果看起来不会太好，如下所示，
0 c, t- p3 w* F' x2 Y" ?7 l/ u[/ol]
1 [5 Y* g1 A4 Q- J& \ 在仍然选择 'failLoading' 动画的同时，向loadOval添加一个新的变换，并将其关键帧设置如下，[/ol]持续时间：0.4( t6 _$ _7 h* r0 V5 ~( X! E
关键帧 1：无变化
. Z9 D0 O: T- z- W" c关键帧 2：: O$ P4 p3 b. R% h& C
比例 X : 0.1比例 Y : 0.1旋转 Z : -170将变换时间线添加到failPath层，然后设置其关键帧如下，[/ol]持续时间：0.7
2 a/ H0 o; c5 Y2 }# x# {1 N" \" ^关键帧 1：# x& _0 G4 T, J/ n" r0 K' A
比例 X : 0比例 Y : 0关键帧 2：- p8 v0 }. |: v: ^7 J# G8 h% ^
比例 X : 0比例 Y : 0时间：0.2关键帧 3：- i& |0 A! z+ c% s/ Z7 a- d
比例 X : 1比例 Y : 1为failPath层添加隐藏变换。将第一个和第二个关键帧布尔值都设置为 NO。持续时间无关紧要，因为我们已将两个关键帧值都设置为 NO，这意味着该层将在动画开始时立即显示。尝试播放动画，似乎比使用路径动画更好，对吗？[/ol]/ K& ]2 X2 O! D5 C+ P+ m
 这将是我们完成的项目的最终外观。[/ol]
7 ? M+ p4 m- }$ K/ d2 m 7 Z0 r6 b/ b& T
以下是用Xcode 项目来展示的这些动画的用例0 O3 y8 B. j" d/ i5 v: c4 R; {! d! R
To view this video please enable JavaScript
( m0 P: Q; |- N你可以在这里下载 QuartzCode项目
; n1 N1 Z" `5 D9 Q
- V0 y5 T% P* F8 z) D. m; v1 Q) iQuartzCode for Mac(轻量级的动画制作开发工具)
7 T& t0 v3 h: ^( D8.35 MB2022.01.04英文软件: {" Y( s, g' T5 N
QuartzCode for Mac是一款非常不错的动画制作开发工具，QuartzCode注册版创建动画为 iOS/OSX 项目现在是比以往更容易。只需更改任何属性 ；您将看到实时动画的变化。, N2 M |/ z- D3 a' ?+ [
下载 |
|
|手机版|菁菁苹果园
( ICP备10017701号 )|网站地图