iOS使用Lottie做动画

Lottie 动画简介

Lottie 动画是 airbnb开源的动画解决方案，支持多种平台，可以使我们不费吹灰之力就可以将动画接入 app 中，只需要一个 json 文件即可。再也不需要进行复杂的动画绘制工作了，节约了很多时间。

下面我来详细介绍一下 Lottie 在 iOS 端的接入过程。https://www.jianshu.com/p/abc5b924e6de

部分效果如下：

1.首先由 CocoaPods 接入该库

$ pod search Lottie
$ pod 'lottie-ios', '~> 2.5.0'
然后创建 pod 文件 $ pod init，然后将 lottie-ios 添加到 Podfile 中
最后执行 $ pod install 就完成了 Lottie 库的接入

2.导出 json 文件

我们可以在 ae 中下载插件，将 aep 文件导出为 json 形式，具体如何操作请看 Lottie开源动画库介绍

导出的 json 文件格式化后类型如下：

其中的部分参数定义为：

• v ：版本号
• ip：原大小
• op：目标大小
• w：宽度
• h：高度
• nm：文件名称
• assets：图片文件
• fonts：字体
• layers：动画效果
• markers：
• chars：文字效果

3.将 json 和它所依赖的图片导入自定义 bundle 中

这里有一个问题：当我们在做启动导航图时，有时可能会需要使用到多个 page，需要多个 json 文件，比如像开头的动画那样，需要三个 json 文件。而 UI 导出的图片基本上名字都差不多，这时候如果我们不加分辨，直接导入三个 json 文件，会使得图片出现错乱。因为三个 json 文件中的图片名基本完全相同，这时候我们就需要

• 打开 json 文件中的 assets 属性，修改其中的图片名。
• 或者修改图片的上层目录，使得三个 json 文件所指向的文件为三个不同的目录。

4.使用 LOTAnimationView 加载 json 文件

这里使用了懒加载的方式来加载这个 view， 具体过程如下，首先需要找到自定义 bundle 的地址，然后再在 bundle 中找到 json 文件并且加载。

5.播放动画

在 Lottie 的 API 中我们可以看到，只需要简单的 [firstAnimationView play] 即可播放动画。到这里简单的需求基本完成，有时我们还需要在动画上添加文字和按钮来让这个 page 能够响应一些事件，这时候我们就需要先将这个 LOTAniamtionView 放到视图层级的最底层，使用 sendSubviewToBack: 这个方法即可简单做到。然后再添加一个 backgroundView 作为容器来盛放 Label，Button 等，当要求文字与按钮也和动画一样有渐入效果时，我们就可以在滑动到这个 page 时做一个简单的动画，使用下面这个方法即可做到

-(void)animatedForPageOne {
    [self.firstAnimationView playToProgress:1 withCompletion:nil];
    [UIView animateWithDuration:1.5 animations:^{
        self.p1bottomView.alpha = 1;
    }];
}

当用户如果滑动到第三个 page 后并没有进入应用，而是滑动返回到第二个 page 时，例如文章开始时给出的动图，这时我们就需要当动画播放完后，再返回动画的第一帧，否则就会有一个跳帧的效果，非常不好看，具体的方法也很简单，只需要在监听到 ScrollView 滚动翻页时设置 self.firstAnimationView.animationProgress = 0; 即可将上一个 page 的动画调到第一帧，当执行返回时即可从第一帧开始重新播放。

其他效果

当我们在 LOTAniamtionView 上添加其他控件时，会发现有时候会出现与动画不兼容的现象，比如遮挡等，这时候我们可以选择修改控件的位置或者直接将动画的某一部分删除，这个过程也非常简单，我们只需要找到 json 文件，找到相应的控件，把它删除即可。

 

Lottie的初始化方法

@interface LOTAnimationView : LOTView

// 默认从 main bundle 中加载 json 文件和图片
+ (nonnull instancetype)animationNamed:(nonnull NSString *)animationName NS_SWIFT_NAME(init(name:));

// 从给定的 bundle 中加载 json 文件和图片，这个 animationName 参数实际上就是 json 文件的文件名
+ (nonnull instancetype)animationNamed:(nonnull NSString *)animationName inBundle:(nonnull NSBundle *)bundle NS_SWIFT_NAME(init(name:bundle:));

// 直接从给定的 json 文件中加载动画，默认从 mainBundle 中加载
+ (nonnull instancetype)animationFromJSON:(nonnull NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));

