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 m7 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' ?+ [
    下载
  • 已有 0 个人发表评论

    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册  

    本版积分规则

    加入VIP会员
    快速回复 返回列表 客服中心





    快速回复 返回顶部 返回列表