Swift Circular Bild Animation

Question

Ich habe eine UIImageView, die ein Bild zeigt, ist das Bild nicht ganz quadratisch, weil es die iPhone-Kamera bilden, ich möchte es kreisförmig angezeigt werden und wenn der Benutzer das Bild berühren, starten Sie eine Animation des Kreises Größer werden und das Bild auf Vollbild einstellen, wie eine kreisförmige Maske in der Spitze haben, und dann de Maske größer werden lassen, das ursprüngliche Bild auf Vollbild sehen, und ich habe keine Idee, wie man es macht.

Answer 1

Sie können dies erreichen, indem Sie einen Timer verwenden, um die Maske in Ihrer Bildansicht anzupassen. Sie sollten einen speziellen Typ von Zeitgeber verwenden, nämlich einen "Anzeige-Link", der für optimale Bildschirmaktualisierungen eindeutig zeitlich festgelegt ist.

Zum Beispiel:

class ViewController: UIViewController { 

    @IBOutlet weak var imageView: UIImageView! 

    weak var mask: CAShapeLayer? 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     // add mask to imageview and save reference to it 

     let mask = CAShapeLayer() 
     mask.fillColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1).cgColor 
     mask.strokeColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0).cgColor 
     imageView.layer.mask = mask 
     self.mask = mask 
    } 

    override func viewDidLayoutSubviews() { 
     super.viewDidLayoutSubviews() 

     // update the mask for the image view for the size of the view (which was unknown at `viewDidLoad`, but is known here) 

     if mask != nil { 
      updatePath(percent: 0) 
     } 
    } 

    @IBAction func didTapButton(_ sender: Any) { 
     // when we tap button, start display link which will drive the animation 

     start = CACurrentMediaTime() 
     let displayLink = CADisplayLink(target: self, selector: #selector(handleDisplaylink(_:))) 
     displayLink.add(to: .main, forMode: .commonModes) 
    } 

    var start: CFTimeInterval!   // when the animation was started 
    let duration: CFTimeInterval = 0.5 // how long will the animation take 

    @objc func handleDisplaylink(_ displayLink: CADisplayLink) { 
     // calculate, based upon elapsed time, how far along we are 

     let percent = CGFloat(min(1, (CACurrentMediaTime() - start)/duration)) 

     // update the path based upon what percent of the animation has been completed 

     updatePath(percent: percent) 

     // if we're done, stop display link and go ahead and remove mask now that it's not needed any more 

     if percent >= 1 { 
      displayLink.invalidate() 
      imageView.layer.mask = nil 
     } 
    } 

    /// Update the circular mask for the image view based upon what percent of the animation is done 

    private func updatePath(percent: CGFloat) { 
     let center = CGPoint(x: imageView.bounds.midX, y: imageView.bounds.midY) 
     let startRadius = min(imageView.bounds.width, imageView.bounds.height) * 0.4 // start radius is 40% of smallest dimension 
     let endRadius = hypot(imageView.bounds.width, imageView.bounds.height) * 0.5 // stop radius is the distance from the center to the corner of the image view 
     let radius = startRadius + (endRadius - startRadius) * percent    // given percent done, what is the radius 

     mask?.path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true).cgPath 
    } 

} 

Das erreicht: