动画 - 雾里寻梦

动画

为了提高用户的体验度，IOS设置了不少的动画效果，它使得视图之间的切换过程更绚丽多彩。本章将主要讲解三种实现动画的方式：UIView动画、CATransition动画、NSTimer动画。

1. UIView动画

　　在UIView类中，可以实现一些既有趣又特别的动画效果。本节主要讲解如何使用UIView实现动画效果。

1.1 创建动画块

　　UIView动画是成块出现的。如果想实现UIView动画播放，首先要创建动画块。

　　一个动画块由开始动画beginAnimations:context:方法和commitAnimations:方法构成。

1.1.1 开始动画

　　beginAnimations:context: 方法实现的功能是用来标记动画块开始，其语法形式如下：

　　+(void)beginAnimations:(NSString *)animationID context:(void *)context;

　　其中(NSString *)animationID用来指定动画的标识，是一个字符串；（void*）context用来指定传递给动画消息，一般设置为nil.

1.1.2 结束动画

　　如果想要结束动画，就要使用commitAnimations:方法，其语法形式如下：

　　+（void）commitAnimations;　　　　　

　　【示例 1】

[UIView beginAnimations:nil context:nil];
[self.view setBackgroundColor:[UIColor redColor]];
[UIView commitAnimations];

1.2 修改代码块

　　在动画块中，可以修改动画的各种属性，如持续时间、相对速度等。以下主要讲解如何修改动画块中的属性。

1.2.1 修改动画持续时间

　　setAnimationDuration:方法实现的功能是对动画的持续时间进行修改，其语法形式如下：

　　+(void)setAnimationDuration:(NSTimeInterval)duration;

　　其中(NSTimerInterval)duration用来指定动画的持续时间。

1.2.2 修改动画相对速度

　　在一个动画中，速度的改变也是很重要的。要实现对动画的相对速度进行修改，就用setAnimationCurve:方法，其语法形式如下：

　　+(void)setAnimationCurve:(UIViewAnimationCurve)curve;

　　其中（UIViewAnimationCurve）curve用来指定动画曲线。动画曲线有四种，如下表所示。

动画曲线

动画曲线	功能
UIViewAnimationCurveEaseInOut	动画开始缓慢，中间加速，最后在变为缓慢
UIViewAnimationCurveEaseIn	动画开始缓慢，之后慢慢加快
UIViewAnimationCurveEaseOut	动画开始块，之后慢慢变慢
UIViewAnimationCurveLinear	动画从开始到结束一直匀速

　　【示例 2】

    [UIView beginAnimations:nil context:nil];
    //设置动画相对速度，先块，后慢，再块
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    //设置动画时间为0.5秒
    [UIView setAnimationDuration:0.5];
    self.button.frame = CGRectMake(0, 650, 320, 216);
    [UIView commitAnimations];

1.3 过滤动画

　　在视图与视图切换过程中，经常用到过渡动画。如果要实现过渡动画。就要使用setAnimationTransition:forView:cache:方法，其语法形式如下：

　　+（void）setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;

　　其中（UIViewAnimationTransition）transition用来指定过渡动画，过渡动画有5种，如下表所示；

　　　　 (UIView*)view用来指定过渡的视图；

　　　　 (BOOL)cache用来指定是否马上缓存视图内容。

过渡动画

过渡动画	功能
UIViewAnimationTransitionNone	无过渡效果
UIViewAnimationTransitionFlipFromLeft	从左向右旋转
UIViewAnimationTransitionFlipFromRight	从右向左旋转
UIViewAnimationTransitionCurlUp	卷曲翻页，从下往上
UIViewAnimationTransitionCurlDown	卷曲翻页，从上往下

　　【示例 - 翻页效果】

#import "MainViewController.h"
@implementation MainViewController
-(void)viewDidLoad{
    //创建红色视图
    UIView *redView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [redView setBackgroundColor:[UIColor redColor]];
    [self.view addSubview:redView];
    //创建黄色视图
    UIView *yellowView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [yellowView setBackgroundColor:[UIColor yellowColor]];
    [self.view addSubview:yellowView];
    //创建按钮并声明方法
    //向上翻页按钮
    UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button setTitle:@"向上翻页" forState:UIControlStateNormal];
    button.frame = CGRectMake(10, 10, 300, 40);
    [button addTarget:self action:@selector(curlUp) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    //向下翻页按钮
    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button2 setTitle:@"向下翻页" forState:UIControlStateNormal];
    button2.frame = CGRectMake(10, 60, 300, 40);
    [button2 addTarget:self action:@selector(curlDown) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button2];
}

#pragma mark - 向上翻页
-(void)curlUp{
    [UIView beginAnimations:nil context:nil];
    //设置动画时长为1秒
    [UIView setAnimationDuration:1.0f];
    //设置动画效果为（快->慢->块）
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    //设置动画过渡效果为向上翻页
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
    [UIView commitAnimations];
}

