《iOS Animations by Tutorials》笔记

Raywenderlich的《iOS Animations by Tutorials》 读书笔记

View Animations

Getting Started With View Animations

1
2
3
4
UIView.animateWithDuration(0.5, animations: {
self.heading.center.x += self.view.bounds.width
})
//duration 持续时间
1
2
3
4
5
UIView.animateWithDuration(0.5, delay: 0.4, options: [], animations: {

self.password.center.x += self.view.bounds.width
}, completion: nil)
//delay:延迟时间(单位为秒)

动画属性 (Animatable properties)

  1. Position and size(bounds/frame/center).
  2. Appearance (backgroundColor/alpha).
  3. Transform (ratation,scale,position).

动画选项(Animation options)

  1. Repeating
    • .Repeat : 重复执行
    • .Autoreverse.Repeat连用,重复往返执行。
  2. Animation easing
    • .Linear 匀速。
    • .CurveEaseIn 起始缓慢,逐渐加速。
    • .CurveEaseOut 起始迅速,逐渐减速。
    • .CurveEaseInOut 起始缓慢,加速一半时间后减速结束。

Springs(弹簧)

1
2
3
4
class func animateWithDuration(_ duration: NSTimeInterval, delay delay: NSTimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options options: UIViewAnimationOptions, animations animations: () -> Void, completion completion: ((Bool) -> Void)?)

//dampingRatio : 弹簧的阻尼 取值范围0-1;越小弹簧波动越大;
//velocity : 初始速度。 如果总距离为200pt,移动速度为100pts,那么改值设0.5.以此类推。

Transitions

1
2
3
4
5
6
7
// Apple文档示例:
[UIView transitionWithView:containerView
duration:0.2
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^{ [fromView removeFromSuperview]; [containerView addSubview:toView]; }
completion:NULL];
// 上面代码创建了一个翻转过渡的动画,执行过程中fromView 被移除,添加了toView,看起来像从fromView翻转到了toView;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

UIView.transitionWithView(animationContainerView!,
duration: 0.33,
options: [.CurveEaseOut, .TransitionFlipFromBottom],
animations: {
self.animationContainerView!.addSubview(newView)
}, completion: nil)
// 添加

UIView.transitionWithView(animationContainerView!,
duration: 0.33,
options: [.CurveEaseOut, .TransitionFlipFromBottom],
animations: {
self.newView.removeFromSuperview()
}, completion: nil)
// 移除

UIView.transitionWithView(self.newView, duration: 0.33, options:
[.CurveEaseOut, .TransitionFlipFromBottom], animations: {
self.newView.hidden = true
}, completion: nil)
// 隐藏

UIView.transitionFromView(self.oldView!, toView: self.newView!,

duration: 0.33, options: [.TransitionFlipFromTop],

completion: nil)
// 替换

Keyframe Animations

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    func planDepart(){
let orginalCenter = planeImage.center
UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: [], animations: {
// add kekframes
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
self.planeImage.center.x += 80.0
self.planeImage.center.y += 10
})
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.4, animations: {
self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))
})

UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25, animations: {
self.planeImage.center.x += 100.0
self.planeImage.center.y -= 50.0
self.planeImage.alpha = 0.0
})

UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01, animations: {
self.planeImage.transform = CGAffineTransformIdentity
self.planeImage.center = CGPoint(x: 0.0, y:orginalCenter.y)
})

UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45, animations: {
self.planeImage.alpha = 1.0
self.planeImage.center = orginalCenter
})
}, completion: nil)

}

// class func addKeyframeWithRelativeStartTime(_ frameStartTime: Double, relativeDuration frameDuration: Double, animations animations: () -> Void)
frameStartTime frameDuration 取值范围都为 0-1 表示占总时长的百分比。