iOS - UI： 动画汇总二（学习日记）

一、转动动画（CATransition）

1、实现一个动画的过渡，效果类似于走马灯。

构建思路：

     1>采用隐式动画，把动画添加在两个按钮中实现

     2>搭建界面，在界面上拖入一个UIImageView，用于显示图片，拖入2个按钮，用于进行图片的转换

     3>创建动画，添加图片

     4>将动画添加到imgview的CALayer中

2、代码部分

#import <UIKit/UIKit.h>

@interface ViewController :UIViewController

@property (weak,nonatomic) IBOutletUIImageView *imgShow;

@property (weak,nonatomic) IBOutletUIButton *btnLastPage;

@property (weak,nonatomic) IBOutletUIButton *btnNextPage;

@property (nonatomic,assign)int index;

@end

@implementation ViewController

- (void)viewDidLoad {

    [superviewDidLoad];

    self.index =1;

}

- (IBAction)goForwardAction:(id)sender {

    self.index--;

    if (self.index<1) {

        self.index =7;

    }

    self.imgShow.image = [UIImageimageNamed:[NSStringstringWithFormat:@"weimei_00%i.jpg",self.index]];

    //创建核心动画

    CATransition *transtion = [CATransitionanimation];

   //告诉要执行什么动画

    //设置过度效果

    transtion.type =@"cube";

   //设置动画的过渡方向（向左）

    transtion.subtype =kCATransitionFromLeft;

   //设置动画的时间

    transtion.duration =2.0;

    //添加动画

    [self.imgShow.layeraddAnimation:transtion forKey:nil];

}

- (IBAction)goNextAction:(id)sender {

    self.index++;

    if (self.index>7) {

        self.index =1;

    }

    self.imgShow.image = [UIImageimageNamed:[NSStringstringWithFormat:@"weimei_00%i.jpg",self.index]];

    //1.创建核心动画

    CATransition *transtion = [CATransitionanimation];

    //1.1告诉要执行什么动画

    //1.2设置过度效果

    transtion.type =@"cube";

   //1.3设置动画的过渡方向（向右）

    transtion.subtype =kCATransitionFromRight;

    //1.4设置动画的时间

    transtion.duration =2.0;

    //1.5设置动画的起点

    transtion.startProgress =0.5;

    //1.6设置动画的终点

    //transtion.endProgress = 0.2;

        //2.添加动画

    [self.imgShow.layeraddAnimation:transtion forKey:nil];

    

}

3、实现效果

图1程序运行                                                   图2动画执行

        

二、组动画（CAAnimationGroup）

1、构建思路：

    （1）定义你相要的动画（如平移、缩放、旋转等），加在一个数组中

    （2）创建组动画对象，依次取出动画

    （3）将组动画添加在UIImageView的CALayer上

2、代码部分：

@interfaceViewController ()

{

    UIImageView *imgView;

}

@end

@implementation ViewController

- (void)viewDidLoad {

    [superviewDidLoad];

    imgView = [[UIImageViewalloc]initWithFrame:CGRectMake(20,100 , 280, 200)];

    imgView.image = [UIImageimageNamed:@"weimei_001.jpg"];

    [self.viewaddSubview:imgView];

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

    // 平移动画

    CABasicAnimation *anima1 = [CABasicAnimationanimation];

    anima1.keyPath =@"transform.translationn.y";

    anima1.toValue =@(100);

    

    //缩放动画

    CABasicAnimation *anima2 = [CABasicAnimationanimation];

    anima2.keyPath =@"transform.scale";

    anima2.toValue =@(0.5);

    

    //旋转动画

    CABasicAnimation *anima3 = [CABasicAnimationanimation];

    anima3.keyPath =@"transform.rotation";

    anima3.toValue =@(M_PI_4);

    

    //组动画

    CAAnimationGroup *groupAnima = [CAAnimationGroupanimation];

    groupAnima.animations =@[anima1,anima2,anima3];

    

   //设置组动画的时间

    groupAnima.duration =2;

    groupAnima.fillMode =kCAFillModeForwards;

    groupAnima.removedOnCompletion =NO;

    

    [imgView.layeraddAnimation:groupAnima forKey:nil];

}

