swift - 对 Lottie 动画设置约束 - swift

Question

我是 swift 编码新手(一般来说也是新手) - 并且在对 Lottie 动画应用约束方面遇到困难。

我能够将其置于屏幕中央，但无法让动画帧根据屏幕尺寸更改其尺寸并保持其纵横比。

目前尺寸为 250x250，但我希望让它根据屏幕尺寸调整大小。任何帮助都感激不尽。

 override func viewDidLoad() {
    super.viewDidLoad()
    let animationView = LOTAnimationView(name: "clock")
    animationView.frame = CGRect(x: self.view.frame.width / 2 - 125, y: self.view.frame.height / 2 - 125, width: 250, height: 250)
    animationView.contentMode = .scaleAspectFill
    animationView.loopAnimation = true
    self.view.addSubview(animationView)
    view.sendSubviewToBack(animationView)
    animationView.play()
}

Answer 1

好吧，假设您已将 Lottie 框​​架安装到 Xcode 项目中，然后您希望在某个 View Controller 中将导入的 Lottie 文件作为对象添加到 View 中以呈现自身。

你快完成了!您需要了解如何以编程方式处理添加任何 View 。有很多方法可以做到这一点。其中之一是使用 NSLayout 类，它对于您的情况来说非常好并且足够了(实际上在大多数情况下)。

我将展示你的简单例子。我创建了一个基于 Single View App 模板的空白项目。在 ViewController.swift 文件中，您可能会注意到 viewDidLoad 方法。这正是我们现在所需要的。坐下来，检查我的代码，然后阅读下面末尾的代码审查:

import UIKit
import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // 1. FIRST STEP (Decoding and Initializing):
        let loadingAnimation = Animation.named("LoadingPulse")
        let lottieView = AnimationView(animation: loadingAnimation)
        // 2. SECOND STEP (Adding and setup):
        self.view.addSubview(lottieView)
        lottieView.contentMode = .scaleAspectFit
        lottieView.loopMode = .autoReverse
        lottieView.play(toFrame: .infinity)
        // 3. THIRD STEP (LAYOUT PREFERENCES):
        lottieView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            lottieView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
            lottieView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
            lottieView.topAnchor.constraint(equalTo: self.view.topAnchor),
            lottieView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
        ])
    }

}

我的代码适用于任何旋转的任何屏幕!

<强>1。第一步(解码和初始化):

我到底做了什么解码和初始化？在项目的根目录中，您似乎有原始的 JSON 文件，您想要将其加载到项目中并以一些动画启动自身。我想你已经没有问题了。那我们就更进一步吧!

<强>2。第二步(添加和设置):

您以编程方式创建的所有自定义 View 都需要添加到您的父 View 中。可以是任何东西，取决于具体情况。此时我们拥有由 ViewController 类提供的 view 属性(感谢 UIViewController)。该 View 将成为我们的艺术家 Canvas 和相应的父 View !然后我们设置内容模式以使动画 View 尺寸宽敞并在设备屏幕内成比例。最后，在这个例子中我实现了“无限模式”。只是没有任何理由。您可以根据自己的喜好来启动动画。

<强>3。第三步(布局首选项):

最后，您添加的 View 是完美的，但任何屏幕旋转、 View 实时变化都会对您的 View 在 View 呈现稳定性方面产生负面影响。因此，您必须使用父 View 边缘将 View 固定在父 View 中。 translatesAutoresizingMaskIntoConstraints 是我们设置的一个 bool 值，用于通知系统我们的 View 将根据我们的约束自动调整自身大小，而不是根据系统的自动布局方法。

当然，还有许多其他选项来构建约束。要提高您的技能水平，您可以查看 official documentation以及任何其他在线指南。