动画未按预期在 swift 中显示

Question

我已经拍摄了图像，我希望

flyView

从顶部中间下降到顶部 200，然后消失。因为这样尝试过

代码：这里我给flyView的约束为

flyView.centerXAnchor

和

flyView.topAnchor

然后为什么flyView从屏幕左侧进入？当动画发生时，为什么整个屏幕移动得很糟糕。我有清晰的表格视图和下面的提交按钮，但整个屏幕随着动画移动，为什么？如何解决这个问题？请指导我。

class TableAnimationViewController: UIViewController {

@IBOutlet weak var tableView: UITableView!

let flyView = UIImageView()
override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self
    
    self.flyView.image = UIImage(named: "offer_img")
    self.view.addSubview(flyView)
    
    self.flyView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        flyView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50),
        flyView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        flyView.widthAnchor.constraint(equalToConstant: 100),
        flyView.heightAnchor.constraint(equalToConstant: 100)
    ])
}

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    UIView.animate(withDuration: 5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [.curveEaseOut, .repeat], animations: { [self] in
        flyView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 200).isActive = true
        flyView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        flyView.alpha = 0
        self.view.layoutIfNeeded()
    })
}
}

o/p

Answer 1

您的代码有很多问题。

• 您正在尝试在 viewWillAppear 中启动动画。此时，您的视图控制器的自动布局尚未设置您的视图的位置。

• 您正在 FlyView 上安装新的 AutoLayout 约束，而不是更改现有约束的设置。不要那样做。将您想要设置动画的约束保存为属性，然后对它们进行动画更改。

• 您正在重新安装中心 X 约束，该约束实际上不会改变任何内容。也不要这样做。

我根据您的有效代码创建了一个项目。视图控制器代码如下所示：

class ViewController: UIViewController {
    
    @IBOutlet weak var animateButton: UIButton!
    
    var topAnchor: NSLayoutConstraint? = nil
    let flyView = UIImageView()
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.flyView.image = UIImage(named: "Scampers")
        self.flyView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(flyView)
        
        topAnchor = flyView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50)
        NSLayoutConstraint.activate([
            topAnchor!,
            flyView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            flyView.widthAnchor.constraint(equalToConstant: 100),
            flyView.heightAnchor.constraint(equalToConstant: 100)
        ])
    }
    
    @IBAction func handleAnimateButton(_ sender: UIButton?) {
        animateButton?.isEnabled = false
        UIView.animate(withDuration: 2, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [.curveEaseOut, .repeat], animations: { [self] in
            topAnchor?.constant = 200
            flyView.alpha = 0
            self.view.layoutIfNeeded()
        })
    }
    override func viewDidAppear(_ animated: Bool) {
        //handleAnimateButton(nil)
    }
}

（我将动画拉出到按钮操作中，并且还表明如果需要，您可以从

viewDidAppear(_:)

调用动画代码。）

请注意，同时设置弹簧动画和将 Alpha 设置为 0 并没有多大意义。在看到冲刺动画之前，图像视图逐渐消失。

您可能想创建一个关键帧动画，首先执行向下动画，然后执行淡入淡出动画。

我必须使用自己的图像作为 FlyView，但动画如下所示：