ios 关键帧动画简单使用，实现view卡片切换

首先要添加依赖，，在实现动画的控制器下引入#import <QuartzCore/QuartzCore.h>

该动画主要用到一个类， CAKeyframeAnimation
关键帧动画的核心就是将整个动画的拆分成若干个小的动画，在将这些动画拼接成一个完整的动画，这种拆分可以通过该类的一个属性keytimes实现，设置不同的时间段呈现不同的动画。例如：

  CAKeyframeAnimation *posiAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

                posiAnimation.duration=1;

                posiAnimation.keyTimes=@[@0.0,@0.5,@1.0];

               // posiAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

                posiAnimation.fillMode=kCAFillModeForwards;

                posiAnimation.removedOnCompletion=NO;

                posiAnimation.values=@[positionValue1,positionValue2,positionValue1];

                [_firstCardView.layer addAnimation:posiAnimation forKey:@"animatePosition"];

duration是整个动画持续时间，单位是秒。这里keytimes有三个关键帧，分别是1s*0.0，1s*0.5，1s*1.0，处。每处对应的值为

positionValue1，positionValue2，positionValue1

以下是这两个值的定义

NSValue *positionValue1=[NSValue valueWithCGPoint:CGPointMake(firstCardView1.center.x, firstCardView1.center.y)];
NSValue *positionValue2=[NSValue valueWithCGPoint:CGPointMake(firstCardView1.center.x, firstCardView1.center.y-50)];

firstcardview1是我定义的视图，animationWithPath的参数是NSString类型的枚举，比较多，就简单举两个，transform.scale是长宽的形变，values的值是NSNumeber，transform.scale.x是x的形变，.y同理。opacity是透明度变化，values也是NSNumber，0为全透明，1为不透明。position为位置坐标，修改的是视图的中心点坐标。

再配合UITouch和NStimer就可以实现这个动画。代码如下：

@interface card2ViewController ()
@property(nonatomic,strong)UIView *firstCardView;
@property(nonatomic,strong)UIView *tapView;
@property(nonatomic)int lableFlag;
@property(nonatomic)int downflag;
@property(nonatomic)int upflag;
@property(nonatomic)int timeflag;
@property(nonatomic)CGPoint startPoint;
@end

