Lottie Animation

2023-11-16 本文已影响0人 _浅墨_

动画能够为我们的 App 带来更多生气，同时也能够积极影响用户体验。接下来我们将学习如何在 SwiftUI 中添加Lottie 动画。

最终效果：

下载

可以在这里下载 https://github.com/MFiOS/LottieAnimation

什么是 Lottie？

以 Lotte Reiniger 的名字命名。

Lottie 是一个由 Airbnb 开发的移动库，用于在 iOS、macOS、Android 和 React Native 中的 App 中呈现After Effect 动画。Lottie 动画可以以 JSON 格式导出，然后实时渲染。

设计师可以创建并发布精美的动画，而无需工程师费力手工重新制作它们。由于动画支持 JSON，它们的大小非常小，但复杂性可以很大！动画可播放、调整大小、循环、加速、减速、反向，甚至可以交互式地刮擦 (scrubbed)。

Lottie 还可以播放或循环动画的部分，它的可能性是无穷无尽的。动画甚至可以在运行时以各种方式进行更改，比如更改颜色、位置或任何可关键帧化的值。

它是开源的，我们可以在 GitHub 找到它。

Lottie 文件

接下来我们需要以 JSON 格式获取动画文件，并将 Lottie 文件添加到我们的 SwiftUI 项目中。

在 After Effects 中，我们可以通过 Bodymovin 插件导出 Lottie 文件。

除了使用 After Effects ，我们还可以使用 Lottie Files，它让我们可以直接从网站下载很多动画。

安装Lottie

第一步是安装Lottie。

在 GitHub上下载 Lottie iOS 存储库：https://github.com/airbnb/lottie-ios
在工具栏中，点击 File < Swift Packages < 'Add Package...'. . 在模态窗口中，输入 GitHub URL 到输入框中。点击下一步直到完成。

放置 Lottie 资源

将 Lottie 动画文件放入名为 Lottie 的文件夹中，并将该文件夹拖放到 Info.plist 旁边。

创建 LottieView 文件

创建一个名为 LottieView.swift 的新的 SwiftUI 视图文件。我们首先将 Lottie 导入到这个文件中，然后创建一个UIViewRepresentable:

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)

        return view
    }

    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
    }
}

使用 Lottie 库

在 makeUIView函数中，添加以下内容：

let animationView = AnimationView()

接下来，设置动画文件名:

let animation = Animation.named("success")
animationView.animation = animation

使用 contentMode 确保动画正确缩放:

animationView.contentMode = .scaleAspectFit

最后，让我们播放动画。

animationView.play()

约束

现在，让我们添加约束，使其占据容器的全部宽度和高度。在添加约束之前，我们需要将 AnimationView 插入到我们返回的视图中。

animationView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(animationView)

添加约束:

NSLayoutConstraint.activate([
    animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
    animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
])

显示 Lottie 动画

在 ContentView.swift 中，让我们展示 Lottie动画:

LottieView()

自定义 LottieView

为了允许文件名定制，向 LottieView.swift 中添加变量。

var name = "success"
var loopMode: LottieLoopMode = .loop

let animation = Animation.named(name)
animationView.loopMode = loopMode

LottieView(name: "success", loopMode: .loop)

LottieView.swift 最终代码

struct LottieView: UIViewRepresentable {
    var name = "success"
    var loopMode: LottieLoopMode = .loop

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)

        let animationView = AnimationView()
        let animation = Animation.named(name)
        animationView.animation = animation
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = loopMode
        animationView.play()

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])

        return view
    }

    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

参考：

airbnb.io/lottie

2023.11.17 22:11
上海赵巷