? ? 首先引入一個問題----我們為什么需要動效設計?
? ? 我覺得cocoachina的一篇文章很好的闡述了這個問題的答案,包括加強體驗舒適度,減弱不可避免的不適感等等!附鏈接:我們為什么需要動效設計
? ? 本文所展示的動效登錄界面就是參照文章中列出的readme.io網站的登錄界面所編寫的~
? ? 本文效果Demo已經上傳到github,點擊去下載。
? ? 最終效果展示:
AnimationLogingView
第一步:界面搭建
? ? 界面搭建上并沒有什么出奇的地方,通過storyboard進行界面拖拽,唯一值得一提的地方就是貓頭鷹的兩個圓形手和兩個捂住眼睛的手都是imageView,其中捂住眼睛的手是事先放置在輸入賬戶密碼的界面后面被遮住。
? ? 界面邏輯透視如圖:
? ? 具體UI搭建可以參照Demo中的邏輯去做即可。
第二步:動畫效果實現
? ? 關鍵代碼:
動畫代碼
? ? 這段代碼實現的效果是在0.5s的時間內同時將隱藏在輸入框界面后的捂眼手上移到指定位置,以及將本來趴在框上的手,一邊向指定位置移動一邊縮小一直到完全消失。
? ? 由于兩個手的顏色是相同的,移動軌跡上又是重疊的,所以實際效果會使人產生一種錯覺,這個手是在慢慢變化的。