一种动画框架Lottie的解析（一）—— 基本介绍（一）

2017-09-15 本文已影响1059人刀客传奇

版本记录

版本号	时间
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示例