Lottie(LottieFiles) ：设计师做好动画效果后只需导出很小的Json文件，开发人员把Json文件拖入工程，在iOS (安卓、Web) 代码中读取、解析、渲染就行了。

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

当项目中有很多地方用到动画效果的时候会添很多Gif，这样打出来的包会很大。这时候我们会要求设计师压缩尺寸后再给我们，这样包是变小了，但是用户体验会很差，动效很不清晰。Lottie能很好的解决这个问题，阿里新出的犸良就是基于Lottie动画的。

一、集成：

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

1、Swift：

pod 'lottie-ios'

代码：

import UIKit
import Lottie

class ViewController: UIViewController {
    let lottieView = LottieAnimationView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        lottieView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
        lottieView.center = self.view.center
        lottieView.animation = LottieAnimation.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 <lottie_ios_Oc/LOTAnimationView.h>

@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 进入后台默认暂停动画(OC版没有开放设置入口)
    [self.view addSubview:lottieView];
    [lottieView playWithCompletion:^(BOOL animationFinished) {
      //动画完成后可执行自定义操作
    }];
    [lottieView play];//开始动画
    //[lottieView stop];//暂停动画
}
@end

3、SwiftUI：

pod 'lottie-ios'

代码：

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    var name: String
    let lottieView = LottieAnimationView()

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)
        
        lottieView.animation = LottieAnimation.named(name) //绑定Lottie动画
        lottieView.loopMode = .loop //动画效果 执行单次、多次
        lottieView.contentMode = .scaleAspectFit
        lottieView.backgroundBehavior = .pauseAndRestore //进入后台是否暂停动画
        lottieView.play() //开始动画
        
        lottieView.translatesAutoresizingMaskIntoConstraints = false //将自动调整大小蒙版转换为约束
        view.addSubview(lottieView)
        
        NSLayoutConstraint.activate([
            lottieView.heightAnchor.constraint(equalTo: view.heightAnchor), //高度锚
            lottieView.widthAnchor.constraint(equalTo: view.widthAnchor) //宽度锚
        ])
        
        return view
    }
    
    func stop() {
        lottieView.stop() //暂停动画
    }
    
    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
        // 更新视图时的操作（如果需要）
    }
}

调用：

//Lottie动画
LottieView(name: "127399-cycle-rider")
    .frame(width: 200, height: 200)

二、总结

1、优点：

开发成本低，设计师导出Json文件给到开发即可。
动画实现成功率高，只要设计师能设计出来的都能实现。
支持服务端URL方式创建，通过服务端配置Json文件随时替换动画，不用重新发版。
iOS、安卓、Web可用同一套Json文件。
支持转场动画，Presen／Dismiss时可做转场效果。

2、缺点：

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

解决：

手机性能不断升级，将有效缓解这方面问题；
切换页面后暂停动画，节省资源；
设计师注意好这些注意事项 Lottie避坑指南、常见错误、免异常总结，也能让动画更流畅；

（2024/2/1）：

三、拓展：ReactNative端

1、添加lottie-react-native：

yarn add lottie-react-native //添加
yarn remove lottie-react-native //移除

pod install //iOS:更新pod

2、代码：

export const cycle_rider = require('./tabIcon/cycle_rider.json');

import LottieView from 'lottie-react-native’;

<LottieView
  source={cycle_rider}
  style={{width: '100%', height: '100%'}}
  autoPlay
  loop
/>

需要json文件的可以在这里下载
Json文件示例：

效果：截屏2024-02-01 11.23.43.png

四、问题

使用 pod install 下载 Swift 版本库时，报错：截屏2024-01-29 16.38.55.png

1、开始以为是拉取 pod 时缓存不够导致的

增大缓存:

git config --global http.postBuffer 524288000

设置完后还是不行。

2、网络问题导致

公司的网络做了限制无法翻墙，我一般是用我的电脑连上我的手机热点，再用电脑翻墙。
刚好月底我的手机限速了，导致网络异常无法下载。到了月初网速恢复后我再试，发现可以了😒

资料：

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

lottie官网
 Lottie - 轻松实现复杂的动画效果
 lottie-react-native（git）
lottie动画在线预览

设计师相关：Lottie避坑指南、常见错误、免异常总结

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

Lottie动画-让动画更轻量