Lottie动画(动画的未来)

我们在平时开发中，要实现一个动画，大多数情况直接用Gif图，但Gif占用空间较大，而且需要为各种屏幕尺寸、分辨率做适配；另一种是用帧动画，但是帧动画占用空间比 Gif 还要大的多，也需要做适配。

当项目中有很多地方用到动画效果的时候会添很多Gif，这样打出来的包会很大。这时候我们会要求设计师压缩尺寸后再给我们，这样包是变小了，但是用户体验会很差，动效很不清晰。

这种情况下，就轮到 Lottie、 (LottieFiles) 登场了，阿里新出的 犸良https://design.alipay.com/emotion就是基于Lottie动画的。设计师做好动效后只需导出很小的Json文件，把Json文件拖入工程，在iOS (安卓、Web) 代码中读取这份Json文件，解析动画结构和参数信息并渲染就行了。

一、集成：

---

在iOS中使用需要先集成Lottie的SDK (Swift版本、OC版本)，然后直接在代码中使用就可以了。

1、Swift：

pod'lottie-ios'复制代码

代码：

import UIKit

import Lottie

class ViewController: UIViewController {

    let lottieView = AnimationView()

    override func viewDidLoad() {

        super.viewDidLoad()

        lottieView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)

        lottieView.center = self.view.center

        lottieView.animation = Animation.named(“lottieJson“)//绑定Lottie动画

        lottieView.loopMode = .loop//动画效果 执行单次、多次

        lottieView.contentMode = .scaleAspectFit

        lottieView.backgroundBehavior = .pauseAndRestore//设置进入后台是否暂停动画

        self.view.addSubview(lottieView)

        lottieView.play()//开始动画

        //lottieView.stop()//暂停动画

}}

2、OC：

pod'lottie-ios_Oc'复制代码

代码：

#import "ViewController.h"

#import

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    LOTAnimationView *lottieView = [LOTAnimationView animationNamed:@"lottieJson"];//绑定Lottie动画

    lottieView.frame = CGRectMake(0, 0, 400, 400);

    lottieView.center = self.view.center;

    lottieView.loopAnimation = YES;//动画效果 执行单次、多次

    lottieView.contentMode = UIViewContentModeScaleAspectFit;

    //handleWillEnterBackground 进入后台默认暂停动画

    [self.view addSubview:lottieView];

    [lottieView playWithCompletion:^(BOOL animationFinished) {

      //动画完成后可执行自定义操作

    }];

    [lottieView play];//开始动画

    //[lottieView stop];//暂停动画

}

@end

二、总结

---

1、优点：

·开发成本低，设计师导出Json文件给到开发即可。

·动画实现成功率高，只要设计师能设计出来的都能实现。

·支持服务端URL方式创建，通过服务端配置Json文件随时替换动画，不用重新发版。

·iOS、安卓、Web可用同一套Json文件。

·支持转场动画，Presen／Dismiss时可做转场效果。

2、缺点：

 ·低配设备上解析大Json文件可能比较耗时、异常，适用硬件性能较好的设备。

解决：

·手机性能不断升级，将有效缓解这方面问题；

·切换页面后暂停动画，节省资源；

·设计师注意好这些注意事项 Lottie避坑指南、常见错误、免异常总结，也能让动画更流畅；

如果觉得本文有用，可以在下方点个赞。如果发现有遗漏或不对的地方，请在下方留言~

资料：

从Json到Animation、lottie-ios学习笔记、使用Lottie播放动画、安卓集成