多動畫教程：使用 QuartzCode 加載、完成和失敗動畫載、完成和失敗動畫
從 1.3 版本開始，QuartzCode 現(xiàn)在支持多種動畫。在這篇文章中，我將展示如何在 QuartzCode 中創(chuàng)建加載、完成和失敗動畫作為多個動畫。
這些是我們將如何創(chuàng)建最終動畫，
加載動畫
第一步，將畫布大小更改為 30 x 30。這應(yīng)該適合加載動畫。
要創(chuàng)建加載動畫，請創(chuàng)建一個橢圓，然后將其重命名為loadOval。
我們將設(shè)置可以使用圖層檢查器更改的loadOval屬性，如下所示
尺寸 : 22 x 22 線寬：3 填充顏色：透明色 描邊顏色：黃色
所以這是初始的loadOval
現(xiàn)在要打開橢圓，雙擊loadOval以更改為“頂點模式”。您也可以單擊loadOval，然后單擊工具欄上的“頂點模式”。
單擊loadOval筆劃以創(chuàng)建新控制點，然后在最后一個控制點和“刪除子路徑”之間單擊鼠標右鍵以打開loadOval。
要使loadOval結(jié)束，請轉(zhuǎn)到圖層檢查器并將 Line End 和 Line Join 都設(shè)置為圓形，如下圖所示。
現(xiàn)在我們將向loadOval添加加載動畫，首先使用“動畫列表”添加動畫并將其重命名為“加載”。然后在“加載”動畫中將轉(zhuǎn)換時間軸添加到loadOval。
當 Transform Timeline 仍然被選中時，在 Keyframe Inspector 中更改以下內(nèi)容
時間：緩入緩出 開始時間：0 持續(xù)時間：1 重復(fù)：無限 在關(guān)鍵幀 2 處，將旋轉(zhuǎn)：z 更改為 -360
試玩一下，你會有一個很好的加載動畫。
加載完成動畫
現(xiàn)在我們將創(chuàng)建“加載完成動畫”。首先 使用圖層列表或使用快捷鍵 SHIFT + CMD + H隱藏loadOval圖層，以便我們可以專注于創(chuàng)建completePath。
使用矢量工具創(chuàng)建完整路徑，根據(jù)需要調(diào)整點并將路徑重命名為completePath。
要使用路徑動畫，建議使兩條路徑具有相同的點，以使一條路徑很好地插入其他路徑。
在這種情況下，loadOval有 5 個控制點，因此我們需要向completePath添加另外 2 個控制點，如下所示，
取消隱藏loadOval并隱藏completePath，因為completePath 只會用于路徑動畫。
添加一個新動畫并將其重命名為'completeLoading'。
選擇“completeLoading”動畫時，選擇loadOval并向其添加路徑時間軸。
選擇路徑時間軸第二個關(guān)鍵幀，并使用關(guān)鍵幀檢查器將路徑更改為completePath。這應(yīng)該是項目現(xiàn)在的樣子。
現(xiàn)在添加 fillColor 時間線，然后選擇它的第二個關(guān)鍵幀，然后使用 Keyframe Inspector 將顏色設(shè)置為綠色。嘗試播放動畫。
為了給動畫添加更多的觸感，添加一個變換時間軸，將計時功能設(shè)置為緩入并更改關(guān)鍵幀如下，
關(guān)鍵幀 1：無變化
關(guān)鍵幀 2：
比例 X : 0.2
比例 Y : 0.2
旋轉(zhuǎn) Z : -170
關(guān)鍵幀 3：
旋轉(zhuǎn) Z：無變化
注意： 對于旋轉(zhuǎn)動畫，旋轉(zhuǎn)方向未定義，通?；谧钚〗嵌取＿@就是為什么在這種情況下使用旋轉(zhuǎn) Z -170 的原因。使用 QuartzCode 您可以輕松檢查它的方向。
這是最終的completeLoading動畫，不錯吧？
加載失敗動畫
添加一個新動畫并將其重命名為'failLoading'。
創(chuàng)建如下所示的故障路徑，您可以將故障組件分組或附加它們。將其重命名為failPath。
由于最初不應(yīng)顯示failPath，請使用圖層列表或使用快捷鍵SHIFT + CMD + H 將其隱藏。
我們將使用不同的技術(shù)來制作從加載到失敗的動畫。您可以像在 'completeLoading' 動畫中一樣使用路徑動畫，但結(jié)果看起來不會太好，如下所示，
在仍然選擇 'failLoading' 動畫的同時，向loadOval添加一個新的變換，并將其關(guān)鍵幀設(shè)置如下，
持續(xù)時間：0.4
關(guān)鍵幀 1：無變化
關(guān)鍵幀 2：
比例 X : 0.1
比例 Y : 0.1
旋轉(zhuǎn) Z : -170
將變換時間線添加到failPath層，然后設(shè)置其關(guān)鍵幀如下，
持續(xù)時間：0.7
關(guān)鍵幀 1：
比例 X : 0
比例 Y : 0
關(guān)鍵幀 2：
比例 X : 0
比例 Y : 0
時間：0.2
關(guān)鍵幀 3：
比例 X : 1
比例 Y : 1
為failPath層添加隱藏變換。將第一個和第二個關(guān)鍵幀布爾值都設(shè)置為 NO。持續(xù)時間無關(guān)緊要，因為我們已將兩個關(guān)鍵幀值都設(shè)置為 NO，這意味著該層將在動畫開始時立即顯示。嘗試播放動畫，似乎比使用路徑動畫更好，對嗎？
這將是我們完成的項目的最終外觀。
