QuartzCode教程：如何使用QuartzCode制作百分比投票動(dòng)畫？
QuartzCode Mac版是一款Mac平臺的輕量級的動(dòng)畫制作開發(fā)工具，可以針對iOS以及Mac OS X快速生成Objective-C以及Swift code。在這篇文章中，我將解釋如何使用 QuartzCode 創(chuàng)建諸如百分比投票動(dòng)畫之類的東西。
QuartzCode for Mac(輕量級的動(dòng)畫制作開發(fā)工具) 1.66.5免激活版
https://www.macw.com/mac/2881.html
我將首先展示最終結(jié)果。
在本教程中，我還將展示如何在 Xcode 中編輯生成的代碼，以便可以更改百分比動(dòng)畫。
首先我們需要?jiǎng)?chuàng)建人物圖標(biāo)。在畫布上創(chuàng)建兩個(gè)橢圓，然后編輯控制點(diǎn)如下。在工具欄中，使用 Boolean > Append Paths 將這兩層合并為一層。將圖層重命名為 peopleMask。此層稍后將充當(dāng)主層的蒙版。
使用 Insert > CALayer 創(chuàng)建一個(gè) CALayer。將其調(diào)整為 {90, 220}，將其背景顏色設(shè)置為灰色并將其重命名為 main。
要使用peopleMask遮罩主層，我們需要先將peopleMask作為主層的子層。使用圖層列表將 peopleMask 拖到 main 中，使其看起來像這樣。
要遮罩主圖層，請選擇 peopleMask，單擊鼠標(biāo)右鍵并選擇“用作超級圖層的遮罩”。所以這就是蒙版后主層的樣子。圖層列表中的“M”符號表示 peopleMask 成功成為其上層的蒙版。
對于填充動(dòng)畫，創(chuàng)建一個(gè)新的 CALayer 并將其作為主圖層的子圖層，并將其大小設(shè)置為與主圖層相同。重命名圖層以填充并將其背景設(shè)置為藍(lán)色。
因?yàn)樘畛鋵訒?huì)從底部從零高度增加到全高度，所以使用圖層檢查器將其錨點(diǎn)設(shè)置為{0.5, 1}并將其高度設(shè)置為1。
現(xiàn)在使用時(shí)間軸面板添加邊界動(dòng)畫以填充圖層。然后使用關(guān)鍵幀檢查器將邊界 toValue 設(shè)置為其全高，即 218。同時(shí)將時(shí)間設(shè)置為 Ease In Ease Out。
播放動(dòng)畫，可以看到高度是從下到上動(dòng)畫的，遮罩效果也很好！
那么，如何讓動(dòng)畫停在某個(gè)百分比？為此，我們需要在 Xcode 中編輯 QuartzCode 生成的代碼。
但是在此之前，創(chuàng)建一個(gè)文本圖層并將其放在主圖層下方并將其重命名為百分比。百分比層顯示選民的百分比。將文本字符串更改為“100%”。
為百分比層添加變換動(dòng)畫并設(shè)置從填充層的邊界動(dòng)畫即將結(jié)束時(shí)的開始時(shí)間。使用關(guān)鍵幀檢查器，將 fromValue 設(shè)置為啟用并將縮放 x 和縮放 y 更改為 0。將計(jì)時(shí)功能更改為緩入，然后單擊其右側(cè)的按鈕并更改計(jì)時(shí)功能，如下所示：
播放動(dòng)畫，可以看到這里有問題。
百分比層最初應(yīng)該是不可見的。要隱藏百分比圖層，請?jiān)趫D層列表中勾選百分比圖層的眼睛按鈕。此步驟應(yīng)確保百分比層最初是隱藏的。
要再次取消隱藏，添加隱藏動(dòng)畫并將其開始時(shí)間設(shè)置為等于變換動(dòng)畫。對于隱藏動(dòng)畫， fromValue 和 toValue 都應(yīng)該設(shè)置為 NO 以指示圖層應(yīng)該取消隱藏。下圖顯示了 QuartzCode 中的最終動(dòng)畫和設(shè)置。
為了使其可用于不同的百分比，我們需要在 Xcode 中編輯生成的代碼。我不會(huì)詳細(xì)討論如何設(shè)置 Xcode 項(xiàng)目，但會(huì)跳到如何編輯生成的代碼。
這是初始生成代碼的樣子，我們需要編輯 startAllAnimations: 和 fillAnimation 以便我們可以使用代碼將動(dòng)畫設(shè)置為任何百分比。
下圖顯示了編輯代碼的結(jié)果。使用這個(gè)編輯過的代碼，我們可以調(diào)用 startAllAnimationsWithFraction: 并傳遞 0-1 之間的分?jǐn)?shù)值以使其動(dòng)畫化為該值百分比。例如，如果我們放置 0.35 分?jǐn)?shù)，填充層將從其高度的 0% 到 35% 進(jìn)行動(dòng)畫處理，將百分比圖層顏色設(shè)置為紅色，并將其字符串設(shè)置為百分比值。您可以使用下面提供的 Xcode 項(xiàng)目自行嘗試。
以上就是QuartzCode教程：如何使用QuartzCode制作百分比投票動(dòng)畫，我希望這個(gè)教程對你有用。
