在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()
}

- roypnyc

---

你没有对你的animationView应用任何约束条件，你可以阅读自动布局指南来了解如何使用约束条件。 - pckill

你的动画视图需要什么尺寸？根据这个，我们可以建议您在VC上设置什么样的约束。 - CodeChanger

感谢您的帮助 - 如果在 iPhone 8 上动画视图的大小为 250 x 250，如何使其在大小 8 Plus 的屏幕上按比例缩放？或者在较小的屏幕上按比例缩小其大小？ - roypnyc

最好的实现方式，运行良好。您只需设置宽度和高度，一切都会相应地调整大小。 - Mwangi Gituathi

Answer 1

好的，假设您已经在Xcode项目中安装了Lottie框架，并且您想要在某个视图控制器中将导入的lottie文件作为对象添加到视图中以呈现自身。

您已经接近完成！您需要了解如何通过编程方式添加任何视图。有许多方法可以做到这一点。其中之一是使用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)
        ])
    }

}

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

第一步（解码和初始化）：

我做了什么来解码和初始化呢？在您的项目根目录中，您看到了一个似乎是原始JSON文件，您希望将其加载到项目中并启动某些动画。我猜您在这里没有问题。那么我们继续吧！

第二步（添加和设置）：

您通过编程方式创建的所有自定义视图都需要添加到父视图中。它可以是任何东西，取决于情况。此时，我们有ViewController类提供的view属性（感谢UIViewController）。这个视图将成为我们的艺术家画布和相应的父视图！然后，我们设置内容模式，使动画视图的大小在设备屏幕内充足且成比例。最后，在这个例子中，我实现了“无限模式”。只是出于无缘无故的原因。您可以根据自己的喜好启动动画。

第三步（布局偏好）：

最后，你添加的视图很完美，但任何屏幕旋转、实时视图更改都可能对视图演示稳定性产生负面影响。因此，你需要使用父视图边缘将视图固定在父视图中。translatesAutoresizingMaskIntoConstraints是一个布尔值，我们设置它来告知系统，我们的视图将根据我们的约束自动调整大小，而不是采用系统的自动布局方法。

当然，还有许多其他选项可用于构建约束。如果想提高技能水平，可以查看官方文档和其他在线指南。

- shokuroff