圈的UIView動畫保持圓形狀

Question

調整我有我正在後臺具有圓形形狀一個UIView：

self.colourView.layer.cornerRadius = 350 
self.colourView.clipsToBounds = true 

隨着視圖是一個700通過700平方。

我再試圖改變使用該視圖的大小：

UIView.animate(withDuration: zoomLength, 
            delay: 0, 
            options: .curveEaseIn, 
            animations: { 
            self.colorViewWidth.constant = 100 
            self.colorViewHeight.constant = 100 

            self.colourView.layer.cornerRadius = 50 
            self.colourView.clipsToBounds = true 
            self.view.layoutIfNeeded() 
            }, 
            completion: { finished in 

             }) 

            }) 

的問題是這樣的視圖切換的拐角半徑50迅速。因此，當視圖縮小時，它看起來不像圓縮小，而是圓角的正方形，直到達到100乘100的大小。

如何在動畫中保持圓形形狀的同時，將形狀循環縮小並縮小。

Answer 1

你總是可以通過CABasicAnimation和UIView動畫一起製作角點半徑的動畫。見下面的例子。

import UIKit 

class ViewController: UIViewController { 

    //cause 'merica 
    var colorView = UIView() 
    var button = UIButton() 

    var colorViewWidth : NSLayoutConstraint! 
    var colorViewHeight : NSLayoutConstraint! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 


     colorView.frame = CGRect(x: 0, y: 0, width: 750, height: 750) 
     colorView.center = self.view.center 
     colorView.backgroundColor = .blue 
     colorView.layer.cornerRadius = 350 
     colorView.clipsToBounds = true 
     colorView.layer.allowsEdgeAntialiasing = true 
     colorView.translatesAutoresizingMaskIntoConstraints = false 

     //set up constraints 

     colorViewWidth = NSLayoutConstraint(item: colorView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 750) 
     colorViewWidth.isActive = true 

     colorViewHeight = NSLayoutConstraint(item: colorView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 750) 
     colorViewHeight.isActive = true 

     self.view.addSubview(colorView) 
     colorView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true 
     colorView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true 

     //button for action 
     button = UIButton(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width - 20, height: 50)) 
     button.center = self.view.center 
     button.center.y = self.view.bounds.height - 70 
     button.addTarget(self, action: #selector(ViewController.pressed(sender:)), for: .touchUpInside) 
     button.setTitle("Animate", for: .normal) 
     button.setTitleColor(.blue, for: .normal) 

     self.view.addSubview(button) 

    } 

    func pressed(sender:UIButton) { 

     self.colorViewWidth.constant = 100 
     self.colorViewHeight.constant = 100 

     UIView.animate(withDuration: 1.0, 
         delay: 0, 
         options: .curveEaseIn, 
         animations: { 
         self.view.layoutIfNeeded() 

     }, 

         completion: { finished in 

     }) 

     //animate cornerRadius and update model 
     let animation = CABasicAnimation(keyPath: "cornerRadius") 
     animation.duration = 1.0 
     //super important must match 
     animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn) 
     animation.fromValue = colorView.layer.cornerRadius 
     animation.toValue = 50 
     colorView.layer.add(animation, forKey: nil) 
     //update model important 
     colorView.layer.cornerRadius = 50 

    } 
} 

結果：

Answer 2

嘗試把你的形象viewDidLayoutSubviews（）內

override func viewDidLayoutSubviews() { 
    super.viewDidLayoutSubviews() 

colourView.layer.cornerRadius = colourView.frame.size.width/2 
colourView.layer.masksToBounds = true 
colourView.layer.borderWidth = 3.0 
colourView.layer.borderColor = UIColor(red: 142.0/255.5, green: 142.0/255.5, blue: 142.0/255.5, alpha: 1.0).cgColor 

} 

讓我知道如何去

乾杯

Answer 3

關於動畫，你需要創建CAShapeLayer對象，然後設置cgpath的圖層對象。

let circleLayer = CAShapeLayer() 
let radius = view.bounds.width * 0.5 
//Value of startAngle and endAngle should be in the radian. 
let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true) 
circleLayer.path = path.cgPath 

以上內容將爲您畫圓。之後，您可以在layer對象上應用動畫。

let animation = CABasicAnimation(keyPath: "strokeEnd") 
animation.fromValue = fromValue//you can update the value here by default it will be 0 
animation.toValue = toValue //you can update the value here by default it will be 1 
animation.duration = CFTimeInterval(remainingTime) 
    circleLayer 
circleLayer.removeAnimation(forKey: "stroke") 
circleLayer.add(animation, forKey: "stroke")