亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

以前做一些用在 app 上的小動效，例如下拉刷新、標簽欄 icon 等動效，都是用的 GIF 格式，但是 GIF 有幾個缺點：

①文件大

GIF 的原理是把整個動效拆分成一張一張的靜態(tài)圖片，按照設置的幀速率播放這些圖片，通常將幀數(shù)率設置為25，就是1秒鐘播放25張圖片；如果這個動效的時間比較長，這個 GIF 里就會包含很多圖片，圖片越多， GIF 文件就越大；

②占資源

文件越大，播放時占用的資源就會越高（內存和 CPU ），容易出現(xiàn)卡頓；

③有鋸齒

用 PS 導出帶透明背景的 GIF 時，描邊選擇為“無”，導出的 GIF 四周就會有鋸齒；描邊選擇有顏色，動圖用在與描邊顏色不同顏色的背景上就會很違和；

由于 GIF 做動效有很明顯的缺點，用在 app 上的小動效用 Lottie 動畫更合適。

一、動效原理

Lottie 是 Airbnb 開發(fā)的一款能夠為原生應用添加動畫效果的開源工具，是一種基于 JSON 的動畫文件格式，可以在 iOS 、 Android 、 Web 和 React Native 上使用 Lottie 文件，實時渲染 AE 動畫特效。

我們使用的 AE ，底層也是通過代碼運行的，我們的每一步操作都有對應的代碼在實現(xiàn)功能。Lottie 使用的是 Bodymovin 這個插件從 AE 里導出的 JSON 文件，Bodymovin 會將我們在 AE 里所有操作，像做會議紀要一樣，全部記錄在 JSON 文件里，將時間軸完整地導出來，還原每一個圖層從第一幀到最后一幀的所有關鍵幀信息。

二、交付步驟

在 AE 里安裝 Bodymovin 插件（https://github.com/bodymovin/bodymovin），把做好的動效用這個插件導出為 JSON 文件。

然后讓開發(fā)小哥在代碼里添加 Lottie 庫，就可以解析 JSON 文件并播放動效了。

iOS：https://github.com/airbnb/lottie-ios

安卓：https://github.com/airbnb/lottie-android

React Native：https://github.com/airbnb/lottie-react-native

由于 Lottie 使用的是關鍵幀動畫描述，如果只是從A點勻速移動至B點這樣簡單的一次線性方程，播放起來就很順暢；當遇到二次線性方程、貝塞爾曲線方程這些高階插值計算的時候，可能會降低性能。

三、注意事項

1、Lottie 支持的AE效果

Lottie 在不同原生應用中所支持的 AE 效果有所差異，全部內容可以參閱官方的支持功能表。

https://airbnb.io/lottie/#/supported-features

這里列舉 3 個我在工作中遇到的問題：

①漸變

在這個小動效中，有一部分圖層設置了漸變填充。

Lottie 是支持 AE 的漸變的，但用 Bodymovin 從 中文版的 AE 導出的漸變會變成灰度漸變，原本的所有漸變數(shù)值都變成了從白（#FFFFFF）到黑（#000000）。

這是因為 Bodymovin 識別不出以中文命名的漸變填充，我們可以打開 Bodymovin 導出的 json 文件，能看到里面所有漸變填充對應的數(shù)值都是[0,1,1,1,1,0,0,0]，這代表的就是從黑到白的漸變。

該問題的解決辦法是，將設置得有有漸變的圖層內的“漸變填充1”改名為英語“gradient fill1”（如果該圖層只有一個漸變，該命名也可以不加序號1），這樣 Bodymovin 就能識別出以英文命名的漸變填充了。

②運動模糊

雖然官方的支持功能表里沒有明確注明是否支持運動模糊效果，但有寫到安卓是支持高斯模糊的。

針對某些動效，加上運動模糊效果會顯得更生動。但要注意的是，用 Bodymovin 從 AE 導出的帶有運動模糊的效果，只有在安卓系統(tǒng)上能顯示。

③表達式

