Question

我正在尝试使用SnapKit实现2个视图的动画。

这是我的动画视图：

class MatchAnimation: UIView {

    let viewBackground: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.75)
        view.alpha = 1
        return view
    }()

    let matchView: UIView = {
        let view = UIView()
        return view
    }()

    let matchLabel: UILabel = {
        let label = UILabel()
        label.text = "Title"
        label.textColor = .white
        label.textAlignment = .center
        return label
    }()

    let leftAvatarBg: UIView = {
        let view = UIView()
        view.backgroundColor = .white
        view.layer.cornerRadius = 91/2
        return view
    }()

    let rightAvatarBg: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        view.layer.cornerRadius = 91/2
        return view
    }()

    let goToChatButton: UIButton = {
        let button = UIButton()
        button.setTitle("Button", for: .normal)
        button.backgroundColor = .red
        button.setTitleColor(.white, for: .normal)
        button.layer.cornerRadius = 24.5
        return button
    }()

    init() {
        super.init(frame: UIScreen.main.bounds)
        viewBackground.frame = self.frame
        self.addSubview(viewBackground)

        self.addSubview(matchView)
        matchView.addSubview(matchLabel)
        matchView.addSubview(leftAvatarBg)
        matchView.addSubview(rightAvatarBg)
        matchView.addSubview(goToChatButton)

        matchView.snp.makeConstraints { (make) in
            make.left.right.equalToSuperview()
            make.center.equalToSuperview()
        }

        matchLabel.snp.makeConstraints { (make) in
            make.top.equalToSuperview()
            make.centerX.equalToSuperview()
            make.size.equalTo(CGSize(width: 193, height: 40))
        }

        leftAvatarBg.snp.makeConstraints { (make) in
            make.top.equalTo(matchLabel.snp.bottom).offset(20)
            make.size.equalTo(CGSize(width: 91, height: 91))
            make.right.equalTo(self.snp.left).offset(0)
        }

        rightAvatarBg.snp.makeConstraints { (make) in
            make.top.equalTo(leftAvatarBg)
            make.size.equalTo(leftAvatarBg)
            make.left.equalTo(self.snp.right).inset(0)
        }

        goToChatButton.snp.makeConstraints { (make) in
            make.size.equalTo(CGSize(width: 171, height: 50))
            make.top.equalTo(leftAvatarBg.snp.bottom).offset(25)
            make.centerX.equalToSuperview()
            make.bottom.equalToSuperview()
        }

    }

    func animate() {


        UIView.animate(withDuration: 5) {
            self.leftAvatarBg.snp.updateConstraints { (make) in
                make.right.equalTo(self.snp.left).offset(UIScreen.main.bounds.width/2+30)
            }

            self.rightAvatarBg.snp.updateConstraints { (make) in
                make.left.equalTo(self.snp.right).inset(UIScreen.main.bounds.width/2+30)
            }
            self.layoutIfNeeded()
        }
    }

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

}

我尝试动画的2个视图是leftAvatarBg和rightAvatarBg。

在动画之前，我将它们设置在屏幕的外部，并希望它们从左到右滑动一个视图，从右到左滑动另一个视图。

在我的控制器中，我只是打电话：

func setupAnimation() {
    let matchView = MatchAnimation()
     view.addSubview(matchView)
     matchView.animate()
}

结果是整个视图都是动画（缩放）。

我错过了什么吗？

更新：感谢swift2geek，它们似乎是对象创建和动画之间的冲突。在他的解决方案中，他通过按下按钮来触发动画。在我的情况下，我想尽快并自动触发动画。如何确保在创建对象后触发动画？

Answer 1

我对你的bdsm SnapKit表示不满意，所以请自行设置正确的约束。所以它不起作用的主要原因 - 你应该分开动画和对象。

你的viewcontroller：

import UIKit

class ViewController: UIViewController {

    @IBOutlet var matchButton: MatchButton!
    @IBOutlet var matchView: MatchAnimation!

