对 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 项目中，然后您希望在某个视图控制器中将您导入的 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)
        ])
    }

}

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

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

我到底解码和初始化了什么？在您的项目根目录中，您似乎有一个原始 JSON 文件，您想将其加载到项目中并通过一些动画启动它自己。我想在这里你没有问题。那我们更进一步！

2.第二步（添加和设置）：

您以编程方式创建的所有自定义视图都需要添加到您的parent view. 它可以是任何东西，取决于情况。在这一刻view，我们的ViewController类提供了属性（感谢 UIViewController）。该视图将相应地成为我们的艺术家画布和父视图！然后我们设置内容模式，使动画视图大小在设备屏幕内按比例缩放。最后，在这个例子中，我实现了“无限模式”。只是没有理由。您可以根据自己的喜好来启动动画。

3. 第三步（布局首选项）：

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

当然，还有许多其他选项可以构建约束。为了提高您的技能水平，您可以查看官方文档和任何其他在线指南。