国产精品日日做人人爱,第84页国产精品,亚洲国产精品久久91精品

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

編者按：今天推薦兩個設計神器，一個是Airbnb??發布的開源動畫庫 Lottie，幫你輕松讓動效落地。一個是Sketch 44 新版的編組縮放功能詳解，為設計師提供更高效直觀的控制能力，一起來提高效率！

Sketch 44 新版響應式縮放功能詳解

Sketch 44 對編組縮放功能（Group Resizing）進行了升級。雖然從實現的角度講沒什么本質性的變化，但在操作方式上卻為我們提供了更高效、直觀的控制能力。

什么是編組縮放

對新版本進行探索之前，我們先來簡單了解和回顧一下功能的定義。

預先設定規則，使元素隨著父級編組或畫板（Artboard）的尺寸變化而進行響應式的調整，這便是編組縮放。通過這種方式，當我們改變編組或畫板的尺寸時，其中包含的圖層元素將不再被簡單粗暴的拉伸，以至形狀及布局結構被徹底破壞，而是會有規則的縮放、位移，或保持尺寸及位置恒定。下面的視頻演示了編組縮放功能設置前后的效果對比：

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

新版本發生了怎樣的變化

從最終實現結果的角度來看，新的縮放功能并沒有帶來很顯著的變化，但我們現在可以更直觀高效的設置響應規則了，譬如以可視化的方式將元素與某個側邊的距離設置為恒定，等等。而另一方面，新的設置方式對于新手來說又可能帶來一些困擾，例如難以體現出過去“Stretch”與“Float in place”的設置方法等等。沒關系，我們接下來就會講到，其實非常簡單。

可以說，使用舊版本的縮放功能同樣能夠實現出如今的多數效果，只是有些地方可能要用到一些額外的小技巧；因此再次強調，從實現結果的角度講，Sketch 44 當中的響應式設計功能相比于從前并不算是本質性的突破，只是在直觀性等使用體驗上有了明顯提升，并且更貼近于 Xcode 等開發工具當中所提供的相關模式。

一個范例，演示各種可能性

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

這個范例當中最重要的細節在于下方的網格編組。要實現這樣復雜的響應式布局，除了縮放設置之外，我們還需要在編組中添加一些隱藏圖層，否則網格之間的間距將隨著容器尺寸的調整而發生變化。

每個元素的響應規則設置詳見下圖：

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

我制作了一張圖表，以便更加清晰的演示新舊版本設置之間的對應關系。當然其中一些新版本的設置方式并不能通過舊版本來實現，因為在舊版當中你無法為同一元素設置多重屬性，例如第五條當中那樣。

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

新建圖層或編組的默認設置，即“Stretch”。
將元素在各個方向上進行縮放，以保持元素與容器之間的距離不變，即“Resize object”。
將元素釘在容器的某個邊角，即“Pin to corner”。
使元素保持原本的尺寸并懸浮于容器之中，即“Float in place”。
將元素釘在容器左上角，高度保持不變，寬度則隨著容器尺寸的變化而拉伸。
將元素釘在容器上邊緣，高度保持不變，橫向保持與容器之間的距離不變。

你可以下載這個范例的 Sketch 文件：http://pan.baidu.com/s/1slK1XZR，進行深入研究。

期待

Sketch 推出響應式編組縮放功能已經有一年的樣子了，這絕對是個正確的決策，而此次新版帶來的可視化設置方式更是早該提供。比起優化調整來說，我個人更期待一些重大的改進，例如圖層堆棧、自動縮放、圖層之間的約束設置、網格布局等等。

此外，我認為 Bohemian Coding 團隊或許有些缺乏謹慎，因為遲緩且缺少規劃的關鍵功能升級往往導致設計師們長時間處于一種不穩定的工作流程當中，尤其是涉及到圖層樣式、Symbols 一類最為重要的功能時。不該迫使設計師每一次都要隨著工具的升級而重新學習和適應。

總之，我認為 Bohemian Coding 應該制定更合理的路線圖，在開發關鍵功能時更具謹慎精神。畢竟，我們愛 Sketch，我們都希望它變得更加強大。

AE 動畫直接變原生代碼：Airbnb 發布開源動畫庫 Lottie

Airbnb 發布的 Lottie 是一個面向 iOS、Android 和 React Native 的開源動畫庫。

簡單來說，就是可以直接利用 AE 導出的 JSON 動畫文件，將其解析為原生代碼，并跨平臺運行在設備上。

Lottie

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