    override func viewDidLoad() {
        super.viewDidLoad()

        setupAnimation()
        setupButton()
    }

    func setupAnimation() {
        matchView = MatchAnimation()
        matchView.isUserInteractionEnabled = true
        view.addSubview(matchView)

    }

    func setupButton() {
        matchButton = MatchButton()
        matchButton.isUserInteractionEnabled = true
        matchButton.isEnabled = true
        matchButton.addTarget(self, action: #selector(pressed(_:)), for: .touchUpInside)

        matchView.addSubview(matchButton)
    }




    @objc func pressed(_ sender: MatchButton!) {
        print("button tapped")
        matchView.animate()
    }


}

你的MatchAnimation类：

    import UIKit
import SnapKit

class MatchAnimation: UIView {

    let viewBackground: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.75)
        view.alpha = 1
        return view
    }()

    let matchView: UIView = {
        let view = UIView()
        return view
    }()

    let matchLabel: UILabel = {
        let label = UILabel()
        label.text = "Title"
        label.textColor = .white
        label.textAlignment = .center
        return label
    }()

    let leftAvatarBg: UIView = {
        let view = UIView()
        view.backgroundColor = .white
        view.layer.cornerRadius = 91/2
        return view
    }()

    let rightAvatarBg: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        view.layer.cornerRadius = 91/2
        return view
    }()



    init() {
        super.init(frame: UIScreen.main.bounds)
        viewBackground.frame = self.frame
        self.addSubview(viewBackground)

        self.addSubview(matchView)
        matchView.addSubview(matchLabel)
        matchView.addSubview(leftAvatarBg)
        matchView.addSubview(rightAvatarBg)


        matchView.snp.makeConstraints { (make) in
            make.left.right.equalToSuperview()
            make.center.equalToSuperview()
        }

        matchLabel.snp.makeConstraints { (make) in
            make.top.equalToSuperview()
            make.centerX.equalToSuperview()
            make.size.equalTo(CGSize(width: 193, height: 40))
        }

        leftAvatarBg.snp.makeConstraints { (make) in
            make.top.equalTo(matchLabel.snp.bottom).offset(20)
            make.centerX.equalToSuperview()
            make.size.equalTo(CGSize(width: 91, height: 91))
            make.right.equalTo(self.snp.left).offset(90)
        }

        rightAvatarBg.snp.makeConstraints { (make) in
            make.top.equalTo(leftAvatarBg)
            make.size.equalTo(leftAvatarBg)
            make.left.equalTo(self.snp.right).inset(120)
        }



    }

    func animate() {


        UIView.animate(withDuration: 5) {
            self.leftAvatarBg.snp.updateConstraints { (make) in
                make.right.equalTo(self.snp.left).offset(UIScreen.main.bounds.width/2+30)
            }

            self.rightAvatarBg.snp.updateConstraints { (make) in
                make.left.equalTo(self.snp.right).inset(UIScreen.main.bounds.width/2+30)
            }
            self.layoutIfNeeded()
        }
    }

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

}

和MatchButton：

    import UIKit
import SnapKit

class MatchButton: UIButton {


    let goToChatButton: UIButton = {
        let button = UIButton()
        button.setTitle("Button", for: .normal)
        button.backgroundColor = .red
        button.setTitleColor(.white, for: .normal)
        button.layer.cornerRadius = 24.5
        return button
    }()

    init() {
        super.init(frame: UIScreen.main.bounds)

        self.addSubview(goToChatButton)

        goToChatButton.snp.makeConstraints { (make) in
            make.size.equalTo(CGSize(width: 171, height: 50))
            make.top.greaterThanOrEqualTo(100)
            make.centerX.equalToSuperview()

        }
    }

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

}

Answer 2

如果您希望动画尽快播放，只需将布局animate()功能添加到viewDidAppear。

使用SnapKit进行约束动画

2 个答案: