1.Lottie是什么
Lottie是Airbnb開源的一個支持iOS,Android,React Native和Web的動畫庫,我們可以使用設(shè)計師導(dǎo)出來的json文件快速實(shí)現(xiàn)動畫效果.
2.如果我們想要實(shí)現(xiàn)下列動畫
我們使用現(xiàn)有技術(shù)會遇到的問題：
1.每一幀都是一張圖片屿讽，文件過于龐大。
2.不同分辨率設(shè)備的適配存在不便吠裆。
3.Gif格式的色深問題無法解決伐谈。
4.想要在線獲取動畫成本比較高。
替代方案:
現(xiàn)在可以使用開源的Lottie動畫庫來實(shí)現(xiàn)相應(yīng)效果试疙。
UI需要做的是诵棵，通過AE生成動畫，然后使用bodymovin插件導(dǎo)出json和sourse(非必須)文件即可祝旷。
對比gif和json的大小及清晰度區(qū)別:
上面的方案:原始518k,壓縮后514k
下面的方案:原始29k,壓縮后5k
3.使用方法
1.直接添加一個動畫視圖
2.switch類控件
3.轉(zhuǎn)場動畫
支持協(xié)議即可,在回調(diào)中使用動畫
4.代碼結(jié)構(gòu)
LOTAnimationView
繼承自LOTView,也就是UIView,主要是封裝了一些動畫的操作
LOTComposition（動畫數(shù)據(jù)）
用于解析動畫的json文件履澳，獲取整個動畫數(shù)據(jù)
LOTLayerGroup（Layer動畫組）
解析json文件中的"layers"?層的數(shù)據(jù)返回所有LOTLayer?集合
LOTLayer
解析獲得json文件中的每一個layer數(shù)據(jù)具體詳情
更多結(jié)構(gòu)示意
5.注意事項(xiàng)
? 如果使用了素材, 那么素材圖片的每個像素都會直接加載進(jìn)內(nèi)存, 并且是不能釋放掉的, 所以, 如果是一些小圖片, 加載進(jìn)去也還好, 但是如果是整頁的啟動動畫, 不拆分一下素材, 可能一個啟動頁所需要的內(nèi)存就是50MB以上. 如果不使用素材, 而是在AE中直接繪制則沒有這個問題.
? 如果使用的PS中繪制的素材, 在AE中做動畫, 可能在動畫導(dǎo)出的素材中出現(xiàn)黑邊, 解決辦法是將素材拖入PS去掉黑邊, 同名替換.
? 拆分素材的辦法是將一個動畫中靜態(tài)的部分直接切出來加載, 動的部分單獨(dú)做動畫
? 如果一個項(xiàng)目中使用了多個Lottie的動畫, 需要注意Json文件中的路徑及素材名稱不能重復(fù), 否則會錯亂
? Lottie先天就支持播放式動畫, 對于交互式動畫有個animationProgress的屬性
4.其他
圖片的另一種形式-矢量圖
導(dǎo)入工程的方式:
1.簡單使用
與 PNG 格式的圖片一樣，在 Xcode 中把 PDF 格式的矢量圖拖進(jìn) *.xcassets (默認(rèn)是 Assets.xcassets) 文件夾中怀跛，然后用不帶后綴(.pdf)的文件名生成 UIImage
imageView.image?=?[UIImage?imageNamed:@"Vector"];
注意距贷，如果以上代碼用 "Vector.pdf"，無法得到 UIImage吻谋。
這樣做的話忠蝗，Xcode 會在編譯時根據(jù) PDF 圖的大小生成 @1x、@2x漓拾、@3x 的 PNG 圖片阁最，與使用 PNG 圖片的顯示效果相同。如果把圖片放大到超過 PNG 圖片的大小骇两，則會顯示模糊的圖片闽撤。沒有發(fā)揮矢量圖可以任意調(diào)整大小的優(yōu)點(diǎn)。
2.改變矢量圖大小
如果需要改變矢量圖大小并且保持清晰度脯颜，那就要解析 PDF 源文件，把矢量圖繪制成所需大小的位圖(Bitmap)贩据。YHPDFImageLoader?庫就實(shí)現(xiàn)了這個功能栋操，并且可以選擇拉伸圖片時是否保持原圖寬高比闸餐，還添加了內(nèi)存和磁盤緩存。這里的 PDF 文件放在工程目錄中矾芙，與 *.m舍沙、*.h 文件一樣,可以放在bundle，不能放在 *.xcassets 里剔宪。
矢量圖加入工程中的優(yōu)點(diǎn)
1.APP 瘦身
對比一下某個圖標(biāo)的一套常規(guī)的 PNG 圖片和 PDF 類型的圖片的大蟹髡 ：
PDF 文件大小為 7KB
PNG 三個文件合計大小為 85KB
這里的PNG圖片還可以壓縮,壓縮后可能會有較大幅度變更.
2.便于維護(hù)
方便后續(xù)的不同scale變化,不必要使用4x,5x等尺寸
3.可以無限放大
在文件大小固定的情況下可以無限放大,更加節(jié)省空間
其他工具 - PaintCode
代碼直接將SVG文件轉(zhuǎn)換成iOS代碼,可以放到drawRect中實(shí)現(xiàn)純代碼繪制相應(yīng)UI樣式