根據身邊朋友的試用，通過 Canvas 繪制動畫非常非常流暢，并且在 AE 動畫沒有遮罩的前提下內存控制得也非常好，基本可以取代用 GIF 做動畫。

一個 JSON 文件可以同時復用于 iOS 和 Android ，免去了動畫重復開發實現，并且還原度都比較高。

唯獨當 AE 動畫大量使用遮罩時，內存管理似乎還有些 Bug。

名字 Lottie 好像來源于一個德國以剪輯電影出名的導演。

總的來說，這個動畫庫為跨平臺低成本動畫實現提供了非常有想象力的解決方案，一旦做成了對很多前端同學會有一定的沖擊......畢竟以后做牛逼的動畫可能就不那么稀奇了。

順便，設計師們趕快去抓一抓 AE 吧，以后實現原生動畫可能就沒那么費勁，許多好效果也都可以慢慢搬上臺面了。

Airbnb Design 博客原文如下：

一直以來，在 Android、iOS、React Native 上實現一套復雜動畫是一件蠻困難而且耗時的事。開發者們不僅要為各種屏幕尺寸加載一大堆素材，還得寫成百上千行生硬、難維護的代碼。正因如此，絕大部分 App 都不愿意使用動畫 —— 盡管動效對用戶體驗來說是一個強大的工具。為此，從一年前開始，我們就想要改變這件事。

一年后的今天，很高興和向大家介紹我們的解決方案——Lottie。Lottie 是一個面向 iOS、Android、React Native 的動畫庫，能給實時繪制 After Effects 動畫并且讓原生 App 像使用靜態素材一樣使用這些動畫。

通過插件 Bodymovin，Lottie 可以直接解析 AE 導出的 JSON 文件，并且插件內置的 JavaScript 圖層可以將動畫直接在 Web 上運行。自2015年2月起，Bodymovin 的創始人 Hernan Torrisi 就一直在優化這個插件，以得到更好的功能，而我們整個團隊也開始了這項不同尋常的工作。（Brandon Withrow 負責 iOS, Gabriel Peal 負責 Android, Leland Richardson 負責 React Native, 以及我負責設計和體驗。）

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

Lottie 讓工程師們可以輕松實現豐富的動畫效果。我們所熟悉的如 Nick Butcher 的跳動進度條效果、Bartek Lipinski 的漢堡菜單欄動畫、Twitter 的愛心動效就是實現動畫費時費力的最好代表。而通過 Lottie，工程師可以準確地實現設計師所要的動畫效果，并且使得那些與動畫框架做斗爭、猜測動畫時間和手動重建動畫曲線等等繁復的操作成為歷史。

我們的目標就是盡可能準確地實現 AE 制作出來的動畫，Lottie 提供的示例 App 將會向大家展示如何利用 AE 和 JSON 文件快速、靈活且精確地實現動效。在示例中，也提供了很多復雜動畫的源文件，包括以線條為基礎的動畫、以字體變形為基礎的動畫、動態 Logo 以及多角度多切面的效果。

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

目前的 Airbnb App 中已經有不少動畫是通過 Lottie 實現的，如應用內通知、全動畫引導、評價頁面等。接下來我們還打算在趣味性的動畫上進一步拓展。

神器兩連發！開源動畫庫Lottie+Sketch新版響應式縮放功能詳解

靈活、高效的解決方案

Airbnb 是一家全球化的公司，服務于數百萬旅行者和房主，因此我們的動畫也將運行在各種各樣的設備和平臺上。盡管 Marcus Eckert 的 Squall 和 Facebook 的 Keyframes 庫和 Lottie 很相似，但我們各自的目標略有不同。

Facebook 為專注于響應式布局，只選擇支持了少數 AE 動效，Lottie 則打算盡可能多的實現效果本身。Squall 的 AE 預覽 App 是非常有用的工具，但它目前只支持 iOS，所以我們的工程師需要跨平臺的解決方案。

Lottie 的 API 中集成了許多很棒的功能，讓整體變得更佳高效和易用：它支持通過網絡加載 JSON 文件，這對 A/B 測試方案非常有用；它有可選的緩存機制，能支持調用緩存中的動畫；動畫的速度、相關聯的手勢都可以通過簡單的參數來控制；甚至 iOS 中還支持在 Runtime 中添加額外的原生 UI ，從而實現復雜的過渡動畫。

除了目前已有的各個功能之外，未來我們還打算為 Lottie 動畫增加 mapping 視圖、轉場視圖等功能。