- (void)didReceiveMemoryWarning {

    [superdidReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

3、实现效果

图一执行动画前                                                                            图二执行动画后

           

三、UIView动画

1、使用UIView类实现动画（步骤）

   （1）动画的开始

[UIViewbeginAnimations:nilcontext:nil];//开始动画 

   （2）动画的代码

//code

   （3）动画的结束

[UIViewcommitAnimations];//提交动画 

2、设置动画的相对速度

（1）语法

        +(void)setAnimationCurve:(UIViewAnimationCurve)curve;

（2）curve：用来指定动画曲线

        系统中默认的动画曲线有：

                                                   1>UIViewAnimationCurveEaseInOut     动画开始缓慢，中间加速，最后缓慢

                                                   2>UIViewAnimationCurveEaseIn           动画开始缓慢，慢慢加快

                                                   3>UIViewAnimationCurveEaseOut        动画开始很快，慢慢减慢

                                                   4>UIViewAnimationCurveLinear            动画一直匀速

3、UIView动画的属性

 （1）setAnimationDuration：                    设置动画的持续时间

 （2）setAnimationCurve：                        设置动画的动画曲线

 （3）setAnimationDelay：                        设置动画的延迟执行时间

 （4）setAnimationRepeatCount：            设置动画的执行次数

 （5）setAnimationRepeatAutoreverses：设置动画的效果，如果是YES，逆向动画效果，结束后自动执行逆向的动画效果，默认为NO

 （6）setAnimationDelegate：                   设置动画的代理

 （7）setAnimationDidStopSelector：       设置动画借束后执行的方法（前提是要设置动画的代理）

4、设置过渡动画

（1）语法

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

（2）方法中的属性

   1>transition:指定动画懂得过度效果

   2>view：指定过渡的视图

   3>cache：指定是否马上缓存视图内容

注：如果不需要在视图转变中不停的更新,只需要等到转换完成再去更新试图,那这个时候用YES;反之,如果需要在视图转变中⽴刻更新,这时则需要在转换过程中去更新视图,那这个时候就用NO。 

（3）过渡动画类型

1>UIViewAnimationTransitionNone                   无过渡动画

2>UIViewAnimationTransitionFlipFromLeft       从左向右旋转

3>UIviewAnimationTransitionFlipFromRight     从右向左旋转

4>UIviewAnimationTransitionCurlUp                 卷曲翻页，从上往下

5>UIviewAnimationTransitionCurlDown             卷曲翻页，从下往上

5、小练习：抽奖

1>其实就是达芬奇密码的其中一下快的实现

2>代码部分

#import <UIKit/UIKit.h>

@interface ViewController :UIViewController

- (IBAction)startAction:(id)sender;

@property (weak,nonatomic) IBOutletUIView *viewChoujiang;

@property (weak,nonatomic) IBOutletUILabel *lbquestion;

@end

#import "ViewController.h"

@interfaceViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

    [superviewDidLoad];

    

}

- (void)didReceiveMemoryWarning {

    [superdidReceiveMemoryWarning];

    

}

//"开始按钮"按钮点击事件

- (IBAction)startAction:(id)sender {

    //开始动画

    [UIViewbeginAnimations:nilcontext:nil];

   //设置动画持续的时间

    [UIViewsetAnimationDuration:1];

   //设置动画的相对速度为匀速

    [UIViewsetAnimationCurve:UIViewAnimationCurveLinear];

    //实现_viewChoujiang从右向左旋转

    [UIViewsetAnimationTransition:UIViewAnimationTransitionFlipFromRightforView:_viewChoujiangcache:YES];

    //更换_viewChoujiang中子view的位置（将下标为0与下标为1的切换位置）

    [_viewChoujiangexchangeSubviewAtIndex:0withSubviewAtIndex:1];

    //_lbquestion.hidden = YES;

    //提交动画

    [UIViewcommitAnimations];

}

@end

2>实现效果

图1动画执行前                                                      图2动画执行中                                          图3动画执行后

              

6、ios7后，增加了弹簧效果

usingSpringWithDamping:它的范围为0.0-1.0,数值越小,”弹簧”的振动效果越明显

initialSpringVelocity:初始速度,数值越⼤一开始移动越快,“弹簧”的振动幅度也越大