通过将 UIView 过渡添加到 UIStackView 来制作动画

Question

我有一个自定义对象，它是UIView 的子类。我想要的行为是让这个对象最初出现在屏幕中间。然后，在 3 秒后，我希望对象转换（带有平滑动画）到已经有一个元素的水平 UIStackView，所以 customObject 理想情况下会移动到 stackView 的右半部分。

我目前无法实现此行为。

ViewController.swift：

class ViewController: UIViewController {

    let customObject = CustomObject(frame: .init(x: 0, 
                                                 y: 0, 
                                                 width: 200.0, 
                                                 height: 200.0))

    let stackView: UIStackView = {
        let sv = UIStackView()
        sv.axis = .horizontal
        return sv
    }() 

    override func viewDidLoad() {
        super.viewDidLoad()

        let label = UILabel()
        label.text = "first Element in horizontal stackView"
        stackView.addArrangedSubview(label)

        addCustomObjectToStackView()
    }

    func addCustomObjectToStackView() {

        stackView.addArrangedSubview(customObject)

        UIView.animate(withDuration: 1.0, animations: {
            customObject.layoutIfNeeded()
        })
    }
}

Answer 1

由于UIStackView 旨在安排其子视图，因此以这种方式进行动画添加可能很难完成。

所以，一个选择：

• 在 stackView 中以明确的“holderView”开头
• 将您的 customObject 添加到主视图（它现在是 stackView 的兄弟）
• 动画customObject的位置和大小以匹配holderView
• 在动画完成时，添加customObject 作为holderView 的子视图

这里有一些示例代码可供试用（注意：只是演示代码，尚未准备好用于生产）：

//
//  AnimToStackViewController.swift
//
//  Created by Don Mag on 6/28/19.
//

import UIKit

class CustomObject: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)

        let theLabel = UILabel()
        theLabel.textAlignment = .center
        theLabel.text = "Custom Object"
        theLabel.translatesAutoresizingMaskIntoConstraints = false

        addSubview(theLabel)

        NSLayoutConstraint.activate([
            theLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            theLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            ])

        backgroundColor = .cyan
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

class AnimToStackViewController: UIViewController {

    let theStackView: UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.axis = .horizontal
        v.alignment = .fill
        v.distribution = .fill
        return v
    }()

    let theLabel: UILabel = {
        let v = UILabel()
        v.textAlignment = .center
        v.text = "This is the label in the stack view."
        v.numberOfLines = 0
        return v
    }()

    let holderView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    let customObject = CustomObject(frame: CGRect(x: 0, y: 0, width: 150, height: 150))

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(theStackView)

        theStackView.addArrangedSubview(theLabel)
        theStackView.addArrangedSubview(holderView)

        view.addSubview(customObject)

        NSLayoutConstraint.activate([
            theStackView.widthAnchor.constraint(equalToConstant: 300.0),
            theStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 80.0),
            theStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            holderView.widthAnchor.constraint(equalTo: customObject.widthAnchor, constant: 0.0),
            holderView.heightAnchor.constraint(equalTo: customObject.heightAnchor, constant: 0.0),
            ])

        customObject.center = view.center

    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let pt = self.holderView.center
        let convertedPoint = self.theStackView.convert(pt, to: self.view)

        UIView.animate(withDuration: 1.0, delay: 3.0, options: [], animations: {
            self.customObject.center = convertedPoint
            self.view.layoutIfNeeded()
        }, completion: { (finished) in
            if finished {
                self.holderView.addSubview(self.customObject)
                self.customObject.frame = self.holderView.bounds
            }
        })

    }

}