@implementation card2ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _lableFlag=0;
    NSLog(@"card2View");
    _firstCardView=[[UIView alloc]initWithFrame:CGRectMake(MAINWINDOWWIDTH/10, MAINWINDOWHEIGHT/5, MAINWINDOWWIDTH*0.8, MAINWINDOWHEIGHT*0.6)];
    _tapView=[[UIView alloc]initWithFrame:CGRectMake(MAINWINDOWWIDTH/10, MAINWINDOWHEIGHT/5, MAINWINDOWWIDTH*0.8, MAINWINDOWHEIGHT*0.6)];
    _tapView.backgroundColor=[UIColor clearColor];
    _firstCardView.backgroundColor=[UIColor grayColor];
    [self.view addSubview:_firstCardView];
    [self.view addSubview:_tapView];
    _downflag=0;
    _upflag=0;
    _timeflag=1;
    // Do any additional setup after loading the view.
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch=[touches anyObject];
    _startPoint=[touch previousLocationInView:_tapView];
}
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    if(_timeflag==0)
    {
        
    }
    else{
        
    
    UITouch *touch=[touches anyObject];
    CGPoint stopPoint=[touch locationInView:_tapView];
    if([touch view]==self.view)
    {
        
        stopPoint=[touch locationInView:self.view];
        _startPoint.x+=_firstCardView.frame.origin.x;
        _startPoint.y+=_firstCardView.frame.origin.y;
    }
    if(stopPoint.y-_startPoint.y>3)
    {
        NSLog(@"cardmove");
        if(_upflag==0)
        {
            
            
            if(_downflag==0)
            {
                
                _downflag=1;
                [_firstCardView removeFromSuperview];
                UIView *firstCardView1=[[UIView alloc]initWithFrame:CGRectMake(MAINWINDOWWIDTH/10, MAINWINDOWHEIGHT/5, MAINWINDOWWIDTH*0.8, MAINWINDOWHEIGHT*0.6)];
                
                firstCardView1.backgroundColor=[UIColor grayColor];
                [self.view addSubview:firstCardView1];
                _firstCardView=firstCardView1;
                NSValue *positionValue1=[NSValue valueWithCGPoint:CGPointMake(firstCardView1.center.x, firstCardView1.center.y)];
                NSValue *positionValue2=[NSValue valueWithCGPoint:CGPointMake(firstCardView1.center.x, firstCardView1.center.y-50)];
                CAKeyframeAnimation *posiAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
                CAKeyframeAnimation *tranAnimation=[CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
                posiAnimation.duration=1;
                posiAnimation.keyTimes=@[@0.0,@0.5,@1.0];
               // posiAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
                posiAnimation.fillMode=kCAFillModeForwards;
                posiAnimation.removedOnCompletion=NO;
                posiAnimation.values=@[positionValue1,positionValue2,positionValue1];
                [_firstCardView.layer addAnimation:posiAnimation forKey:@"animatePosition"];
                tranAnimation.duration=1;
               // CGAffineTransform transform=_firstCardView.transform;
                NSValue *transformValue1=[NSValue valueWithCGSize:CGSizeMake(0.6,0.6)];
                NSValue *transformValue2=[NSValue valueWithCGSize:CGSizeMake(0.9,0.9)];
                NSValue *transformValue3=[NSValue valueWithCGSize:CGSizeMake(1,1)];
                tranAnimation.values=@[transformValue1,transformValue2,transformValue3];
                tranAnimation.keyTimes=@[@0.0,@0.5,@1.0];
               // tranAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
                [_firstCardView.layer addAnimation:tranAnimation forKey:nil];
                }
            else if(_downflag==1)
            {
                _timeflag=0;
                _downflag=0;
                UIView *firstCardView1=[[UIView alloc]initWithFrame:CGRectMake(MAINWINDOWWIDTH/10, MAINWINDOWHEIGHT/5, MAINWINDOWWIDTH*0.8, MAINWINDOWHEIGHT*0.6)];
                
                firstCardView1.backgroundColor=[UIColor redColor];
                [self.view addSubview:firstCardView1];
                CAKeyframeAnimation *opacityAnimate=[CAKeyframeAnimation animationWithKeyPath:@"opacity"];
                opacityAnimate.keyTimes=@[@0.0,@1.0];
                opacityAnimate.duration=1;
                opacityAnimate.values=@[@0.0,@1.0];
                [firstCardView1.layer addAnimation:opacityAnimate forKey:nil];
                CAKeyframeAnimation *posiAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
                posiAnimation.duration=1.5;
                posiAnimation.keyTimes=@[@0.0,@1.0];
                NSValue *positionValue1=[NSValue valueWithCGPoint:CGPointMake(firstCardView1.center.x, firstCardView1.center.y)];
                NSValue *positionValue2=[NSValue valueWithCGPoint:CGPointMake(firstCardView1.center.x, firstCardView1.center.y+30)];
                posiAnimation.values=@[positionValue1,positionValue2];
                [_firstCardView.layer addAnimation:posiAnimation forKey:nil];
                CAKeyframeAnimation *tranAnimation=[CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
                tranAnimation.duration=1.5;
                tranAnimation.keyTimes=@[@0.0,@1.0];
                tranAnimation.values=@[@1.0,@0.6];
                [_firstCardView.layer addAnimation:tranAnimation forKey:nil];
                NSTimer *time=[[NSTimer alloc]init];
                time=[NSTimer scheduledTimerWithTimeInterval:1.5 repeats:NO block:^(NSTimer * _Nonnull timer) {
                    [_firstCardView removeFromSuperview];
                    _firstCardView=firstCardView1;
                    _timeflag=1;
                }];
                
                
            }
            
        }
        else if(_upflag==1)
        {
            UIView *firstCardView1=[[UIView alloc]initWithFrame:CGRectMake(MAINWINDOWWIDTH/10, MAINWINDOWHEIGHT/5, MAINWINDOWWIDTH*0.8, MAINWINDOWHEIGHT*0.6)];
            
            firstCardView1.backgroundColor=[UIColor grayColor];
            _upflag=0;
            _timeflag=0;
            CAKeyframeAnimation *positionAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
            positionAnimation.duration=0.7;
            positionAnimation.keyTimes=@[@0.0,@1.0];
            NSValue *posiValue1=[NSValue valueWithCGPoint:CGPointMake(_firstCardView.center.x, _firstCardView.center.y)];
            NSValue *posiValue2=[NSValue valueWithCGPoint:CGPointMake(firstCardView1.center.x, firstCardView1.center.y)];
            positionAnimation.values=@[posiValue1,posiValue2];
            [_firstCardView.layer addAnimation:positionAnimation forKey:nil];
            CAKeyframeAnimation *transformYAnimation=[CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
            transformYAnimation.duration=0.2;
            transformYAnimation.keyTimes=@[@0.0,@1.0];
            
            transformYAnimation.values=@[@1,@0.75];
            [_firstCardView.layer addAnimation:transformYAnimation forKey:nil];
            NSTimer *time=[[NSTimer alloc]init];
            time=[NSTimer scheduledTimerWithTimeInterval:0.2 repeats:NO block:^(NSTimer * _Nonnull timer) {
                [_firstCardView setFrame:CGRectMake(0, MAINWINDOWHEIGHT*0.875, MAINWINDOWWIDTH, MAINWINDOWHEIGHT*0.75)];
                CAKeyframeAnimation *transformAnimation=[CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
                transformAnimation.duration=0.5;
                transformAnimation.keyTimes=@[@0.0,@1.0];
                transformAnimation.values=@[@1.0,@0.8];
                [_firstCardView.layer addAnimation:transformAnimation forKey:nil];
            }];

            
            time=[NSTimer scheduledTimerWithTimeInterval:0.7 repeats:NO block:^(NSTimer * _Nonnull timer) {
                [self.view addSubview:firstCardView1];
                [_firstCardView removeFromSuperview];
                _firstCardView=firstCardView1;
                _timeflag=1;
            }];
        }
    }
        else if(stopPoint.y-_startPoint.y<=-3)
        {
            _timeflag=0;
            _upflag=1;
            CAKeyframeAnimation *positionAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
            positionAnimation.duration=0.7;
            positionAnimation.keyTimes=@[@0.0,@1.0];
            NSValue *posiValue1=[NSValue valueWithCGPoint:CGPointMake(_firstCardView.center.x, _firstCardView.center.y)];
            NSValue *posiValue2=[NSValue valueWithCGPoint:CGPointMake(self.view.center.x, self.view.center.y)];
            positionAnimation.values=@[posiValue1,posiValue2];
            [_firstCardView.layer addAnimation:positionAnimation forKey:nil];
            CAKeyframeAnimation *transformAnimation=[CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
            transformAnimation.duration=0.5;
            transformAnimation.keyTimes=@[@0.0,@1.0];
           
            transformAnimation.values=@[@1,@(1/0.8)];
            [_firstCardView.layer addAnimation:transformAnimation forKey:nil];
           
            UIView *firstCardView1=[[UIView alloc]initWithFrame:CGRectMake(0,0, MAINWINDOWWIDTH, MAINWINDOWHEIGHT)];
            
            firstCardView1.backgroundColor=[UIColor redColor];
            NSTimer *time=[[NSTimer alloc]init];
            time=[NSTimer scheduledTimerWithTimeInterval:0.5 repeats:NO block:^(NSTimer * _Nonnull timer) {
                 [_firstCardView setFrame:CGRectMake(0, _firstCardView.frame.origin.y/0.8, MAINWINDOWWIDTH, MAINWINDOWHEIGHT*0.75)];
                CAKeyframeAnimation *transformYAnimation=[CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
                transformYAnimation.duration=0.2;
                transformYAnimation.keyTimes=@[@0.0,@1.0];
                
                transformYAnimation.values=@[@1,@(1/0.75)];
                [_firstCardView.layer addAnimation:transformYAnimation forKey:nil];
                
            }];
            time=[NSTimer scheduledTimerWithTimeInterval:0.7 repeats:NO block:^(NSTimer * _Nonnull timer) {
                [_firstCardView setFrame:CGRectMake(0,0, MAINWINDOWWIDTH, MAINWINDOWHEIGHT)];
            }];
            time=[NSTimer scheduledTimerWithTimeInterval:0.9 repeats:NO block:^(NSTimer * _Nonnull timer) {
                [self.view addSubview:firstCardView1];
                [_firstCardView removeFromSuperview];
                
                _firstCardView=firstCardView1;
                _timeflag=1;
            }];
            
        }
    }
}