iOS开发之UI篇（6）—— 动画效果

版本

Xcode 9.1

UIView本身封装了一些常用的动画：基础动画、关键帧动画及转场动画。对于一般的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

转场动画效果：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342

推荐阅读更多精彩内容

  • IOS中CALayer的使用
    在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,460评论 6赞 30
  • iOS动画学习篇——让你的应用动起来
    概览 在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你...
    Yiart阅读 3,786评论 3赞 34
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4赞 62
  • 给生活一个正面的美好
    我已经深刻的感知到我遇到了比较棘手的问题了。 从教20多年来，我一直以为我很公正的对待我所遇到的每件事、每个人，没...
    鱼城瓦砾阅读 136评论 0赞 0
  • 课程5.0之this的使用方法
    转发请注明出处：安卓猴的博客（http://sunjiajia.com） 本节课程将学习以下内容： this的涵义...
    GitOPEN阅读 461评论 1赞 1