从今天开始,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)duration
delay:(NSTimeInterval)delay
usingSpringWithDamping:(CGFloat)dampingRatio
initialSpringVelocity:(CGFloat)velocity
options:(UIViewAnimationOptions)options
animations:(void (^)(void))animations
completion:(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:从底部翻转效果。