Swift動畫問題

Question

我正在創建一個非常基本的Swift函數，它可以將UIView動畫到屏幕的中心，讓它出現並且大小加倍，然後在返回到原始位置時最後縮回到原始大小。下面是代碼：

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 

沒有這條線按預期執行。視圖出現在屏幕中央，然後雙擊縮小。但是，只要我進入「view.center = originalCenter」，視圖就會在屏幕中心的原始位置上正好相反，而不是中間，然後移動到原始位置。

這條線是如何影響前兩個動畫的？這似乎應該工作，並且很簡單...

謝謝！ 本

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。