1. 程式人生 > >AE 動畫直接變原生程式碼:Airbnb 釋出開源動畫庫 Lottie

AE 動畫直接變原生程式碼:Airbnb 釋出開源動畫庫 Lottie

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

簡單來說,就是可以直接利用 AE 匯出的 JSON 動畫檔案,將其解析為原生程式碼,並跨平臺執行在裝置上。

QQ截圖20170208124443.png

根據身邊朋友的試用,通過 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, 以及我負責設計和體驗。)

icons.gif

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

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

333.gif

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

332.gif

靈活、高效的解決方案

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

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

Lottie 的 API 中集成了許多很棒的功能,讓整體變得更佳高效和易用:它支援通過網路載入 JSON 檔案,這對 A/B 測試方案非常有用;它有可選的快取機制,能支援呼叫快取中的動畫;動畫的速度、相關聯的手勢都可以通過簡單的引數來控制;甚至 iOS 中還支援在 Runtime 中新增額外的原生 UI ,從而實現複雜的過渡動畫。

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

搭建社群

Airbnb 將 Lottie 在 GitHub 開源出來,正是希望它能成為連線開發者和設計師們的一個橋樑,讓所有喜歡動畫的人都加入進來。

9 Squares, Motion Corpse, 和 Animography 等動畫交流社群的興起讓我們倍受鼓舞,它們讓全世界的動畫人連結到一起,即便這些人從來沒有一起工作過。雖然這個過程伴隨各個團隊之間持續幾個月的爭吵,但毫無疑問,最終的成果對動畫界來說價值非凡。

在這些人的引領下,Airbnb 接觸到這三大動畫社群,並將來自它們的許多動畫增加到我們的示例 App 中。我們相信把這些驚豔的設計整合到 Lottie 強大的工程師社群中,將會點燃創意的火花。

331.gif

我們非常樂意收到來自使用者的反饋——無論你是設計師、動畫製作者、工程師,都可以通過 [email protected] 的郵箱和我們聯絡。我們也無比期待看到全世界使用 Lottie 的使用者所匯聚成的團體能給創造出怎樣的奇蹟。

Lottie 官方網站(可下載 AE 外掛、三大平臺程式碼和示例)

相關推薦

AE 動畫直接原生程式碼Airbnb 釋出開源畫庫 Lottie

Airbnb 釋出的 Lottie 是一個面向 iOS、Android 和 React Native 的開源動畫庫。 簡單來說,就是可以直接利用 AE 匯出的 JSON 動畫檔案,將其解析為原生程式碼,並跨平臺執行在裝置上。 根據身邊朋友的試用,通過 Canvas 繪製動畫非常非常流暢,並且在 A

使用 Facebook開源畫庫 POP 實現真實衰減動畫

tran rect mov rec efault gin calayer uibutton height 1. POP動畫基於底層刷新原理。是基於CADisplayLink,1秒鐘運行60秒,接近於遊戲開發引擎 @interface Vie

lottie-android: 【Android】開源畫庫Airbnb開源

