IOS动画教程（一）

从今天开始，hutuni的博客会不断的更新IOS动画相关的教程，希望大家支持指正错误！废话少说直接上代码和效果。

1、先把整个代码放出来，然后再详细的讲解一下吧。

#import "RBStudyViewController.h"@interface RBStudyViewController () {UIImageView*testIV;
}
@end@implementation RBStudyViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.//self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithTitle:@"演示" style:UIBarButtonItemStylePlain target:self action:@selector(testAction3)];//testIV = [[UIImageView alloc]initWithFrame:CGRectMake((self.view.frame.size.width-100.0)/2.0, 100.0, 100.0, 100.0)];testIV.image = [UIImage imageNamed:@"demo_2.png"];[self.view addSubview:testIV];
}#pragma mark - UIBarButtonItem Delegate
// 动画效果：移动；图片中心点移动300像素，再还原原来的位置
- (void)testAction {CGPoint toCenter = testIV.center;toCenter.x -= 300;testIV.center = toCenter;toCenter.x += 300;[UIView animateWithDuration: 0.5 animations: ^{testIV.center = toCenter;} completion:^(BOOL finished) {}];
}
// 动画效果：移动反弹；图片中心点移动300像素，再还原原来的位置，加上反弹
- (void)testAction1 {CGPoint toCenter = testIV.center;toCenter.x -= 300;testIV.center = toCenter;toCenter.x += 300;[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.2f initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{testIV.center = toCenter;} completion:^(BOOL finished) {}];
}
// 动画效果：旋转：图片旋转90度，再还原原来的位置
- (void)testAction2 {CGAffineTransform fromTransform = testIV.transform;CGAffineTransform toTransform = CGAffineTransformRotate(testIV.transform,M_PI/2.0);testIV.transform = toTransform;[UIView animateWithDuration: 0.5 animations: ^{testIV.transform = fromTransform;} completion:^(BOOL finished) {}];
}
// 动画效果：缩放：图片放大1.5倍，再还原原来的位置
- (void)testAction3 {CGAffineTransform fromTransform = testIV.transform;CGAffineTransform toTransform = CGAffineTransformScale(testIV.transform, 1.5, 1.5);testIV.transform = toTransform;[UIView animateWithDuration: 0.5 animations: ^{testIV.transform = fromTransform;} completion:^(BOOL finished) {}];
}@end

2、常用的动画就是frame的改变，alpha的改变，旋转，放大缩小。后面会降到页面过渡效果。

3、反弹动画Spring Animation详解

为了更加直观，我做了一个演示项目，从左至右分别列出了 Spring Animation, Ease-Out Animation 和 Linear Animation 的动画效果：

可以看到，和系统自带的 ease-out 效果相比，Spring Animation 前期速度增加得更快，在动画时间一定的前提下，给人感觉更加快速、干净。

+ (void)animateWithDuration:(NSTimeInterval)durationdelay:(NSTimeInterval)delayusingSpringWithDamping:(CGFloat)dampingRatioinitialSpringVelocity:(CGFloat)velocityoptions:(UIViewAnimationOptions)optionsanimations:(void (^)(void))animationscompletion:(void (^)(BOOL finished))completion

usingSpringWithDamping 的范围为 0.0f 到 1.0f ，数值越小「弹簧」的振动效果越明显。
initialSpringVelocity 则表示初始的速度，数值越大一开始移动越快。
使用

Spring Animation 是线性动画或 ease-out 动画的理想替代品。由于 iOS 本身大量使用的就是 Spring Animation，用户已经习惯了这种动画效果，因此使用它能使 App 让人感觉更加自然，用 Apple 的话说就是「instantly familiar」。此外，Spring Animation 不只能对位置使用，它适用于所有可被添加动画效果的属性。

4、UIViewAnimationOptions

1.常规动画属性设置
UIViewAnimationOptionLayoutSubviews：动画过程中保证子视图跟随运动。
UIViewAnimationOptionAllowUserInteraction：动画过程中允许用户交互。
UIViewAnimationOptionBeginFromCurrentState：所有视图从当前状态开始运行。
UIViewAnimationOptionRepeat：重复运行动画。
UIViewAnimationOptionAutoreverse ：动画运行到结束点后仍然以动画方式回到初始点。
UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套动画时间设置。
UIViewAnimationOptionOverrideInheritedCurve：忽略嵌套动画速度设置。
UIViewAnimationOptionAllowAnimatedContent：动画过程中重绘视图（注意仅仅适用于转场动画）。
UIViewAnimationOptionShowHideTransitionViews：视图切换时直接隐藏旧视图、显示新视图，而不是将旧视图从父视图移除（仅仅适用于转场动画）
UIViewAnimationOptionOverrideInheritedOptions ：不继承父动画设置或动画类型。
2.动画速度控制（可从其中选择一个设置）
UIViewAnimationOptionCurveEaseInOut：动画先缓慢，然后逐渐加速。
UIViewAnimationOptionCurveEaseIn ：动画逐渐变慢。
UIViewAnimationOptionCurveEaseOut：动画逐渐加速。
UIViewAnimationOptionCurveLinear ：动画匀速执行，默认值。
3.转场类型（仅适用于转场动画设置，可以从中选择一个进行设置，基本动画、关键帧动画不需要设置）
UIViewAnimationOptionTransitionNone：没有转场动画效果。
UIViewAnimationOptionTransitionFlipFromLeft ：从左侧翻转效果。
UIViewAnimationOptionTransitionFlipFromRight：从右侧翻转效果。
UIViewAnimationOptionTransitionCurlUp：向后翻页的动画过渡效果。
UIViewAnimationOptionTransitionCurlDown ：向前翻页的动画过渡效果。
UIViewAnimationOptionTransitionCrossDissolve：旧视图溶解消失显示下一个新视图的效果。
UIViewAnimationOptionTransitionFlipFromTop ：从上方翻转效果。
UIViewAnimationOptionTransitionFlipFromBottom：从底部翻转效果。