设置 Lottie 动画的约束 - swift

Posted 2023-03-10

【中文标题】设置 Lottie 动画的约束 - swift

【英文标题】：Setting constraints on Lottie animation- swift

【发布时间】：2019-02-28 04:33:47

【问题描述】：

我是 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()

【问题讨论】：

您没有对animationView 应用任何约束，您可以阅读autolayout guide 以了解如何使用约束。

你想要什么尺寸的动画视图？基于此，我们可以建议您需要在您的 VC 上设置什么样的约束。

感谢您的帮助-如果在 iPhone 8 上动画视图的大小是 250 x 250-如何在大小为 8 的屏幕上按比例缩放？还是在较小的屏幕上按比例缩小其尺寸？

The best implementation that works fine. You will just set the width and height and everything will resize accordingly

【参考方案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。什么都可以，视情况而定。在这一刻，我们的ViewController 类提供了view 属性（感谢UIViewController）。这个视图将成为我们的艺术家画布和相应的父视图！然后我们设置内容模式以使动画视图的大小在设备屏幕内变得宽敞且成比例。最后，在这个例子中，我实现了“无限模式”。只是没有理由。您可以根据自己的喜好来启动动画。

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

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

当然，还有许多其他选项可以构建约束。如需进一步提升技能，您可以查看official documentation 和任何其他在线指南。