码迷,mamicode.com
首页 > 其他好文 > 详细

转场动画 CATransition ,效果惊人

时间:2015-10-23 18:12:21      阅读:483      评论:0      收藏:0      [点我收藏+]

标签:

 关于苹果的动画支持类,可叹其强大,性能以及 动画效果惊人。膜拜啊!

 

  转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤:

1.创建转场动

2.设置转场类型、子类型(可选)及其他属性

3.设置转场后的新视图并添加动画到图层
下表列出了常用的转场类型(注意私有API是苹果官方没有公开的动画类型,但是目前通过仍然可以使用):

 

 

动画类型说明对应常量是否支持方向设置
公开API   
fade淡出效果kCATransitionFade
movein新视图移动到旧视图上kCATransitionMoveIn
push新视图推出旧视图kCATransitionPush
reveal移开旧视图显示新视图kCATransitionReveal
私有API 私有API只能通过字符串访问 
cube立方体翻转效果
oglFlip翻转效果
suckEffect收缩效果
rippleEffect水滴波纹效果
pageCurl向上翻页效果
pageUnCurl向下翻页效果
cameralIrisHollowOpen摄像头打开效果
cameraIrisHollowClose摄像头关闭效果

另外对于支持方向设置的动画类型还包含子类型:

动画子类型说明
kCATransitionFromRight从右侧转场
kCATransitionFromLeft从左侧转场
kCATransitionFromTop从顶部转场
kCATransitionFromBottom从底部转场

 

  //添加手势

    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];
    
    UISwipeGestureRecognizer *topSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(topSwipe:)];
    topSwipeGesture.direction=UISwipeGestureRecognizerDirectionUp;
    [self.view addGestureRecognizer:topSwipeGesture];
    
    
    UISwipeGestureRecognizer *bottomSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(bottomSwipe:)];
    bottomSwipeGesture.direction=UISwipeGestureRecognizerDirectionDown;
    [self.view addGestureRecognizer:bottomSwipeGesture];

 #pragma mark 向左滑动浏览下一张图片

-(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:1];
}

#pragma mark 向右滑动浏览上一张图片
-(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:2];
}

-(void)topSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:3];
}

-(void)bottomSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:4];
}



#pragma mark 转场动画
-(void)transitionAnimation:(NSInteger)direction{
    //1.创建转场动画对象
    CATransition *transition=[[CATransition alloc]init];
    
    //2.设置动画类型,注意对于苹果官方没公开的动画类型只能使用字符串,并没有对应的常量定义
    transition.type=@"rippleEffect";
    
    BOOL bl = YES;
    
    //设置子类型
    if (direction == 1) {
        transition.subtype=kCATransitionFromRight;
        bl = YES;
    }else if (direction == 2) {
        transition.subtype=kCATransitionFromLeft;
        bl = NO;
    }else if (direction == 3) {
        transition.subtype=kCATransitionFromTop;
        bl = YES;
    }else{
         transition.subtype=kCATransitionFromBottom;
        bl = NO;
    }
    
    //设置动画时常
    transition.duration=1.0f;
    
    //3.设置转场后的新视图添加转场动画
    if (bl) {
        currentIndex=(currentIndex+1)%IMAGE_COUNT;
    }else{
        currentIndex=(currentIndex-1+IMAGE_COUNT)%IMAGE_COUNT;
    }
    NSString *imageName=[NSString stringWithFormat:@"%d",(int)currentIndex];
   
    _imageView.image = [UIImage imageNamed:imageName];
    [_imageView.layer addAnimation:transition forKey:@"KCTransitionAnimation1"];
}

 或者用UIView动画来实现转场:

#pragma mark 转场动画
-(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];

} 

 

 老规矩,效果图如下:技术分享技术分享

 

转场动画 CATransition ,效果惊人

标签:

原文地址:http://www.cnblogs.com/qiugaoying/p/4904853.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!