Lottie支援Android、iOS、React Native平臺,支援實時渲染After Effects動畫,使得app中使用動畫可以像使用靜態資源一樣簡單。 dependencies { implementation 'com.airbnb.android:lo

Android動畫進階—使用開源畫庫nineoldandroids

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

BodymovinBodymovin和LottieAE動畫轉換成HTML5/Android/iOS原生動畫 大殺器Bodymovin和LottieAE動畫轉換成HTML5/Android/iOS原生動畫

轉自:https://www.cnblogs.com/zamhown/p/6688369.html 大殺器Bodymovin和Lottie:把AE動畫轉換成HTML5/Android/iOS原生動畫   前段時間聽部門老大說,Airbnb出了個移動端的動畫庫Lottie,可

[置頂] 找工作知識儲備(3)---從頭說12種排序演算法原理、圖解、動畫視訊演示、程式碼以及筆試面試題目中的應用

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

手把手實現JS原生程式碼與Servlet的前後互動實現

1.涉及到的知識 前端語言:javascript,html,如果可以的話,再來一個CSS用於設計樣式 後端語言:Java 前端技術:ajax(可以用JQ框架,簡單又高效。但是希望用原生程式碼來寫,容易搞懂原理) 後端技術:servlet 2.前端 2.1 首先寫一

程式設計師面試沒帶膝上型電腦,直接手寫程式碼 HR激動叫到老鐵666

生活在這個忙碌的社會,我們總是在忙碌中丟三落四。我們會從家出門忘帶鑰匙,我們會上班路上想起忘帶工牌,到公司想起昨天晚上在家加班的資料沒拿,甚至上班時起身去打杯水,途中看了下手機回來忘記拿水杯。 最尷尬是也許就在於,去面試吃飯的傢伙沒帶了! 這是一個真實而感人的故事,程

視訊直接漫畫!GAN又有了新玩法|Demo+程式碼+論文

GAN,又有了新“玩法”。 最近,一個能夠將視訊直接轉化成漫畫的工具,引發了很大關注。 它的效果是這樣的:       Twitter上不少學者去圍觀,體驗的效果是這樣的:       有網友評價稱,“

Python練習題9(密碼判斷)請寫一個密碼安全性檢查的程式碼程式碼 首先判斷密碼的強度,如果結果是低或中則列印如何提升密碼安全級別的提示,而高則直接退出

'''請寫一個密碼安全性檢查的程式碼程式碼:首先判斷密碼的強度,如果結果是低或中則列印如何提升密碼安全級別的提示,而高則直接退出 # 密碼安全性檢查程式碼## 低階密碼要求:# 1. 密碼由單純的數字或字母組成# 2. 密碼長度小於等於8位## 中級密碼要求:# 1. 密碼必須由數字、字母或特殊字元(僅限:

12種排序演算法原理、圖解、動畫視訊演示、程式碼以及筆試面試題目中的應用

0、前言      從這一部分開始直接切入我們計算機網際網路筆試面試中的重頭戲演算法了,初始的想法是找一條主線,比如資料結構或者解題思路方法,將博主見過做過整理過的演算法題逐個分析一遍(博主當年自己學演算法就是用這種比較笨的刷題學的,囧),不過又想了想,演算法這東西,博主自己學的過程中一直深感,基礎

找工作知識儲備(3)---從頭說12種排序演算法原理、圖解、動畫視訊演示、程式碼以及筆試面試題目中的應用

作者:寒小陽 0、前言      從這一部分開始直接切入我們計算機網際網路筆試面試中的重頭戲演算法了,初始的想法是找一條主線,比如資料結構或者解題思路方法,將博主見過做過整理過的演算法題逐個分析一遍(博主當年自己學演算法就是用這種比較笨的刷題學的,

專訪設龍重新定義設計 顛覆傳統企業圖片管理方式

探索俗話說的好,佛靠金裝,人靠衣裝,三分長相,七分打扮。喜歡一個人,始於顏值,陷於才華,忠於人品!愛一個產品,始於顏值,陷於效果,忠於品質!產品的成功除了做好內功,最重要的是靠包裝。圖片在包裝設計中起到的作用,不僅僅是畫龍點睛,甚至可能帶來量變到質變的轉化。產品氣質的核心在於視覺形象這句話說的一點也沒錯。互聯

移動web原生開發打包,嵌入h5頁面 webApp全部都是H5開發的應用 混合APP使用第三方開發平臺從apicloud,appcan,hbuilder等開發,cordova技術打包 原生APP就是eclipse開發或者studio等工具開發

應用 手機 .com net ack 自動連接 pan 經驗 使用 論壇43213 移動端webApp兼容問題解決 談談App混合開發 Hybrid APP混合開發的一些經驗和總結 PhoneGap是一個采用HTML,CSS和JavaScript的技術,創建

太深了,梯度傳不下去,於是有了highway。 幹脆連highway的參數都不要,直接變殘差,於是有了ResNet。 強行穩定參數的均值和方差,於是有了BatchNorm。RNN梯度不穩定,於是加幾個通路和門控,於是有了LSTM。 LSTM簡化一下,有了GRU。

梯度 直接 ID orm rop 發展 均值 nor 噪聲 請簡述神經網絡的發展史sigmoid會飽和,造成梯度消失。於是有了ReLU。ReLU負半軸是死區,造成梯度變0。於是有了LeakyReLU,PReLU。強調梯度和權值分布的穩定性,由此有了ELU,以及較新的SELU

Silverlight & Blend動畫設計系列十二三角函數(Trigonometry)動畫之自由旋轉(Free-form rotation)

name angle 最終 clas oot pos ftp 旋轉動畫 one 說到對象的旋轉,或許就會聯想到對象角度的概念。對象的旋轉實現實際上就是利用對象的角度改變來實現的位置變換,在《Silverlight & Blend動畫設計系列二:旋轉動畫(Rotate

Silverlight & Blend動畫設計系列十一沿路徑動畫(Animation Along a Path)

幀動畫 -- long png ref wid found 不用 system.in 原文:Silverlight & Blend動畫設計系列十一:沿路徑動畫(Animation Along a Path)  Silverlight 提供一個好的動畫基礎,但缺少一種

hql的通用分頁,檢視,原生程式碼

BaseDAO package com.zking.eight.util; import java.util.Collection; import java.util.List; import java.util.Map; import org.hibernate

IOS 原生介面和Weex容器互相跳轉實踐 附部分js和原生程式碼

weex相關原理,請看官方網站 此IOS Weex demo實現的功能,從原生介面跳轉到Weex容器頁面,然後點選Weex容器頁面的button(js)跳轉到另一個原生介面。 一. 先上效果圖   二.實現 1. weex容器渲染的js程式碼如下,上面

ifeve.com 南方《JVM 效能調優實戰之使用阿里開源工具 TProfiler 在海量業務程式碼中精確定位效能程式碼

https://blog.csdn.net/defonds/article/details/52598018 多次拉取 JStack,發現很多執行緒處於這個狀態:    at jrockit/vm/Allocator.getNewTla(JJ)V(Native Method)