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