#pragma mark - 向下翻页
-(void)curlDown{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0f];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];
    [UIView commitAnimations];
}

@end

　　运行效果如下：

　　【示例 - 旋转效果】

#import "MainViewController.h"
@implementation MainViewController
-(void)viewDidLoad{
    //创建红色视图
    UIView *redView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [redView setBackgroundColor:[UIColor redColor]];
    [self.view addSubview:redView];
    //创建黄色视图
    UIView *yellowView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [yellowView setBackgroundColor:[UIColor yellowColor]];
    [self.view addSubview:yellowView];
    //创建按钮并声明方法
    //从左向右旋转
    UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button setTitle:@"从左向右旋转" forState:UIControlStateNormal];
    button.frame = CGRectMake(10, 10, 300, 40);
    [button addTarget:self action:@selector(FlipFromLeft) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    //从右向左旋转
    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button2 setTitle:@"从右向左旋转" forState:UIControlStateNormal];
    button2.frame = CGRectMake(10, 60, 300, 40);
    [button2 addTarget:self action:@selector(FlipFromRight) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button2];
}

#pragma mark - 从左向右旋转
-(void)FlipFromLeft{
    [UIView beginAnimations:nil context:nil];
    //设置动画时长为1秒
    [UIView setAnimationDuration:1.0f];
    //设置动画效果为（快->慢->块）
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    //设置动画过渡效果为向上翻页
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES];
    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
    [UIView commitAnimations];
}

#pragma mark - 从右向左旋转
-(void)FlipFromRight{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0f];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];
    [UIView commitAnimations];
}

@end

　　运行效果如下：

2. CATransition 动画

　　在iOS中，除了可以使用UIView实现动画外，还可以使用CATransition类实现动画效果。此动画效果主要在过渡时使用。它的动画效果分为两大类：一类是功公开的动画效果，一类是非公开的动画效果。本章节主要讲解CATransition如何实现动画，以及两大类动画效果。

2.1 CATransition 实现动画

　　CATransition实现动画需要3个步骤，以下主要讲解了这三个步骤：

　　1> 创建CATransition对象

　　　　要想使用CATransition类实现动画效果，首先要使用方法animation:对其进行创建，其语法形式如下：

　　　　+（id）animation;

　　2> 设置动画

　　　　(1) 动画方向

　　　　　　使用subtype:属性对动画的方向进行设置，其语法形式如下：

　　　　　　@property (copy) NSString *subtype;

　　　　　　动画方向有4种，如下表：

动画方向

动画方向	功能
kCATransitionFromRight	从过渡层右侧开始实现动画
kCATransitionFromLeft	从过渡层左侧开始实现动画
kCATransitionFromTop	从过渡层顶部开始实现动画
kCATransitionFromBotton	从过渡层底部开始实现动画

　　　(2) 设置动画效果

　　　　　　type属性实现了对动画效果的设置，其语法形式如下：

　　　　　　@property (copy) NSString *type;

　　　　　　其中动画效果分为两大类：一类是公开的，一类是非公开的。

　　3> 添加到Core Animation层

　　　　当创建CATransition对象后，使用addAnimation forKey:方法，将创建的CATransition对象添加到Core Animation层中(CATransition只针对层，不针对视图)，其语法如下：

　　　　-(void)addAnimation:(CAAnimation*)anim forKey:(NSString *)key;

　　　　其中（CAAnimation*）anim 用来指定一个CAAnimation对象；（NSString*）key用来指定一个字符串对象，用来识别动画。

2.2 公开动画效果

　　所谓公开动画效果是可以在帮助文档中查到的动画效果，公开动画效果有4种，如下表所示：

公开动画效果

公开动画效果	功能
KCATransitionFade	渐渐消失
kCATransitionMoveIn	覆盖进入
kCATransitionPush	推出
kCATransitionReveal	揭开

　　【示例 - 公开动画效果】

#import "MainViewController.h"
@implementation MainViewController
-(void)viewDidLoad{
    //创建红色视图
    UIView *redView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [redView setBackgroundColor:[UIColor redColor]];
    [self.view addSubview:redView];
    //创建黄色视图
    UIView *yellowView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [yellowView setBackgroundColor:[UIColor yellowColor]];
    [self.view addSubview:yellowView];
    //创建按钮并声明方法
    //变化1
    UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button setTitle:@"变化1" forState:UIControlStateNormal];
    button.frame = CGRectMake(10, 10, 300, 40);
    [button addTarget:self action:@selector(change1) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    //变化2
    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button2 setTitle:@"变化2" forState:UIControlStateNormal];
    button2.frame = CGRectMake(10, 60, 300, 40);
    [button2 addTarget:self action:@selector(change2) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button2];
}

