圈的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")