iOS开发之UI篇(6)—— 动画效果
2017-11-23 21:50
295 查看
版本
Xcode 9.1UIView本身封装了一些常用的动画:基础动画、关键帧动画及转场动画。对于一般的iOS开发基本能满足,如果需要更多自定义的动画效果,那就使用核心动画CoreAnimation。
一、基础动画
方法1:UIViewAnimation(UIView类方法)
/* 方法1:UIViewAnimation(UIView类方法)*/ [UIView beginAnimations:@"basicAnimation" context:nil]; // 设置动画animationID、上下文 [UIView setAnimationDuration:5.0]; // 动画持续5秒 [UIView setAnimationDelay:2.0]; // 2秒后执行动画 [UIView setAnimationDelegate:self]; // 设置动画代理对象,当动画开始或者结束时会发消息给代理对象(调用相应方法) [UIView setAnimationWillStartSelector:@selector(start)]; // 动画开始调用方法 [UIView setAnimationDidStopSelector:@selector(stop)]; // 动画结束调用方法 _imageView.center = location; // 移动坐标 [UIView commitAnimations]; // 提交动画 #pragma mark - UIViewAnimation代理方法 - (void)start { NSLog(@"动画开始"); } - (void)stop { NSLog(@"动画结束"); }
方法2:UIViewAnimationWithBlocks(block方法)
[UIView animateWithDuration:5.0 // 动画持续时间 delay:0 // 延迟0秒执行 usingSpringWithDamping:0.5 // 阻尼,范围0-1,阻尼越接近于0,弹性效果越明显 initialSpringVelocity:1.0 // 弹性复位的速度 options:UIViewAnimationOptionCurveLinear animations:^{ NSLog(@"block动画开始"); _imageView.center = location; } completion:^(BOOL finished) { if (finished) { NSLog(@"block动画结束"); } }];
block方法中options枚举:
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:从底部翻转效果
示例
#import "ViewController.h" @interface ViewController () { UIImageView *_imageView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // 设置背景 UIImageView *imageView = [[UIImageView alloc] init]; imageView.frame = [UIScreen mainScreen].bounds; imageView.image = [UIImage imageNamed:@"fox.jpg"]; imageView.contentMode = UIViewContentModeScaleAspectFit; [self.view addSubview:imageView]; // 创建动画控件 _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"heart"]]; _imageView.bounds = CGRectMake(0, 0, 50, 50); _imageView.center = CGPointMake(50, 50); [self.view addSubview:_imageView]; } #pragma mark - 触摸事件 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { UITouch *touch = touches.anyObject; CGPoint location = [touch locationInView:self.view]; /* 方法1:UIViewAnimation(UIView类方法)*/ // [UIView beginAnimations:@"basicAnimation" context:nil]; // 设置动画animationID、上下文 // [UIView setAnimationDuration:5.0]; // 动画持续5秒 // [UIView setAnimationDelay:2.0]; // 2秒后执行动画 // [UIView setAnimationDelegate:self]; // 设置动画代理对象,当动画开始或者结束时会发消息给代理对象(调用相应方法) // [UIView setAnimationWillStartSelector:@selector(start)]; // 动画开始调用方法 // [UIView setAnimationDidStopSelector:@selector(stop)]; // 动画结束调用方法 // _imageView.center = location; // 移动坐标 // [UIView commitAnimations]; // 提交动画 /* 方法2:UIViewAnimationWithBlocks(block方法)*/ [UIView animateWithDuration:5.0 // 动画持续时间 delay:0 // 延迟0秒执行 usingSpringWithDamping:0.5 // 阻尼,范围0-1,阻尼越接近于0,弹性效果越明显 initialSpringVelocity:1.0 // 弹性复位的速度 options:UIViewAnimationOptionCurveLinear animations:^{ NSLog(@"block动画开始"); _imageView.center = location; } completion:^(BOOL finished) { if (finished) { NSLog(@"block动画结束"); } }]; } #pragma mark - UIViewAnimation代理方法 - (void)start { NSLog(@"动画开始"); } - (void)stop { NSLog(@"动画结束"); }
基础动画效果:
二、关键帧动画
基础动画中只能设置首尾两个关键帧动画,即开始位置和结尾位置固定,中间以直线运动。而关键帧动画中,我们可以设置多个关键帧,使得动画更加生动真实。示例
#import "ViewController.h" @interface ViewController () { UIImageView *_imageView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //设置背景 UIImageView *imageView = [[UIImageView alloc] init]; imageView.frame = [UIScreen mainScreen].bounds; imageView.image = [UIImage imageNamed:@"fox.jpg"]; imageView.contentMode = UIViewContentModeScaleAspectFit; [self.view addSubview:imageView]; //创建图像显示控件 _imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"heart.png"]]; _imageView.bounds = CGRectMake(0, 0, 50, 50); _imageView.center=CGPointMake(50, 50); [self.view addSubview:_imageView]; } #pragma mark - 触摸事件 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ /* 关键帧动画 options: 1.常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:动画过程中保证子视图跟随运动。 UIViewAnimationOptionAllowUserInteraction:动画过程中允许用户交互。 UIViewAnimationOptionBeginFromCurrentState:所有视图从当前状态开始运行。 UIViewAnimationOptionRepeat:重复运行动画。 UIViewAnimationOptionAutoreverse :动画运行到结束点后仍然以动画方式回到初始点。 UIViewAnimationOptionOverrideInheritedDuration:忽略嵌套动画时间设置。 UIViewAnimationOptionOverrideInheritedOptions :不继承父动画设置或动画类型。 2.动画模式设置(同前面关键帧动画动画模式一一对应,可以从其中选择一个进行设置) UIViewKeyframeAnimationOptionCalculationModeLinear:连续运算模式。 UIViewKeyframeAnimationOptionCalculationModeDiscrete :离散运算模式。 UIViewKeyframeAnimationOptionCalculationModePaced:均匀执行运算模式。 UIViewKeyframeAnimationOptionCalculationModeCubic:平滑运算模式。 UIViewKeyframeAnimationOptionCalculationModeCubicPaced:平滑均匀运算模式。 */ [UIView animateKeyframesWithDuration:5.0 delay:0 options: UIViewAnimationOptionCurveLinear | UIViewAnimationOptionCurveLinear animations:^{ // 第二个关键帧(准确地说第一个关键帧是开始位置):从0秒开始持续50%的时间,也就是5.0*0.5=2.5秒 [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{ _imageView.center = CGPointMake(100, 100); }]; // 第三个关键帧,从0.5*5.0秒开始,持续5.0*0.25=1.25秒 [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{ _imageView.center = CGPointMake(50, 150); }]; // 第四个关键帧:从0.75*5.0秒开始,持所需5.0*0.25=1.25秒 [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{ _imageView.center = CGPointMake(100, 200); }]; } completion:nil]; } @end
关键帧动画效果:
三、转场动画
示例#define IMAGE_COUNT 3 #import "ViewController.h" @interface ViewController () { UIImageView *_imageView; int _currentIndex; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //定义图片控件 _imageView = [[UIImageView alloc]init]; _imageView.frame = [UIScreen mainScreen].bounds; _imageView.contentMode = UIViewContentModeScaleAspectFit; _imageView.image = [UIImage imageNamed:@"fox0.jpeg"];//默认图片 [self.view addSubview:_imageView]; //添加手势 UISwipeGestureRecognizer *leftSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)]; leftSwipeGesture.direction=UISwipeGestureRecognizerDirectionLeft; [self.view addGestureRecognizer:leftSwipeGesture]; UISwipeGestureRecognizer *rightSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)]; rightSwipeGesture.direction=UISwipeGestureRecognizerDirectionRight; [self.view addGestureRecognizer:rightSwipeGesture]; } #pragma mark - 手势响应方法 // 向左滑动浏览下一张图片 -(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{ [self transitionAnimation:YES]; } // 向右滑动浏览上一张图片 -(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{ [self transitionAnimation:NO]; } #pragma mark - 私有方法 /** 转场动画 @param isNext 是否显示下一张图片 */ -(void)transitionAnimation:(BOOL)isNext{ UIViewAnimationOptions option; if (isNext) { option = UIViewAnimationOptionCurveLinear|UIViewAnimationOptionTransitionFlipFromRight; }else{ option = UIViewAnimationOptionCurveLinear|UIViewAnimationOptionTransitionFlipFromLeft; } [UIView transitionWithView:_imageView duration:1.0 options:option animations:^{ _imageView.image = [self getImage:isNext]; } completion:nil]; } /** 取得当前图片 @param isNext 是否显示下一张图片 @return 返回图片对象 */ -(UIImage *)getImage:(BOOL)isNext{ if (isNext) { _currentIndex=(_currentIndex+1)%IMAGE_COUNT; }else{ _currentIndex=(_currentIndex-1+IMAGE_COUNT)%IMAGE_COUNT; } NSString *imageName=[NSString stringWithFormat:@"fox%i.jpeg",_currentIndex]; return [UIImage imageNamed:imageName]; } @end
转场动画效果:
相关文章推荐
- iOS开发笔记 — Text、UI交互细节、两个动画效果等
- iOS开发笔记7:Text、UI交互细节、两个动画效果等
- iOS开发笔记 — Text、UI交互细节、两个动画效果等
- iOS开发UI高级—32核心动画简介
- ios开发学习--动画(Animation)效果源码分享
- IOS开发之UIView动画效果的实现
- IOS开发-UIView之动画效果的实现方法(合集)
- iOS开发笔记--视图切换的动画效果
- ios开发学习--动画(Animation)效果源码分享
- Android UI开发第十二篇——动画效果Animation(一)
- iOS开发之各种动画各种页面切面效果
- iOS开发UI基础—09UIImageView动画示例之汤姆猫程序
- iOS开发仿淘宝添加到购物车的动画效果实现
- iOS开发 Xcode上使用xib时,查看UI在不同屏幕尺寸的效果
- iOS开发——仿淘宝添加到购物车的动画效果实现
- 【iOS开发系列】简单动画效果
- iOS开发UI高级—34核心动画(关键帧动画)
- iOS开发-UIView之动画效果的实现方法(合集)
- IOS开发-UIView之动画效果的实现方法(合集)
- Android UI开发第十二篇——动画效果Animation(一)