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()

运行效果