Kreis UIView mit Animation Haltung Kreisform der Größe

Question

Ich habe eine UIView, die ich den Hintergrund mit einer Kreisform machte:

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

Mit dem Blick von 700 Quadrat ein 700 sein.

ich dann versuchen, die Größe dieser Ansicht mit sich ändern:

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 

             }) 

            }) 

Das Problem dabei ist der Eckenradius des Ansichtsschalter auf 50 sofort. Wenn also die Ansicht kleiner wird, sieht es nicht so aus, als würde ein Kreis kleiner, sondern ein Quadrat mit abgerundeten Ecken, bis die Größe 100 mal 100 erreicht ist.

Wie kann ich eine Ansicht betrachten, die in der Form zirkuliert und sie schrumpft, während die Kreisform während der Animation beibehalten wird.

Answer 1

Sie können den Eckenradius auch immer mit einer CABasicAnimation neben den UIView-Animationen animieren. Siehe Beispiel unten.

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 

    } 
} 

Ergebnis:

Answer 2

Versuchen Sie Ihr Bild in einem 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 

} 

lassen Sie mich wissen setzen, wie es

Prost

Answer 3

In Bezug auf Animation, die Sie das CAShapeLayer Objekt erstellen müssen geht und dann die cgpath des Ebenenobjekts.

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 

Das obige wird den Kreis für Sie zeichnen. Danach können Sie die Animation auf layer Objekt anwenden.

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