iOS lottie 使用 json-CFANZ编程社区

iOS Lottie 使用 JSON

![Lottie Logo](

引言

Lottie is a library for Android, iOS, and the Web that allows you to render animations and interactive content created in Adobe After Effects directly on your mobile app or website. It uses a JSON file format called Bodymovin, which is exported from After Effects, to define the animation and its properties.

In this article, we will explore how to use Lottie in iOS apps using JSON files. We will cover the basic setup, loading animations, and controlling their playback. Let's get started!

Lottie 安装与设置

To use Lottie in your iOS project, you need to install the Lottie framework and import it into your Xcode project. There are several ways to do this, but one of the easiest methods is by using CocoaPods.

Step 1: CocoaPods 安装

If you haven't already, install CocoaPods by running the following command in your terminal:

$ sudo gem install cocoapods

Step 2: 创建 Podfile

Create a new file in your project's directory called Podfile and add the following lines:

platform :ios, '11.0'
use_frameworks!

target 'YourProjectName' do
  pod 'lottie-ios'
end

Replace YourProjectName with the name of your Xcode project.

Step 3: 安装依赖

Save the Podfile and run the following command in your terminal:

$ pod install

This will install the Lottie framework and create an Xcode workspace file with the .xcworkspace extension. From now on, you should open your project using this workspace file instead of the Xcode project file.

加载 Lottie 动画

To load a Lottie animation in your iOS app, you need a JSON file exported from After Effects using the Bodymovin plugin. Place the JSON file in your Xcode project's bundle or download it from a remote server.

本地加载

To load a Lottie animation from a JSON file in your app's bundle, use the following code:

if let animationView = AnimationView(name: "animation") {
    animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
    animationView.center = view.center
    animationView.loopMode = .loop
    view.addSubview(animationView)
    animationView.play()
}

Here, we create an AnimationView instance with the name of the JSON file (without the file extension). We set the view's frame and center it in the parent view. We also set the loop mode to .loop so the animation continues to play indefinitely. Finally, we add the animation view to the parent view and start playback.

远程加载

To load a Lottie animation from a remote server, you need to download the JSON file first. You can use libraries like Alamofire or URLSession to handle the download process. Once you have the JSON data, you can create an Animation object and set it as the animation view's animation property. Here's an example:

let animationURL = URL(string: "

URLSession.shared.dataTask(with: animationURL) { (data, response, error) in
    guard let data = data else {
        return
    }
    
    let animation = try? JSONDecoder().decode(Animation.self, from: data)
    
    DispatchQueue.main.async {
        if let animationView = AnimationView(animation: animation) {
            animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
            animationView.center = self.view.center
            animationView.loopMode = .loop
            self.view.addSubview(animationView)
            animationView.play()
        }
    }
}.resume()

In this code snippet, we use URLSession to download the JSON data from a remote server. Once the data is downloaded, we decode it into an Animation object using JSONDecoder. We then create an AnimationView instance with the animation object and add it to the parent view.

控制动画播放

Lottie provides several methods and properties to control the playback of animations.

暂停和继续播放

You can pause and resume the animation using the pause() and play() methods, respectively. For example:

animationView.pause()

animationView.play()

指定播放范围

You can specify the start and end frames of the animation to play only a portion of it. Use the currentProgress property to set the playback progress. The value should be a fraction between 0 and 1. For example, to play the first half of the animation: