一二三四区国产在线,英日美女aV在线,国产亚洲精久久久久久

Github 上有很多前輩分享了優(yōu)秀的動畫, 基本開發(fā)中需要的動畫在其中都能找到. 如果碰到特別棘手的需求, 沒有現(xiàn)成的可以參考, 我們可以借助 Lottie 這個框架快速實現(xiàn)動畫.

Lottie 是 Airbnb 開源的一套動畫庫, 我們可以使用 Adobe After Effects (俗稱AE) 設計出動畫, 使用 Lottie提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式, 就可以直接運用在 iOS, Android, Web和 React Native之上, 無需其他額外操作.

我把一些可以利用的資源寫在前面.

鏈接	說明
lottie 官網(wǎng)	lottie 官網(wǎng)
lottie-android	Android 應用
lottie-ios	iOS 應用
lottie-react-native	RN 應用
lottie-web	Web 應用
AE 破解版	AE 破解版下載鏈接, 也可以在這里下載
Bodymovin 插件	AE插件, 用于將 aep 文件導出為 json 文件
AE 插件安裝器	親測, 好用
lottie 動畫社區(qū)	lottie 動畫庫, 有很多輪子可供下載編輯
json文件格式	利用 Bodymovin 插件將動畫從 AE 中導出的 JSON文件

lottie 使用

在 lottie-ios 很容易找到演示的Demo. 我在 lottiefiles 上找了一個material-loading 加載動畫. 通過下載, 我們可以直接獲取到 json 文件.

注意

這里有一個 preview 功能, 我們能在這里上傳我們做的 json 文件來預覽動畫.

播放動畫

利用 cocoapods 加載框架

pod 'lottie-ios'

播放動畫

將 json 文件導入在工程中, 利用以下代碼運行

func testMaterialLoad() {
    // 創(chuàng)建動畫視圖
    let loadAnimation = LOTAnimationView(name: "data2")
    loadAnimation.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
    // 添加動畫視圖
    view.addSubview(loadAnimation)
    
    // 播放
    loadAnimation.play(fromProgress: 0, toProgress: 0.5, withCompletion: nil)
    //        loadAnimation.play { (result) in
    //            print("result==>", result)
    //        }
    
    // 是否循環(huán), 默認NO
    loadAnimation.loopAnimation = true
    
    // 默認 true
    loadAnimation.cacheEnable = true
    
    // 暫停動畫
//  loadAnimation.pause()
    
    // 停止動畫
//  loadAnimation.stop()
}

效果如下

注意

1. lottie 通過 LOTAnimationView 加載動畫, LOTAnimationView 繼承自 LOTView. 在 iOS 平臺, LOTView 是 UIView 的別名, 在 Mac 平臺, 它是 NSView.
1. lottie 渲染原理
1. json 文件結構

第一層

property	description
v	Bodymovin 版本號
fr	frame rate, 幀率
ip	in point, 時間標尺的入點(起點). 設置動畫的初始幀
op	out point, 時間標尺的出點(終點). 設置動畫的最終幀
w	composition width, 合成寬度
h	composition height, 合成高度
nm	組件名字
assets	資源信息
layers	圖層信息
ddd	3d layer 標志

其中, 動畫時間 = (op - ip) / fr, 幀率為每秒顯示的幀數(shù).

第二層 assets

property	description
id	圖片id
w	圖片寬度
h	圖片高度
u	圖片路徑
p	圖片名字

第二層 layers

property	description
ty	layer 的類型
ks	transform properties
ao	Auto-Orient, 是否沿路徑AE屬性自動定向, 0否1是
bm	blend mode, 混合模式
ddd	3d layer 標志
ind	AE中的 layer index
cl	class, 在 SVG / HTML 渲染器上用作html類的解析圖層名稱
ln	layer HTML ID, 在 SVG / HTML 渲染器上用作html id 的解析圖層名稱
ip	in point, 圖層的入點, 設置圖層的初始幀
op	out point, 圖層的出點, 設置圖層的最終幀
st	start time, 起始時間
nm	AE 圖層的名稱
hasMask	表示一個圖層是否有 mask
maskProperties	masks 列表
ef	effects 列表
sr	stretch, 圖層時間拉伸
parent	父圖層 id
refId	id指向'ass??ets'對象上定義的圖像

layer 的類型
- 0 preComp 層, 預合成層
- 1 solid 層, 固體層
- 2 image 層, 圖片層
- 3 null 層, 空層
- 4 shape 層, 形狀層
- 5 text 層, 文本層

第二層 layers -> ks

property	description
a	anchor pointer, 錨點
p	position
s	scale
r	rotation
o	opacity
px	position x
py	position y

第二層 layers -> shape -> it

這里展示了shape layer 的所有功能.

sh, shape, 圖形路徑
rc, rect, 矩形路徑
el, ellipse, 橢圓路徑
sr, star
fl, fill, 圖形填充
gf, gFill
gs, gStroke,
st, stroke, 圖形描邊
mm, merge, 圖形合并
tm, trim, 裁剪路徑
gr, group, 圖形組合
rd, roundedCorners, 圓角路徑

你可以在 lottie-web/docs/json/layers/shape.json 找到對應內(nèi)容. 方便查找

{
    "$ref": "#/shapes/shape",
    "value": "sh"
},
{
    "$ref": "#/shapes/rect",
    "value": "rc"
},
{
    "$ref": "#/shapes/ellipse",
    "value": "el"
},
{
    "$ref": "#/shapes/star",
    "value": "sr"
},
{
    "$ref": "#/shapes/fill",
    "value": "fl"
},
{
    "$ref": "#/shapes/gFill",
    "value": "gf"
},
{
    "$ref": "#/shapes/gStroke",
    "value": "gs"
},
{
    "$ref": "#/shapes/stroke",
    "value": "st"
},
{
    "$ref": "#/shapes/merge",
    "value": "mm"
},
{
    "$ref": "#/shapes/trim",
    "value": "tm"
},
{
    "$ref": "#/shapes/group",
    "value": "gr"
},
{
    "$ref": "#/shapes/roundedCorners",
    "value": "rd"
}