在iOS上使用lottie-ios轻松实现丰富的动画


如今，大多数很棒的iOS应用程序都具有动画，但是添加丰富的动画可能很尴尬。我很高兴Airbnb的图书馆lottie-ios非常简单易用。

什么是彩票？

彩票
Airbnb发布的动画库，它将使用Adobe After Effects创建的动画转换为json，按原样加载它们，并将其合并到应用程序(iOS，Android，React Native)中。在这里，我将不涉及创建json，而是关注iOS上显示的内容。这里有各种示例，因此我将尝试在此站点上使用它们。您可以轻松地将以下动画合并到您的应用中。 github上名为lottie-ios的库拥有将近10,000颗星(截至2017年8月17日为 9948 2020年3月24日为19.2k)，并且非常受欢迎。

lottie.gif

安装

  • 对于pod，将pod 'lottie-ios'添加到podfile和pod install。
  • 对于迦太基，将github "airbnb/lottie-ios" "master"添加到您的Cartfile和carthage update中。完成链接框架和库的设置。

请注意，由于该库在Swift中使用，因此您需要将#import <Lottie/Lottie.h>添加到Bridging-Header文件中(如果没有，则需要创建它并将设置添加到Build Setting中。 )。 Lottie版本3和更高版本完全由Swift编写，并且此过程不是必需的(添加：2020年3月24日)。

LottieSample-Bridging-Header.h

1
2
3
4
5
6
#ifndef LottieSample_Bridging_Header_h
#define LottieSample_Bridging_Header_h

#import <Lottie/Lottie.h>

#endif /* LottieSample_Bridging_Header_h */

基本用法

从此处选择要尝试的动画文件，然后下载json文件。将下载的json文件添加到您的Xcode项目中。
这次我将放这个动画。我下载了它，将其命名为Animation.json并将其添加到Xcode。

lottie2.gif

ViewController.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import UIKit
import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        showAnimation()
    }

    func showAnimation() {
        let animationView = AnimationView(name: "Animation")
        animationView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
        animationView.center = self.view.center
        animationView.loopMode = .loop
        animationView.contentMode = .scaleAspectFit
        animationView.animationSpeed = 1

        view.addSubview(animationView)

        animationView.play()
    }

}

看起来像这样。
lottie4.gif

我想播放一次后将其擦除

重写为

animationView.loopAnimation = false，以便将completionHandler传递给animationView.play()。

ViewController.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import UIKit
import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        showAnimation()
    }

    func showAnimation() {
        let animationView = AnimationView(name: "Animation")
        animationView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
        animationView.center = self.view.center
        animationView.loopMode = .loop
        animationView.contentMode = .scaleAspectFit
        animationView.animationSpeed = 1

        view.addSubview(animationView)

        animationView.play { finished in
            if finished {
                animationView.removeFromSuperview()
            }
        }
    }

}

我想随时结束

LOTAnimatinView AnimationView(添加：2020年3月24日)可以随时为removeFromSuperview()。

ViewController.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import UIKit
import Lottie

class ViewController: UIViewController {

    lazy var loadingView: AnimationView = {
        let animationView = AnimationView(name: "Animation")
        animationView.frame = CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height)
        animationView.center = self.view.center
        animationView.loopMode = .loop
        animationView.contentMode = .scaleAspectFit
        animationView.animationSpeed = 1

        return animationView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    // 好きなタイミングでこれを呼ぶとアニメーションが始まる.
    func startLoading() {
        view.addSubview(loadingView)
        loadingView.play()
    }

    // 好きなタイミングでこれを呼ぶとアニメーションのViewが消える.
    func stopLoading() {
        loadingView.removeFromSuperview()
    }

    //// APIコールとかでstartLoading(), stopLoading()を呼ぶ.

}

摘要

我在GitHub上发布了它。

自己花费一些时间从json创建，但是已经上传的动画易于合并且有趣。请玩。