Swift Circular image 애니메이션

Question

나는 이미지를 표시하는 UIImageView을 가지고 있는데, 그 모양은 iPhone 카메라이므로 원형으로 표시되고 사용자가 이미지를 터치하면 원의 애니메이션이 시작되기 때문에 이미지가 완전히 사각형이 아닙니다. 더 커지고 이미지를 전체 화면에 설정하십시오. 예를 들어, 원형 마스크를 맨 위에 놓은 다음 마스크가 원본 이미지를 전체 화면으로 볼 수있게하려면 더 커야합니다. 나는 그것을 만드는 방법을 모릅니다.

Answer 1

타이머를 사용하여 이미지보기에서 마스크를 조정하면됩니다. 최적의 화면 업데이트를 위해 고유 한 시간을 가진 특별한 유형의 타이머, 즉 "디스플레이 링크"를 사용해야합니다. 예를 들어

는 :

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 
    } 

} 

달성한다 :