前言
本原型是我按照簡書上的一篇進階（相比我這篇）翻譯教程寫出來的。
原作者省略的內容很多，大部分只講了最根本的方法。
但是我這篇會更加的詳細，對不知道如何具體做的同學來講應該可以順利做出效果。但是需要一定的耐心，和基礎。一定要耐心，并不難！
寫作時間：2017年10月底
我還在學習中，如果本文有任何問題，請私信提醒我，或者添加我的微信，我的微信號是mepolizhan，歡迎大家來交流
下面就正式開始。
制作概要
所需硬件：Mac電腦 ?所需軟件：Sketch（不必須）+Principle
先來看看最終的效果
可以看出，我基本上 1 : 1 制作出了原作者的效果，我制作的這個也是可交互的，整個過程是可逆的。
這里提一下 Principle 對 Sketch 支持導入，用導入鍵導入是可編輯的，也分組和圖層。
然后還有幾個問題需要注意：
兩個軟件的畫板設置大小最好一樣，iPhone7 都是 iPhone7 ，Plus 都是 Plus 尺寸。
在Sketch中復制的「元素」，可以直接復制到 Principle ，但是是以圖片形式復制的，并且位置不是原始位置。
推薦將想導入的東西復制到新建的 Sketch 里再導入。
第一步：元素創作
現將所有出現的界面元素按照設計大小畫出。不過之后有一部分是要在 Principle 中重畫的。
第二部：開始日期和結束日期動效
原文作者也叫它「浮動標簽」 Label。
首先建立兩個畫板，分別放入如下元素
創造一個浮動標簽（label）的效果你需要準備三個文字圖層：預填充文字（灰色），標簽（label）文字（藍色）和主文字（黑色）。
左側頁面上半部分，圖層中共有三部分文字：
1. 預填充文字「設置開始日期」透明度設置為100%以及合適的大小。
2. 標簽文字「開始日期」，文字透明度設置為0%，文字大小以及位置和預填充文字一樣。
3. 主文字透明度設置為0%，文字大小以及位置和預填充文字一樣。
右側頁面上半部分，圖層中還是這三部分文字
1. 預填充文字「設置開始日期」透明度由100變為0%，文字位置和大小變為和「開始日期」一致」。
2. 標簽文字「開始日期」，文字透明度由0變為100%，文字位置和大小不變。
3. 主文字透明度由0變為100%，文字大小位置不變。
請注意每個元素對應的名稱應該是一樣的，Principel 根據名稱來匹配動畫。設置好后，點擊閃電符號設置兩頁之間的跳轉。得到的效果如下。
第三部分：日期動效
這里的動效看似簡單，實際上還需要幾步設置。
建立一個畫板(圖中左側)，先繪制好背景和三個日期文字。
這里是一個直角變為圓角的動畫，由于 Principle 不支持單獨編輯矩形的角，而我們只想修改里側的角。所以我們用特殊的辦法實現。
在左側畫板中，先創建兩個矩形，加上圓角。為他們之間加上深色塊。
在左側畫板中，我們繼續創建兩個矩形（用來產生圓角動畫）大小位置如下圖所示，并且顏色和圓角矩形一致。并且覆蓋住深色塊。
現在復制一個畫板，將剛才新創建的兩個矩形（用來產生圓角動畫的）也調整為圓角。
設置兩畫板之間的跳轉，即可達成效果。
第四部分：日期選擇器
同樣先來看效果。
需要先說清楚的是，可以看出這個日期選擇器擁有三個狀態分別是星期一在中間，星期二在中間，星期三在中間。只要設置好就可以任意跳轉。
那么首先我們來做星期二到星期一的動畫，做成之后自然反著的也就有了。
如圖右先創建文字一共七行，
最上邊和最下邊是隱藏的，也就是透明度為0，
正數第二和倒數第二行，字體較小并且透明度 20%
正數第三行，和倒數第三行，字體適中并且透明度 50%
中間一行，字體最大并且透明度 100% ，加粗。
這時候復制畫板到圖左。（左右順序無所謂，我這里反著講的，因為我先做的左邊）
一樣的配置不過因為我們只做了7行，所以這次是下方兩行字是 0%透明度。如圖
然后在按剛才的透明度和字體大小排列，注意圖層的名字一定要一一對應，這是 Principle動畫的關鍵。并且要注意對齊哦，否則動畫不美觀。
兩個狀態的做完了，照此進行第三個狀態，也就是星期三在中間，然后設置好跳轉就行了
總體配置如下圖，這下我們完成了時間選擇器的制作。
第四部分：整合與動效優化
我們現在擁有了三個模塊的制作方法，現在只要整理好思路，制作出全流程的各個狀態，就可以完成整個交互了。
狀態一（畫板一）至 狀態二（畫板二）
可以看到三個模塊，最下方的是不變的安排模塊。
想要的效果是點擊17號日期后，開始日期變換為2017年 10月 17 日。下方漸入出現時間選擇器并且時間選擇器時間和點選日期一致（這里我犯了一個錯誤，錯弄成19號了），安排模塊漸隱消失。
這里提一下漸入和漸隱的動畫，狀態一其實是存在時間選擇器的，它的透明度為 0%，并且比狀態二高度高一些，這樣動畫就會自動產生漸入的效果，同樣還是狀態二也有一個透明度為 0% 的日程安排模塊，位置比狀態一要低一些，這樣會產生漸隱的效果。
接下來單擊18號日期，設置結束時間變為 2017年 10月 18日。
在接下來單擊19號，運用我們剛才的日期制作技巧，產生圓角動畫變換到狀態4，此時結束時間和日期選擇器隨之變化。同樣的單擊20號日期，結束時間和日期選擇器同樣隨之變化。
單擊SET，跳轉到狀態6，和狀態一和二一樣的漸隱漸入，日程安排模塊回來。這里左方有一個成功的動畫預設在屏幕外，然后狀態7 在屏幕中間，這樣一點擊后就可以自動生成動畫。
這里做好跳轉后點擊Animate,選擇狀態6-7的跳轉線可以將成功插畫的動畫類型調到 ?Spring，數值大家看著給就可以，Tension代表著彈力，越大動畫的動作就越夸張，Friction代表阻力（摩擦力）越大停下的越快。
狀態6 設置「添加」鍵跳轉到狀態7，這樣點擊「添加」后就會從左側彈出成功的插畫。
這7個狀態中前6個都是可逆的，大家自由添加各種元素的之間的跳轉，就可以形成最開始的Demo了。
最好再提醒，圖層的名字一定一一對應的，只要是同一個模塊，名字一定相同才會有動畫，否則很容易漫天亂飛。
最后我將提供我的 Sketch 源文件 和 Principle 源文件，覺得不錯的話，可以把本文分享給小伙伴哦！
百度云鏈接: https://pan.baidu.com/s/1qYmeZ9q?
密碼: i31s
轉載請聯系我的微信。
