使用圆角半径从上到下创建动画 UIView

Question

我开发了一个 iOS 应用程序，里面有一个动画，我想创建一个 animation like this。

我试过：

blueView.backgroundColor = .blue
let duration = 1
let radius = blueView.frame.height / 2

self.blueView.frame.size = CGSize(width:   50, height:   50)
blueView.layer.cornerRadius = radius
if #available(iOS 11, *) {
    UIView.animate(withDuration: TimeInterval(duration), animations: {
       self.blueView.frame.size = CGSize(width:   self.view.frame.width, height:   self.view.frame.height)    
    }, completion: { _ in
                        UIView.animate(withDuration: TimeInterval(duration), animations: {

                            self.blueView.layer.cornerRadius = 0
                        })
    })
}

但是我没有达到我想要的，有什么想法或帮助吗？

Answer 1

您似乎没有开始更新动画中的 blueView 半径。下面是一些快速 changes/additions 来接近你提到的动画。我以编程方式添加了视图，并对您的代码进行了最少的更改。

let blueView: UIView = {
    // set starting position of view here
    let view = UIView(frame: CGRect(x: UIScreen.main.bounds.size.width , y: 0, width: 50, height: 50))
    view.backgroundColor = .blue
    view.layer.cornerRadius = view.frame.height / 2
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.addSubview(blueView)
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    let duration: TimeInterval = 1

    if #available(iOS 11, *) {
        UIView.animate(withDuration: duration, animations: {
            // set blue view size to double the screen so it can cover full screen with corner radius
            self.blueView.frame.size = CGSize(width: self.view.frame.height * 2, height:   self.view.frame.height * 2)
            // update corder radius to equal new size
            self.blueView.layer.cornerRadius = self.view.frame.height
            // Set ending position of view here to offset new size and radius
            self.blueView.center = CGPoint(x: UIScreen.main.bounds.width, y: 0)
        }, completion: { _ in
            UIView.animate(withDuration: duration, animations: {
                self.blueView.frame.size = CGSize(width: self.view.frame.width, height:   self.view.frame.height)
                self.blueView.layer.cornerRadius = 0
                self.blueView.center = self.view.center
            })
        })
    }
}

我相信这可以用不同的方式完成，但我想让代码与您开始时的代码接近，希望它能帮助您理解我所做的更改。

使用圆角半径从上到下创建动画 UIView

Create Animated UIView from top to bottom with corner radius

ios

swift

uiviewanimation