#pragma mark - 变化1
-(void)change1{
    CATransition *transition = [CATransition animation];
    [transition setDuration:10.0f];
    transition.type = kCATransitionPush;
    transition.subtype = kCATransitionFromLeft;
    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
    [self.view.layer addAnimation:transition forKey:nil];
}

#pragma mark - 变化2
-(void)change2{
    CATransition *transition = [CATransition animation];
    [transition setDuration:10.0f];
    transition.type = kCATransitionMoveIn;
    transition.subtype = kCATransitionFromTop;
    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
    [self.view.layer addAnimation:transition forKey:nil];
}

@end

　　运行效果如下：

2.3 非公开效果

　　在帮助文档中找不到的动画效果就是非公开动画效果，非公开动画效果有7种，如下表所示：

非公开动画效果

非公开动画效果	功能
@“cube”	立方体
@"suckEffect"	吸收
@"oglFlip"	翻转
@"rippleEffect"	波纹
@"pageCurl"	卷页
@"cameralrisHollowOpen"	镜头开
@"cameralrisHollowClose"	镜头关

　　【示例 - 非公开效果】

#import "MainViewController.h"
@implementation MainViewController
-(void)viewDidLoad{
    //创建红色视图
    UIView *redView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [redView setBackgroundColor:[UIColor redColor]];
    [self.view addSubview:redView];
    //创建黄色视图
    UIView *yellowView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [yellowView setBackgroundColor:[UIColor yellowColor]];
    [self.view addSubview:yellowView];
    //创建按钮并声明方法
    //变化1
    UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button setTitle:@"变化1" forState:UIControlStateNormal];
    button.frame = CGRectMake(10, 10, 300, 40);
    [button addTarget:self action:@selector(change1) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    //变化2
    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button2 setTitle:@"变化2" forState:UIControlStateNormal];
    button2.frame = CGRectMake(10, 60, 300, 40);
    [button2 addTarget:self action:@selector(change2) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button2];
}

#pragma mark - 变化1
-(void)change1{
    CATransition *transition = [CATransition animation];
    [transition setDuration:10.0f];
    transition.type = @"cube";
    transition.subtype = kCATransitionFromRight;
    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
    [self.view.layer addAnimation:transition forKey:nil];
}

#pragma mark - 变化2
-(void)change2{
    CATransition *transition = [CATransition animation];
    [transition setDuration:10.0f];
    transition.type = @"suckEffect";
    transition.subtype = kCATransitionFromTop;
    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
    [self.view.layer addAnimation:transition forKey:nil];
}

@end

　　运行效果如下：

3. NSTimer动画

　　NSTimer是时间定时器，它可以每个一段时间将图像进行更新一次，这样可以使用图片有一种动态效果。以下将主要讲解NSTimer的创建以及使用NSTimer实现的三种动画效果。

3.1 NSTimer的创建

　　如果想要使用NSTimer来实现动画，就要创建一个NSTimer对象，其创建语法形式有两种，如下：

　　(1) NSTimer *对象名 = [NSTimer scheduledTimerWithTimeInterval(NSTimeInterval) //用来指定两次触发所间隔的秒数

　　　　　　　　　　　　　　　　　　　　target:(id) //用来指定消息发送的对象

　　　　　　　　　　　　　　　　　　　　selector:(SEL) //用来指定触发器所调用的方法

　　　　　　　　　　　　　　　　　　　　userInfo:(id) //该参数可以设定为nil.当定时器失效时，由用户指定的对象保留和释放该定时器

　　　　　　　　　　　　　　　　　　　　repeats:(BOOL)]; //用来指定释放重复调用自身

　　(2) NSTimer *对象名 = [NSTimer scheduledTimeWithTimeInterval:(NSTimeInterval) //用来指定两次触发所间隔的秒数

　　　　　　　　　　　　　　　　　　　　invocation:(NSInvocation*) //用来指定调用某个对象的消息

　　　　　　　　　　　　　　　　　　　　repeats:(BOOL)]; //用来指定是否重复调用自身

　　一般建议使用第一种时间定时器创建形式。

3.2 平移

　　平移就是指在同一平面内，将一个图形整体按照某个直线方向移动一段距离。以下主要实现的功能是使用NSTimer来实现平移的动画。

　　【示例 - 平移】

3.3 旋转

　　NSTimer除了可以实现平移动画外，还可以实现旋转动画。

　　【示例 - 旋转】

3.4 缩放

　　NSTimer还可以实现缩放动画。

　　【示例 - 缩放】

posted on 2015-02-14 19:32 雾里寻梦阅读(222) 评论(0) 收藏举报

刷新页面返回顶部

雾里寻梦

动画

导航

公告