在Lottie动画上设置约束-快速

时间:2019-02-28 04:33:47

标签: swift autolayout lottie

我不擅长快速编码(一般来说还是陌生的)-并努力将约束应用于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()
}

1 个答案:

答案 0 :(得分:0)

好吧,假设您已经在Xcode项目中安装了 Lottie framework ,然后希望在某个视图控制器中将导入的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)
        ])
    }

}

我的代码可以旋转任何屏幕!

enter image description here

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

我完全解码并初始化了什么?在项目的根目录中,您似乎有原始的JSON文件,您想将其加载到项目中并通过一些动画启动自身。我想你在这里没有问题。然后,我们走得更远!

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

以编程方式创建的所有自定义视图都需要添加到parent view中。可以是任何情况,取决于情况。此时,我们的view类提供了ViewController属性(这要归功于UIViewController)。该视图将相应地成为我们的艺术家画布和父视图!然后,我们设置内容模式以使动画视图的大小在设备的屏幕内显示出来并成比例。最后,在此示例中,我实现了“无限模式”。只是没有原因。您可以根据自己的喜好来启动动画。

3。第三步(布局偏好):

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

当然,还有许多其他选择可以建立约束。要进一步提高技能,可以查看official documentation和其他任何在线指南。