潮自拍打開相機動畫分析

潮自拍是一款很受自拍者喜愛的App,無論是它漂亮時尚的濾鏡還是它個性的動畫效果,下面我將就點擊拍照後打開相機的動畫進行大致分析,分析的不到位的還請大神指教。

點擊拍照按鈕後,會有類似幕布打開效果,通過拉開幕布,開啓拍照功能。具體動畫效果如下展示:(由於該gif較大,無法正常上傳,筒子們感興趣的還請自行在app中查看)。

該動畫主要分爲三部分組成,第一部分白線由短到長,第二部分移動該App的logo至中心區域,第三部分將幕布打開。

下面先來分析第一部分的實現過程。首先背景設置爲橘紅色,其實現爲兩個UIView,等高等寬,分別平分屏幕,只要設置其背景顏色即可。然後在上面疊加2個UIImageView,分別疊加在剛纔的UIView上邊,背景設爲白色,寬度根據效果進行調節,然後利用時間控制該UIImageView的高度以及y座標,使一定時間後貫穿整個屏幕。即可實現第一部分的效果。

第二部分爲logo上下相對滑動,最終拼接爲一個完成的圖形。該部分可以事先截取相應半邊圖形,分別將這兩個UIImgeView疊加在剛纔的兩個UIView上邊,然後將其設置爲UIImageView的背景圖,將初始座標設爲屏幕邊緣,然後隨着時間變化逐漸向屏幕中間移動,其寬高都不改變,直至最終y座標相遇,拼接爲一個完整的logo。第二部分即可完成。

第三部分爲幕布打開效果。這個部分主要依託於原來的佈局,將屏幕分爲等分的兩部分UiView,然後其他的控件都堆放在這之上,然後根據時間變化設置動畫,改變其x座標,從而實現隨時間幕布緩緩拉開的效果即可。

該動畫實現起來過程算複雜,但是設計師要想把動畫做的讓用戶感覺很舒服還要費一番心思纔可以。


發佈了37 篇原創文章 · 獲贊 27 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章