在制作動效的過程中，運用表達式可以讓我們高效率地實現(xiàn)想要的效果。例如給放大動效加上回彈表達式，就可以讓放大效果看起來更生動，且不用自己手動去一幀一幀調節(jié)回彈的細節(jié)。

雖然 Lottie 不支持 AE 的表達式，但我們可以在 AE 里安裝 Easy Bake 插件，把用表達式生成的動效轉換為關鍵幀。

轉換之后，表達式的效果變成了一個一個的關鍵幀，這樣就能夠導出動效到 Lottie 里使用了。

2、導出圖片類動效

如果動效文件中有位圖，在導出之前時，需要點開設置菜單，勾選Include in json

Lottie 早期的版本是不支持圖片類動畫的，導出 json 之后會自動生成一個 img 的資源文件夾，播放 json 文件時，需要解壓資源壓縮包到本地目錄才能正常播放。Bodymovin V5.1.15之后，Lottie 將圖片轉為 base 64 編碼，使用字符代替圖像地址，并封裝在 json 里，就可以直接播放 json 文件而不用再拖著一個資源文件夾了。

但是轉 base64 需要編譯，在一定程度上會影響性能，因此不推薦用 Lottie 做位圖動效。

對于位圖動效，SVGA 是更適合的。

首次在工作中接觸到 SVGA ，起因是需要在登錄界面做一個全屏的動效，用于手機、平板、電腦端。

同樣內容的位圖動效， 導出三種格式比較，SVGA 文件是最小的，并且比另外兩種格式小非常多。

一、動效原理

 SVGA 是由 YY UED 團隊提供的一種跨平臺的開源動畫格式。

不同于 GIF 是由很多位圖構成， SVGA 的原理是：

從 AE 文件中提取所有的圖層，并將其在時間軸中每幀的參數(shù)（位移、縮放、旋轉、透明度）導出，生成 SVGA 文件。因為導出的圖層數(shù)量通常都不多，而且圖層的屬性值都是非常輕量的代碼，所以生成SVGA文件的大小才會這么小。

二、交付步驟

在 AE 里安裝 SVGAConverter 插件（http://svga.io/designer.html），把做好的動效用這個插件導出為 SVGA 文件。 

然后讓開發(fā)小哥需要先在代碼里添加一個專用的播放器 SVGA Player，就可以播放 SVGA 格式了。

http://svga.io/integrated.html

播放前，會一次性地上傳所有圖片到 GPU ，在播放的過程中，圖片都在不斷復用，大大提升了性能，并且只有很簡單的位移、縮放、旋轉、透明度屬性，不用解析高階插值（二次線性方程，貝塞爾曲線方程），因為導出的是每一幀，所以實際的播放過程中不會過多占用內存和 CPU ，也就不容易出現(xiàn)卡頓的現(xiàn)象。

三、注意事項

1、文件大小

SVGA 文件的大小，與動效中所包含的圖片大小相關；圖片越小，SVGA 文件越小。

PNG 圖片的文件大小可以通過 TinyPNG 這個在線網(wǎng)站壓縮，每次可以上傳20張圖片進行壓縮。

https://tinypng.com

這里所指的圖片大小是原始圖片的大小，在AE中縮小圖片或合成尺寸，導出的 SVGA 文件大小是不會有變化的。

2、內存占用大小

如果導出的 SVGA 內存占用過大，在AE中會彈出提示。

SVGA 內存占用的大小，與動效中所包含的圖片的分辨率相關，減少圖片中的透明像素能極大縮小所占內存。

例如下圖的花瓣下落動效， 所有的花瓣都在一張圖片上，這張圖片就包含了大量的透明像素

同樣的動效，將花瓣單獨切為一張一張的圖片，導出的SVGA 所占內存，比之前整整少了95%

3、SVGA的缺點

① SVGA 適合位圖動畫，對于過于復雜的矢量形狀圖層可能會出現(xiàn)問題；

② SVGA 對于 AE 自帶的很多效果如漸變、生成、描邊、擦除等等，都不支持。

Powered by Froala Editor