在iOS中,实现动画有两种方法。一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations。这三个方法都是类方法。
使用animateWithDuration来实现动画
此方法共有5个参数:
- duration:动画从开始到结束的持续时间,单位是秒
- delay:动画开始前等待的时间
- options:动画执行的选项。里面可以设置动画的效果。可以使用UIViewAnimationOptions类提供的各种预置效果
- anmations:动画效果的代码块
- completion:动画执行完毕后执行的代码块
UIView支持动画效果的属性
- frame:此属性包含一个矩形,即边框矩形,此值确定了当前视图在其父视图坐标系中的位置与尺寸
- bounds:也是矩形,边界矩形,它指的是视图在其自己的坐标系中的位置和尺寸,左上角坐标永远是(0,0)
- center:确定视图的中心点在其父视图坐标系中的位置坐标。即定义当前视图在父视图中的位置
- alpha:视图的透明度。(但视图完全透明时,不能响应触摸消息)
- backgroundColor:背景色
- transform:这是一种3×3的变化矩阵。通过这个矩阵我们可以对一个坐标系统进行缩放、平移、旋转以及这两者的任意组操作。
Transform(变化矩阵)的四个常用的变换方法
- CGAffineTransformMake():返回变换矩阵
- CGAffineTransformMakeTranslation():返回平移变换矩阵
- CGAffineTransformMakeScale():返回缩放变换矩阵
- CGAffineTransformMakeRotation():返回旋转变换矩阵
样例1:方块初始缩小为原始尺寸1/10。在1秒的动画中复原到完整大小,同时还伴随旋转效果。
import UIKit
class ViewController: UIViewController {
var dimension:Int = 4 // 游戏方格维度
var width:CGFloat = 50 // 数字格子的宽度
var padding:CGFloat = 6 // 格子与格子的间距
var backgrounds:Array<UIView>! // 保存背景图数据
override func viewDidLoad() {
super.viewDidLoad()
self.backgrounds = Array<UIView>()
setupGameMap()
playAnimation()
}
func setupGameMap() {
var x:CGFloat = 50
var y:CGFloat = 150
for i in 0..<dimension {
print(i)
y = 150
for _ in 0..<dimension {
// 初始化视图
let background = UIView(frame:CGRectMake(x, y, width, width))
background.backgroundColor = UIColor.darkGrayColor()
self.view.addSubview(background)
// 将视图保存起来,以备后用
backgrounds.append(background)
y += padding + width
}
x += padding+width
}
}
func playAnimation() {
for tile in backgrounds {
// 先将数字块大小置为原始尺寸的 1/10
tile.layer.setAffineTransform(CGAffineTransformMakeScale(0.1,0.1))
// 设置动画效果,动画时间长度1 秒.
UIView.animateWithDuration(1, delay:0.01,
options:UIViewAnimationOptions.TransitionNone, animations:
{
()-> Void in
// 在动画中,数字块有一个角度的旋转
tile.layer.setAffineTransform(CGAffineTransformMakeRotation(90))
},
completion:{
(finished:Bool) -> Void in
UIView.animateWithDuration(1, animations:{
()-> Void in
// 完成动画时,数字块复原
tile.layer.setAffineTransform(CGAffineTransformIdentity)
})
})
}
}
}
样例2:只有从小变大的效果
func playAnimation() {
for tile in backgrounds{
// 先将数字块大小置为原始尺寸的1/10
tile.layer.setAffineTransform(CGAffineTransformMakeScale(0.1,0.1))
// 设置动画效果,动画时间长度 1 秒.
UIView.animateWithDuration(1, delay:0.01,
options:UIViewAnimationOptions.TransitionNone, animations:
{
()-> Void in
tile.layer.setAffineTransform(CGAffineTransformMakeScale(1,1))
},
completion:{
(finished:Bool) -> Void in
UIView.animateWithDuration(0.08, animations:{
()-> Void in
tile.layer.setAffineTransform(CGAffineTransformIdentity)
})
})
}
}
样例3:方块从不透明到透明的效果
func playAnimation() {
for tile in backgrounds{
tile.alpha = 0;
// 设置动画效果,动画时间长度 1 秒。
UIView.animateWithDuration(1, delay:0.01,
options:UIViewAnimationOptions.CurveEaseInOut, animations:
{
()-> Void in
},
completion:{
(finished:Bool) -> Void in
UIView.animateWithDuration(1, animations:{
()-> Void in
tile.alpha = 1
})
})
}
}