最近在看《iOS 6 Programming Cookbook》的翻译版，它由DevDiv论坛的网友翻译，原文地址：点击跳转。由于下载的pdf都有水印，并且排版不是很好，特别是代码排版，基本不能看，所以这里就整理了一下，方便再次查看。另外把里面提到的点写了一个demo，由于里面一些代码现在已经废弃，所以demo中都是用的新api，下载地址在这里：图形与动画Demo。
《iOS 6 Programming Cookbook》中动画讲的是使用beginAnimations:context: 和 commitAnimations 方法。
查看这个方法的官方文档会发现苹果不鼓励在iOS 4以后使用此方法。而是鼓励使用UIView基于block的动画。
下面我们来看看UIView基于block的动画，我写了一个动画的demo，大家可以下载来看看。
iOS动画入门和动画进阶视频地址如下（来自慕课网）：
动画入门主要包括以下几个：
1.position动画位置
[UIView animateWithDuration:0.4 delay:0.1 options:UIViewAnimationOptionCurveLinear animations:^{
self.blueView.centerX = SCREEN_WIDTH - self.blueView.center.x;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
这是一个简单的位置平移动画。
2.opcity 透明度
[UIView animateWithDuration:1 delay:0.1 options:UIViewAnimationOptionCurveLinear animations:^{
self.blueView.alpha = 0.1;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
3.scale 缩放
[UIView animateWithDuration:1 delay:0.1 options:UIViewAnimationOptionCurveLinear animations:^{
self.blueView.transform = CGAffineTransformMakeScale(2.0, 2.0);
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
4.color 颜色
[UIView animateWithDuration:0.4 delay:0.1 options:UIViewAnimationOptionCurveLinear animations:^{
self.blueView.backgroundColor = [UIColor redColor];
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
5.rotation 旋转
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[self spin];
}
- (void)spin
{
[UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
self.blueView.transform = CGAffineTransformRotate(self.blueView.transform, M_PI);
} completion:^(BOOL finished) {
if (finished)
{
[self spin];
}
}];
}
进阶动画包括以下几个：
1.repeat 重复
重复动画有两种：
options:UIViewAnimationOptionRepeat和UIViewAnimationOptionAutoreve。
[UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationOptionRepeat animations:^{
self.blueView.centerX = SCREEN_WIDTH - self.blueView.center.x;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
[UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationOptionAutoreverse animations:^{
self.redView.centerX = SCREEN_WIDTH - self.redView.center.x;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
[UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
self.greenView.centerX = SCREEN_WIDTH - self.greenView.center.x;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
动画可以组合。
2.Easing
它是控制动画快慢的。
如下图所示：
Easing动画.png
EaseIn：先慢后快
EaseOut：先快后慢
EaseInOut：先加速后减速
[UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
self.blueView.centerX = SCREEN_WIDTH - self.blueView.center.x;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
[UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.redView.centerX = SCREEN_WIDTH - self.redView.center.x;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
[UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.greenView.centerX = SCREEN_WIDTH - self.greenView.center.x;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
3.spring 弹簧动画
[UIView animateWithDuration:3 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
self.blueView.centerX = SCREEN_WIDTH/2 - self.blueView.center.x;
} completion:^(BOOL finished)
}];
