iOS動畫：UIImageView幀動畫(完結)

這是iOS動畫的最後一章，比較簡單，我們來創建一隻企鵝移動的動畫

1.設置幀動畫

  var walkFrames = [
    UIImage(named: "walk01.png")!,
    UIImage(named: "walk02.png")!,
    UIImage(named: "walk03.png")!,
    UIImage(named: "walk04.png")!
  ]
  let totalDuration = 1.0
  func loadWalkAnimation() {
    penguin.animationImages = walkFrames
    penguin.animationDuration = totalDuration / 3
    penguin.animationRepeatCount = 3
  }

animtionImages：存儲幀動畫的所有幀圖像。
animationDuration：告訴UIKit動畫一次動畫迭代需要持續多長時間。
animationRepeatCount：控制動畫的重複次數

當點擊左右按鈕時，更改企鵝朝向

    var isLookingRight: Bool = true {
        didSet {
            let xScale: CGFloat = isLookingRight ? 1 : -1
            penguin.transform = CGAffineTransform(scaleX: xScale, y: 1)
            slideButton.transform = penguin.transform
        }
    }
    @IBAction func actionLeft(_ sender: AnyObject) {
    	isLookingRight = false
  	}
  
  	@IBAction func actionRight(_ sender: AnyObject) {
    	isLookingRight = true
  	}

在actionLeft中添加動畫開始，當點擊左側按鈕時，幀圖像將開始切換播放動畫：

	penguin.startAnimating()	

在actionLeft中添加企鵝行走動畫

	    UIView.animate(withDuration: totalDuration, delay: 0, options: .curveEaseOut, animations: {
        self.penguin.center.x -= self.walkSize.width
    }, completion: nil)

在actionRight中添加向右行走的代碼：

    penguin.startAnimating()
    UIView.animate(withDuration: totalDuration, delay: 0,
        options: .curveEaseOut,
        animations: {
        self.penguin.center.x += self.walkSize.width
        },
        completion: nil
    )

行走的動畫就完成了，現在我們添加跳躍和滑行的動畫，當滑行時修改penguin幀圖像

	@IBAction func actionSlide(_ sender: AnyObject) {
    	loadSlideAnimation()
    	penguin.startAnimating()
  	}
  	func loadSlideAnimation() {
    	penguin.animationImages = slideFrames
    	penguin.animationDuration = totalDuration
    	penguin.animationRepeatCount = 1
  	}

當點擊跳躍調用actionSlide方法時，將會執行新的動畫效果，但是會發現，圖像尺寸被放大了，因爲原來的動畫幀尺寸就比較大，所以我們需要修改其大小。

	@IBAction func actionSlide(_ sender: AnyObject) {
    	loadSlideAnimation()
    	penguin.frame = CGRect(x: penguin.frame.origin.x, y: penguinY+(walkSize.height-slideSize.height), width: slideSize.width, height: slideSize.height)
    	penguin.startAnimating()
  	}

添加滑行的動畫

	    UIView.animate(withDuration: totalDuration - 0.02, delay: 0.0, options: .curveEaseOut, animations: {
        self.penguin.center.x += self.isLookingRight ? self.slideSize.width : -self.slideSize.width
    }) { (_) in
        
    }

動畫完成後還原企鵝動畫

	self.penguin.frame = CGRect(x: self.penguin.frame.origin.x, y: self.penguinY, width: self.walkSize.width, height: self.walkSize.height)
	self.loadWalkAnimation()

運行效果