这是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()
运行效果