iOS開發之 Lottie -- 炫酷的動效

　　動效在軟件開發中非常常見，炫酷的動畫能提升應用的B格，然而由設計師的設計轉化成程序猿GG的代碼是個非常“痛苦”的過程。對於復雜動畫，可能要花費很多時間去研究和實現。Lottie 的出現，解決了這個尷尬的局面。它讓復雜炫酷動效的實現變得容易很多。

　　Lottie 是 Airbnb 在 github 上的開源項目，支持 iOS、Android、Rect Native多平台。通過 Adobe After Effect 插件 bodymovin 導出 JSON 文件，然后通過 lottie 加載 json 文件來實現動效，這樣使得動畫開發簡單易行。

 

　　項目傳送門：

　　Lottie-iOS: Lottie for iOS 下載。

　　Lottie-Android：Lottie for Android 下載。

　　Lottie-RectNative：Lottie for RectNative 下載。　　

 

　　Github 介紹：

　　Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!

　　Lottie 是一個可應用於Andriod和iOS的動畫庫，它通過bodymovin插件來解析Adobe After Effects 動畫並導出為json文件，通過手機端原生的方式或者通過React Native的方式渲染出矢量動畫。

　　注：支持 iOS8+。

 

　　官方實現效果圖如下：

　　　

　

　

　　　　

　　

　　AE 工具安裝 及 插件配置 及 生成 JSON 文件參見 ：本人的 Adobe After Effect For Mac 博文。

　　

　　東西准備好之后就可以開始實現動畫了。

　　使用：

　　Lottie supports iOS 8 and above. Lottie animations can be loaded from bundled JSON or from a URL

　　To bundle JSON just add it and any images that the animation requires to your target in xcode.

　　可以通過加載本地 JSON 文件或一個 JSON 的URL 地址。

　　示例代碼：　

　　1、通過本地 JSON 文件加載：

LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something
}];

　　2、通過 URL 加載：

LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];

　　可以直接設置動效的進度：

CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;

　　可以支持自定義轉場 controller:　　

#pragma mark -- View Controller Transitioning

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                  presentingController:(UIViewController *)presenting
                                                                      sourceController:(UIViewController *)source {
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                          fromLayerNamed:@"outLayer"
                                                                                                            toLayerNamed:@"inLayer"];
  return animationController;
}

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
                                                                                                          fromLayerNamed:@"outLayer"
                                                                                                            toLayerNamed:@"inLayer"];
  return animationController;
}

　　Swift 支持：　　

let animationView = LOTAnimationView(name: "hamburger")
self.view.addSubview(animationView)

animationView.play(completion: { finished in
    // Do Something
})

　　注：

　　Animation file name should be first added to your project. as for the above code sample, It won't work until you add an animation file called hamburger.json.. let animationView = LOTAnimatedView.animationNamed("here_goes_your_json_file_name_without_.json")

　　上面那些示例代碼，動效文件應該先添加到工程中，才會執行動效。　　

　　AE 支持的特性

　　Keyframe Interpolation

---

• Linear Interpolation
• Bezier Interpolation
• Hold Interpolation
• Rove Across Time
• Spatial Bezier

　　Solids

---

• Transform Anchor Point
• Transform Position
• Transform Scale
• Transform Rotation
• Transform Opacity

　　Masks

---

• Path
• Opacity
• Multiple Masks (additive)

　　Track Mattes

---

• Alpha Matte

　　Parenting

---

• Multiple Parenting
• Nulls

　　Shape Layers

---

• Anchor Point
• Position
• Scale
• Rotation
• Opacity
• Path
• Group Transforms (Anchor point, position, scale etc)
• Rectangle (All properties)
• Elipse (All properties)
• Multiple paths in one group

　　Stroke (shape layer)

---

• Stroke Color
• Stroke Opacity
• Stroke Width
• Line Cap
• Dashes

　　Fill (shape layer)

---

• Fill Color
• Fill Opacity

　　Trim Paths (shape layer)

---

• Trim Paths Start
• Trim Paths End
• Trim Paths Offset

　　Layer Features

---

• Precomps
• Image Layers
• Shape Layers
• Null Layers
• Solid Layers
• Parenting Layers
• Alpha Matte Layers

　　當前不支持的AE特性

• Even-Odd winding paths
• Merge Shapes
• Trim Shapes Individually feature of Trim Paths
• Expressions
• 3d Layer support
• Gradients
• Polystar shapes (Can convert to vector path as a workaround)
• Alpha inverted mask