// 从一个文件 url 中加载动画，但是不能够使用 web url 来作为参数
+ (nonnull instancetype)animationWithFilePath:(nonnull NSString *)filePath NS_SWIFT_NAME(init(filePath:));

// 给定一个反序列化的 json 文件和一个特定的 bundle 名来初始化动画
+ (nonnull instancetype)animationFromJSON:(nullable NSDictionary *)animationJSON inBundle:(nullable NSBundle *)bundle NS_SWIFT_NAME(init(json:bundle:));

/// 直接使用 LOTCompostion 来创建动画效果
- (nonnull instancetype)initWithModel:(nullable LOTComposition *)model inBundle:(nullable NSBundle *)bundle;

/// 异步的从指定的 url 中加载动画，这个 url 为 webUrl
- (nonnull instancetype)initWithContentsOfURL:(nonnull NSURL *)url;

 

 

LOTAniamtionView 的使用方法

首先我们可以通过上述方法初始化一个 animationView， 然后继续观察 API 中的属性和方法：

/// 判断是否正在播放动画
@property (nonatomic, readonly) BOOL isAnimationPlaying;

/// 判断动画是否需要循环播放
@property (nonatomic, assign) BOOL loopAnimation;

/// 如果这个属性值和 loopAnimation 都为 YES, 那么动画会先倒序播放，然后再正序播放
@property (nonatomic, assign) BOOL autoReverseAnimation;

// 设置 progress 的值 从 0 ~ 1，表示这个动画执行的程度，当设定为 1 时表示动画结束
@property (nonatomic, assign) CGFloat animationProgress;

// 为动画设置一个播放速度，如果想倒序播放，则可以把这个值设定为负数
@property (nonatomic, assign) CGFloat animationSpeed;

// 只读属性，获取的值为当 speed = 1 时动画的播放秒数
@property (nonatomic, readonly) CGFloat animationDuration;

// 是否缓存动画， 默认为 YES, 对于只需要播放一次的动画，比如启动页动画，可以设定为 NO
@property (nonatomic, assign) BOOL cacheEnable;

/// 当动画播放完毕所调用的 block
@property (nonatomic, copy, nullable) LOTAnimationCompletionBlock completionBlock;

/// 直接设定播放数据，也就是解析 json 文件后的数据模型
@property (nonatomic, strong, nullable) LOTComposition *sceneModel;

紧接着我们来接着看 LOTAniamtionView 的 API 中所定义的部分方法：

/*
 * 这个方法表示 animation 将从当前的 position 播放到指定的 progress
 * 当 loopAnimation 属性为 YES 时，这个动画将从当前 position 到指定 progress 并且无限循环
 * 当 loopAnimation 属性为 NO 时，这个动画将从当前 position 到指定 progress 然后停到 progress 的那一帧
 * 当动画完成后会调用指定 block
 */
- (void)playToProgress:(CGFloat)toProgress
        withCompletion:(nullable LOTAnimationCompletionBlock)completion;

/*
 * 和上面的方法差不多，主要是开始的 progress 也可以由我们来指定
 */
- (void)playFromProgress:(CGFloat)fromStartProgress
              toProgress:(CGFloat)toEndProgress
          withCompletion:(nullable LOTAnimationCompletionBlock)completion;

/*
 * 从当前的 position 动画到指定的 frame
 */
- (void)playToFrame:(nonnull NSNumber *)toFrame
     withCompletion:(nullable LOTAnimationCompletionBlock)completion;

/*
 * 设置开始的 frame 并且动画到指定的 frame
 */
- (void)playFromFrame:(nonnull NSNumber *)fromStartFrame
              toFrame:(nonnull NSNumber *)toEndFrame
       withCompletion:(nullable LOTAnimationCompletionBlock)completion;


/**
 * 从当前的 position 完成到结束 position
 **/
- (void)playWithCompletion:(nullable LOTAnimationCompletionBlock)completion;

/// 简单的播放到动画结尾，播放完成后会调用完成block
- (void)play;

/// 暂停动画并且调用完成block
- (void)pause;

/// 停止当前动画并且倒回到最开始的那一帧，完成后调用block
- (void)stop;

/// 设置当前的动画到指定的 frame，如果当前动画正在播放则会停止动画并且调用完成block
- (void)setProgressWithFrame:(nonnull NSNumber *)currentFrame;

/// 强制对现在的 frame 进行升级
- (void)forceDrawingUpdate;

/// 打印所有继承链上的 keypath
- (void)logHierarchyKeypaths;

简单的使用应该就够用了, 后续有需要在深入看看.