Swift Animation Issue

Question

UIView를 화면 중앙에 애니메이션으로 표시하고 크기를 두 배로 늘린 다음 원래 위치로 돌아가는 동안 원래 크기로 마지막으로 줄이는 매우 기본적인 Swift Function을 만듭니다. 예상대로 실행 기능이 광고없이

view.center = originalCenter 

:

가

func toTheCorner(view: UIView, delay: Double) 
{ 
    // record original position 
    let originalCenter = view.center 
    // record original bounds 
    let b = view.bounds 

    UIView.animateWithDuration(0.1, delay: delay, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: .CurveEaseOut, animations: { 

     // move view to center of screen 
     view.center.x = self.view.bounds.width/2 
     view.center.y = self.view.bounds.height/2 


     }, completion: nil) 

    UIView.animateWithDuration(0.9, delay: delay + 0.1, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: { 

     // Fade image in 
     view.alpha = 1.0 

     // Increase size 
     view.bounds.size.height = b.height + b.height/2 
     view.bounds.size.width = b.width + b.width/2 

     }, completion: nil) 

    UIView.animateWithDuration(0.7, delay: delay + 1.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: { 

     // Shrink to original size 
     view.bounds.size.height = b.height 
     view.bounds.size.width = b.width 

     // Move to original position 
     view.center = originalCenter 


    }, completion: nil) 

} 

문제를 만드는 선이다 : 다음 코드이다. 보기는 화면 중앙에 나타나고 복식이 축소됩니다. 그러나 "view.center = originalCenter"를 입력하자마자 뷰는 중간이 아닌 화면 중앙에있는 원래 반점과 정확히 반대쪽에 나타나고 원래 점으로 이동합니다.

이 줄은 처음 두 애니메이션에 어떻게 영향을 줍니까? 이것은 이렇게 작동해야하고 매우 간단 할 것 같습니다 ...

Thank you! Ben

Answer 1

이 경우 완료 블록을 사용해야합니다.

func toTheCorner(view: UIView, delay: Double) 
{ 
    // record original position 
    let originalCenter = view.center 
    // record original bounds 
    let b = view.bounds 

    UIView.animateWithDuration(0.1, delay: delay, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: .CurveEaseOut, animations: { 

     // move view to center of screen 
     view.center.x = self.view.bounds.width/2 
     view.center.y = self.view.bounds.height/2 

     }, completion: { finished in 
    UIView.animateWithDuration(0.9, delay: delay + 0.1, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: { 

     // Fade image in 
     view.alpha = 1.0 

     // Increase size 
     view.bounds.size.height = b.height + b.height/2 
     view.bounds.size.width = b.width + b.width/2 

     }, completion: { finished in 
    UIView.animateWithDuration(0.7, delay: delay + 1.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: { 

     // Shrink to original size 
     view.bounds.size.height = b.height 
     view.bounds.size.width = b.width 

     // Move to original position 
     view.center = originalCenter 
    }, completion: nil)}) 
    }) 
} 

Answer 2

완료 클로저에서 연결하는 대신 UIView.animateKeyframes 메서드를 사용할 수도 있습니다. 아래에서 "subview"는 애니메이션하려는 뷰이고 "originalPoint"는 뷰의 시작 CGPoint입니다.

let duration1 = 0.1 
    let duration2 = 0.9 
    let duration3 = 0.7 

    let animations = { 
     UIView.addKeyframe(withRelativeStartTime: delay, relativeDuration: duration1) { 
      subview.center = self.view.center 
     } 
     UIView.addKeyframe(withRelativeStartTime: delay + duration1, relativeDuration: duration2) {  
      subview.transform = CGAffineTransform(scaleX: 1.5, y: 1.5) 
     } 
     UIView.addKeyframe(withRelativeStartTime: delay + duration1 + duration2, relativeDuration: duration3) { 
      subview.transform = CGAffineTransform(scaleX: 1.0, y: 1.0) 
      subview.center = originalPoint 
     } 
    } 
    let completion = { (done: Bool) ->() in 
     print("done") 
    } 
    UIView.animateKeyframes(
     withDuration: [duration1, duration2, duration3].reduce(0, +), 
     delay: delay, 
     options: [], 
     animations: animations, 
     completion: completion) 

이 메서드는 여러 개의 UIView.addKeyframes 함수를 포함 할 수있는 클로저를 사용합니다. 복수 색상 here을 통해 애니메이션을 적용하는 간단한 예제를 참조하십시오.