因最近在研究principle，看了很多教程及資料，感覺youtube上那幾個設計師的教程里講的比較初級。而看別人的源文件有時又看不懂，所以就得各種找方法解決不懂的地方。就像解一道數學題，關鍵是思路。思路搞懂就可以觸類旁通了。從本次教程開始，我將給以gif步驟圖的方式講解一些基本的動效。希望能幫到正在入門的同學。

關鍵是思路。關鍵是每個工具到底是幹嘛的。

最終效果：

本節重點：合成組件&分組的應用

1.開始

STEP1：按T新建文字，輸入「Type your phone number」，透明度設置為20%；然後移到畫板合適位置。

2.製作游標

STEP2.1：按A新建畫板2，然後按R新建矩形；寬2px、高20px；設置合適顏色，移到畫板合適位置。

STEP2.2：選中這個矩形，點擊【合成組件】，進入合成組件裡面。（這是本節第一個重點。【合成組件】類似ps里的智能對象，有了它我們就可以創建一個動畫組件，這樣就允許我們可以製作在同一畫板有多個動態的效果了。說白了就是，你可以把principle里的畫板想像成ppt，如果沒有【合成組件】，它只能向ppt一樣，通過兩張畫板元素的不同而實現補間動畫，就是那個過渡效果。但有了【合成組件】，就相當於你在一張ppt里插進了個視頻或者gif。）創建一個事件畫板，選擇「自動播放（Auto）」，然後畫板2再指回來。將畫板2的矩形的透明度設置為0%。然後調整動畫時長，為0.2秒。點擊返回，然後你就能看到游標的閃爍啦。

STEP2.3：選中畫板1里默認文字，創建事件動畫到畫板2，選擇「點擊（Tap）」；創建事件動畫到畫板3，選擇「自動播放（Auto）」。我們希望游標閃爍5次然後再輸入手機號碼。閃1次就是透明度「100%-0%-100%」的變化，即0.4秒，那麼閃5次就是2秒。複製游標到畫板3，將透明度改為0%；然後設置動畫時間：將起點移到2秒位置，動畫曲線設置為「無none」（注意：千萬別把時長設成2秒，那就成了透明度從100%到0%需要2秒了）。

3.製作輸入效果

STEP3.1:按A新建畫板4，複製畫板1的默認文字到畫板4；將透明度改為100%，輸入手機號碼；選中手機號碼按快捷鍵command+G編組；按A新建畫板5，複製畫板4的文字到畫板5。

STEP3.2:選中手機號碼，在「隱藏組外元素clip sublayers」項打鉤，兩個都要打鉤；（本節第二個重點。principle里的「組」概念既有「編組」的概念，又有「蒙版」的概念。看過principle官網教程的一定知道，第一個視頻教程就講了這個概念，改變組的外框跟屏幕高度保持一致，就相當於隱藏了屏幕外的內容。）將畫板4的組外框拉到最左邊，這樣號碼就會全部隱藏起來；畫板3到畫板4創建動畫選Auto；畫板4到畫板5創建動畫選Auto；畫板4到畫板5的元素動畫時長全部調為1.5秒，曲線全部調為「漸出 ease out」（這裡減速運動會更逼真一些）。

STEP3.3:複製畫板2的游標到畫板5、畫板4，調整到合適位置；畫板4的游標設置透明度為0%；調整畫板5的游標出現時間，起點在1.5秒位置，曲線設置為none，全部製作完成。

4.完成

STEP4：錄製動畫，導出gif圖。保存文件，為之後的登錄註冊設計備用。

推薦閱讀：

相关文章