前言
本原型是我按照簡書上的一篇進階（相比我這篇）翻譯教程寫出來的乾巧。
原作者省略的內(nèi)容很多，大部分只講了最根本的方法预愤。
但是我這篇會更加的詳細沟于，對不知道如何具體做的同學來講應該可以順利做出效果。但是需要一定的耐心植康，和基礎旷太。一定要耐心，并不難！
寫作時間：2017年10月底
我還在學習中供璧，如果本文有任何問題存崖，請私信提醒我，或者添加我的微信睡毒，我的微信號是mepolizhan来惧，歡迎大家來交流
下面就正式開始。
制作概要
所需硬件：Mac電腦 ?所需軟件：Sketch（不必須）+Principle
先來看看最終的效果
可以看出吕嘀，我基本上 1 : 1 制作出了原作者的效果违寞，我制作的這個也是可交互的，整個過程是可逆的偶房。
這里提一下 Principle 對 Sketch 支持導入趁曼，用導入鍵導入是可編輯的，也分組和圖層棕洋。
然后還有幾個問題需要注意：
兩個軟件的畫板設置大小最好一樣挡闰，iPhone7 都是 iPhone7 ，Plus 都是 Plus 尺寸掰盘。
在Sketch中復制的「元素」摄悯，可以直接復制到 Principle ，但是是以圖片形式復制的愧捕，并且位置不是原始位置奢驯。
推薦將想導入的東西復制到新建的 Sketch 里再導入。
第一步：元素創(chuàng)作
現(xiàn)將所有出現(xiàn)的界面元素按照設計大小畫出次绘。不過之后有一部分是要在 Principle 中重畫的瘪阁。
第二部：開始日期和結(jié)束日期動效
原文作者也叫它「浮動標簽」 Label。
首先建立兩個畫板邮偎，分別放入如下元素
創(chuàng)造一個浮動標簽（label）的效果你需要準備三個文字圖層：預填充文字（灰色）管跺，標簽（label）文字（藍色）和主文字（黑色）。
左側(cè)頁面上半部分禾进，圖層中共有三部分文字：
1. 預填充文字「設置開始日期」透明度設置為100%以及合適的大小豁跑。
2. 標簽文字「開始日期」，文字透明度設置為0%泻云，文字大小以及位置和預填充文字一樣艇拍。
3. 主文字透明度設置為0%，文字大小以及位置和預填充文字一樣宠纯。
右側(cè)頁面上半部分淑倾，圖層中還是這三部分文字
1. 預填充文字「設置開始日期」透明度由100變?yōu)?%，文字位置和大小變?yōu)楹汀搁_始日期」一致」征椒。
2. 標簽文字「開始日期」，文字透明度由0變?yōu)?00%湃累，文字位置和大小不變勃救。
3. 主文字透明度由0變?yōu)?00%碍讨，文字大小位置不變。
請注意每個元素對應的名稱應該是一樣的蒙秒，Principel 根據(jù)名稱來匹配動畫勃黍。設置好后，點擊閃電符號設置兩頁之間的跳轉(zhuǎn)晕讲。得到的效果如下覆获。
第三部分：日期動效
這里的動效看似簡單，實際上還需要幾步設置瓢省。
建立一個畫板(圖中左側(cè))弄息，先繪制好背景和三個日期文字。
這里是一個直角變?yōu)閳A角的動畫勤婚，由于 Principle 不支持單獨編輯矩形的角摹量，而我們只想修改里側(cè)的角。所以我們用特殊的辦法實現(xiàn)馒胆。
在左側(cè)畫板中缨称，先創(chuàng)建兩個矩形，加上圓角祝迂。為他們之間加上深色塊睦尽。
在左側(cè)畫板中，我們繼續(xù)創(chuàng)建兩個矩形（用來產(chǎn)生圓角動畫）大小位置如下圖所示型雳，并且顏色和圓角矩形一致当凡。并且覆蓋住深色塊。
現(xiàn)在復制一個畫板四啰，將剛才新創(chuàng)建的兩個矩形（用來產(chǎn)生圓角動畫的）也調(diào)整為圓角宁玫。
設置兩畫板之間的跳轉(zhuǎn)，即可達成效果柑晒。
第四部分：日期選擇器
同樣先來看效果欧瘪。
需要先說清楚的是，可以看出這個日期選擇器擁有三個狀態(tài)分別是星期一在中間匙赞，星期二在中間佛掖，星期三在中間。只要設置好就可以任意跳轉(zhuǎn)涌庭。
那么首先我們來做星期二到星期一的動畫芥被，做成之后自然反著的也就有了。
如圖右先創(chuàng)建文字一共七行坐榆，
最上邊和最下邊是隱藏的拴魄，也就是透明度為0，
正數(shù)第二和倒數(shù)第二行，字體較小并且透明度 20%
正數(shù)第三行匹中，和倒數(shù)第三行夏漱，字體適中并且透明度 50%
中間一行，字體最大并且透明度 100% 顶捷，加粗挂绰。
這時候復制畫板到圖左。（左右順序無所謂服赎，我這里反著講的葵蒂，因為我先做的左邊）
一樣的配置不過因為我們只做了7行，所以這次是下方兩行字是 0%透明度重虑。如圖
然后在按剛才的透明度和字體大小排列践付，注意圖層的名字一定要一一對應，這是 Principle動畫的關鍵嚎尤。并且要注意對齊哦荔仁，否則動畫不美觀。
兩個狀態(tài)的做完了芽死，照此進行第三個狀態(tài)乏梁，也就是星期三在中間，然后設置好跳轉(zhuǎn)就行了
總體配置如下圖关贵，這下我們完成了時間選擇器的制作遇骑。
第四部分：整合與動效優(yōu)化
我們現(xiàn)在擁有了三個模塊的制作方法，現(xiàn)在只要整理好思路揖曾，制作出全流程的各個狀態(tài)落萎，就可以完成整個交互了。
狀態(tài)一（畫板一）至 狀態(tài)二（畫板二）
可以看到三個模塊炭剪，最下方的是不變的安排模塊练链。
想要的效果是點擊17號日期后，開始日期變換為2017年 10月 17 日奴拦。下方漸入出現(xiàn)時間選擇器并且時間選擇器時間和點選日期一致（這里我犯了一個錯誤媒鼓，錯弄成19號了），安排模塊漸隱消失错妖。
這里提一下漸入和漸隱的動畫绿鸣，狀態(tài)一其實是存在時間選擇器的，它的透明度為 0%暂氯，并且比狀態(tài)二高度高一些潮模，這樣動畫就會自動產(chǎn)生漸入的效果，同樣還是狀態(tài)二也有一個透明度為 0% 的日程安排模塊痴施，位置比狀態(tài)一要低一些擎厢，這樣會產(chǎn)生漸隱的效果究流。
接下來單擊18號日期，設置結(jié)束時間變?yōu)?2017年 10月 18日锉矢。
在接下來單擊19號沽损，運用我們剛才的日期制作技巧，產(chǎn)生圓角動畫變換到狀態(tài)4循头，此時結(jié)束時間和日期選擇器隨之變化绵估。同樣的單擊20號日期，結(jié)束時間和日期選擇器同樣隨之變化卡骂。
單擊SET缝左，跳轉(zhuǎn)到狀態(tài)6，和狀態(tài)一和二一樣的漸隱漸入浓若，日程安排模塊回來渺杉。這里左方有一個成功的動畫預設在屏幕外，然后狀態(tài)7 在屏幕中間挪钓，這樣一點擊后就可以自動生成動畫是越。
這里做好跳轉(zhuǎn)后點擊Animate,選擇狀態(tài)6-7的跳轉(zhuǎn)線可以將成功插畫的動畫類型調(diào)到 ?Spring，數(shù)值大家看著給就可以碌上，Tension代表著彈力倚评，越大動畫的動作就越夸張，F(xiàn)riction代表阻力（摩擦力）越大停下的越快馏予。
狀態(tài)6 設置「添加」鍵跳轉(zhuǎn)到狀態(tài)7天梧，這樣點擊「添加」后就會從左側(cè)彈出成功的插畫。
這7個狀態(tài)中前6個都是可逆的霞丧，大家自由添加各種元素的之間的跳轉(zhuǎn)呢岗，就可以形成最開始的Demo了。
最好再提醒蚯妇，圖層的名字一定一一對應的敷燎，只要是同一個模塊，名字一定相同才會有動畫箩言，否則很容易漫天亂飛硬贯。
最后我將提供我的 Sketch 源文件 和 Principle 源文件，覺得不錯的話陨收，可以把本文分享給小伙伴哦饭豹！
百度云鏈接: https://pan.baidu.com/s/1qYmeZ9q?
密碼: i31s
轉(zhuǎn)載請聯(lián)系我的微信鸵赖。
