版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2017.09.15 |
前言
app中好的炫的动画可以让用户耳目一新，为产品增色不少，关于动画的实现我们可以用基本动画、关键帧动画、序列帧动画以及基于CoreGraphic的动画等等，接下来这几篇我不介绍系统给的这几种动画绘制方法，给大家介绍的是一种动画框架。下面给出github地址。
1. airbnb
2. lottie-ios
作者
我们看一下作者。
Introduction - 简介
Lottie是Android和iOS的移动图书馆，用于解析Adobe After Effects动画，并以bodymovin作为json导出，并通过React Native在本机上呈现矢量动画！
Lottie以德国电影导演和剪影动画最重要的先驱者而命名。 她最着名的电影是《艾奇王子的冒险故事》。
首先，设计师可以创建和运行美丽的动画，而不用手工努力地重新创作。 由于动画是由JSON支持的，因此它们的体积非常小，但复杂度可能很高！ 动画可以播放，调整大小，循环，加速，减慢，反转，甚至交互式擦洗。 Lottie也可以播放或循环动画的一部分，可能性是无止境的！ 动画甚至可以在运行时以各种方式改变！ 更改颜色，位置或任何关键帧值！ Lottie还支持原生的UIViewController Transitions！
下面给出Lottie的几个小例子。
Installing Lottie - Lottie的安装
1. Github Repo
直接从github仓库里面拉取代码。
2. Cocoapods
直接利用Cocoapods安装
pod 'lottie-ios'
运行
pod install
在安装好了以后需要Objective C #import <Lottie/Lottie.h>和Swift import Lottie。
3. Carthage
将Lottie加入到Cartfile
github "airbnb/lottie-ios" "master"
运行
carthage update
在应用程序target General下面的Linked Frameworks and Libraries部分，从目录Carthage/Build/iOS拖拽ottie-ios.framework。
iOS Sample App - iOS示例APP
克隆这个仓库，这个仓库可以创建MacOS和iOS例子。
iOS示例APP展示了Lottie的几种特性。
动画浏览器允许您刷新，播放，循环和调整动画大小。 可以使用内置的QR码阅读器从应用程序包或Lottie文件中加载动画。
MacOS Sample App - MacOS示例APP
下面看一下MacOS的示例APP
用于MacOS的Lottie Viewer可让您拖放JSON文件以打开，播放，刷新和循环动画。 该应用程序支持与iOS应用程序相同的动画代码，因此您将获得Mac和iOS动画的准确表示。
Objective C Examples - OC示例
Lottie动画可以从捆绑的JSON或从URL加载到JSON中，只需将其添加到动画所需的任何图像到您的目标在xcode。
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];
如果你使用多个包
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];
或者您可以从NSURL以编程方式加载它。
LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];
Lottie支持iOS UIViewContentModes的aspectFit, aspectFill 和 scaleFill。
您还可以交互地设置动画进度。
CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;
或者你可以只展示动画的一部分：
[lottieAnimation playFromProgress:0.25 toProgress:0.5 withCompletion:^(BOOL animationFinished) {
// Do Something
}];
Swift Examples - Swift示例
Lottie动画可以从捆绑的JSON或从URL加载到JSON中，只需将其添加到动画所需的任何图像到您的目标在xcode。
let animationView = LOTAnimationView(name: "LottieLogo")
self.view.addSubview(animationView)
animationView.play{ (finished) in
// Do Something
}
你也可以从bundle中加载
let animationView = LOTAnimationView(name: "LottieLogo" bundle:yourBundle)
self.view.addSubview(animationView)
animationView.play()
你也可以从URL异步下载
let animationView = LOTAnimationView(contentsOf: WebURL)
self.view.addSubview(animationView)
animationView.play()
您还可以交互地设置动画进度。
let translation = gesture.getTranslationInView(self.view)
let progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress
或者你可以只展示动画的一部分：
animationView.play(fromProgress: 0.25, toProgress: 0.5, withCompletion: nil)
后记
未完，待续~~
