[譯]《Motion Design for iOS》(六)

動畫屬性

回頭看看上一節顯示的動畫,它們是如何從一個空白的畫布或白班變成一個復雜、漂亮的動畫的?這些動畫是怎么產生的?在變化過程中改變的特殊屬性是什么?在回憶中搖晃你的手來表明一些物體應該移動或拉伸是不夠的:如果你想要動畫脫離你的手進入界面,你需要仔細思考在每一步中會發生什么以及哪些值被操作了。

如果你看一下上一節展示的動畫GIF圖,以及像CAPPTIVATE.co和其他網站展示的多種動畫,并且你對發生了什么觀察得非常仔細,你就會開始在視覺效果中看出一些模式來。這些模式是設計師和開發者在他們的動畫中一次又一次改變的特定屬性,而且這還不是全部。事實上我認為如果你簡單地操作下面三個屬性就可以創建一個充滿了世界級動畫的完整app:

  1. 位置:界面上一個物體的精確的X和Y坐標。
  2. 透明度:一個物體的透明度,從0.0(不可見)到1.0。
  3. 比例:一個物體對比于其原始尺寸的尺寸。1.0的比例意味著物體被設置為其原始大小的高和寬。0.5的比例意味著物體是一半的寬度和高度。0.0的尺寸意味著物體的寬度和高度都是0,但依然存在于界面上一個特定的坐標。2.0的比例意味著物體的高度和寬度是原始的兩倍。

這三個屬性是人們設計iOS app的動畫時三個可動畫化的值。你可以通過簡單地單獨或結合使用這些屬性實現驚人數量的好動畫。

所以通過位置、透明度和比例這三個屬性,你能做什么?怎樣做才能操作這些屬性來在屏幕上實現?

查看完整合集:https://github.com/Cloudox/Motion-Design-for-iOS


查看作者首頁

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容