如何在 Swift (UIKit) 中制作类似通知的动画药丸？

Question

我正在尝试制作一个类似于通知的动画药丸，它会从手机顶部向下滑动，然后再向上滑动消失。

我正在尝试制作类似于下图的东西。

我遇到的问题是标签不会动画并随着“药丸”移动。我如何才能解决此问题并将标签粘贴到药丸视图？

这是我的代码：

                                    var popupView = UIView(frame: CGRect(x: 0, y: -80, width: (window?.frame.size.width ?? 100), height: 75.0))
                                popupView.backgroundColor = UIColor.red
                                popupView.layer.cornerRadius = 20
                                popupView.bounds = popupView.frame.insetBy(dx: 10.0, dy: 10.0)
                                popupView.translatesAutoresizingMaskIntoConstraints = false

                                let label = UILabel(frame: CGRect(x: 0, y: -80, width: (window?.frame.size.width ?? 100), height: 75.0))
                                label.translatesAutoresizingMaskIntoConstraints = false
                                label.bounds = label.frame.insetBy(dx: 20, dy: 20)
                                label.textColor = .black
                                label.text = "Here is some text"

                                popupView.addSubview(label)
                                
                                UIView.transition(with: popupView, duration: 1.5, options: .curveEaseInOut, animations: {
                                    window?.addSubview(popupView)
                                    popupView.frame = CGRect(x: 0, y: 40, width: (window?.frame.size.width ?? 100), height: 75.0)
                                    
                                  
                                    }, completion: { _ in
                                        UIView.animate(withDuration: 1, delay: 1.0, options: .curveEaseInOut) {
                                            popupView.frame = CGRect(x: 0, y: -80, width: (window?.frame.size.width ?? 100), height: 75.0)
                                            popupView.bounds = parent.view.frame.insetBy(dx: 15, dy: 15)

                                            label.frame = CGRect(x: 0, y: -80, width: (window?.frame.size.width ?? 100), height: 75.0)
                                        } completion: { finished in
                                            print("completed animation")
                                        }
                                        
                                    })
                            }
                            

Answer 1

每个视图都有自己的坐标空间。视图的frame 是它的大小和原点在其父视图的 坐标空间中，视图的bounds 是它的大小和原点在它自己的 坐标空间中。现在知道了，你就会意识到这样的事情显然不能满足你的要求：

let label = UILabel(frame: CGRect(x: 0, y: -80, width: (window?.frame.size.width ?? 100), height: 75.0))
// ...
popupView.addSubview(label)

您不希望标签相对于弹出视图位于 (0, -80) 处！那将在弹出窗口之外！

这样的行对我来说也没有多大意义：

popupView.bounds = popupView.frame.insetBy(dx: 10.0, dy: 10.0)

这是混合来自两个不同坐标空间的东西。如果你想让视图在每条边上缩小 10 个点，并保持中心位置，只需更改 frame：

popupView.frame = popupView.frame.insetBy(dx: 10.0, dy: 10.0)

如果label 是popupView 的子视图，如果您只是移动popupView，它将与popupView 一起移动。完全不需要像您所做的那样单独移动label。

修复一些其他小问题，您的代码变为：

let popupView = UIView(frame: CGRect(x: 0, y: -80, width: (window?.frame.size.width ?? 100), height: 75.0))
popupView.backgroundColor = UIColor.red
popupView.layer.cornerRadius = 20
popupView.frame = popupView.frame.insetBy(dx: 10, dy: 10)
let label = UILabel(frame: popupView.bounds)
label.bounds = label.bounds.insetBy(dx: 20, dy: 20)
label.textColor = .black
label.text = "Here is some text"
popupView.addSubview(label)

UIView.transition(with: popupView, duration: 1.5, options: .curveEaseInOut, animations: {
    window?.addSubview(popupView)
    popupView.center.y += 160
}, completion: { _ in
    UIView.animate(withDuration: 1, delay: 1.0, options: .curveEaseInOut) {
        popupView.center.y -= 160
    } completion: { finished in
        print("completed animation")
        // remember to remove the popup when you're done!
        popupView.removeFromSuperview()
    }
})