快捷導(dǎo)航

iOS基于CATransition實現(xiàn)翻頁、旋轉(zhuǎn)等動畫效果

更新時間：2019年04月28日 09:50:54 作者：hero_wqb

這篇文章主要為大家詳細介紹了iOS基于CATransition實現(xiàn)翻頁、旋轉(zhuǎn)等動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

基于CATransition實現(xiàn)翻頁、旋轉(zhuǎn)、淡化、推進、滑入滑出、立方體、吮吸、波紋等動畫效果。

首先看一下效果圖：

下面貼上代碼:

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController
 
@end
 
#import "ViewController.h"
 
//獲得屏幕的寬高
#define mainW [UIScreen mainScreen].bounds.size.width
#define mainH [UIScreen mainScreen].bounds.size.height
 
@interface ViewController ()
 
@property (nonatomic, strong) NSArray *typeArray;
 
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
 [super viewDidLoad];
 
 self.view.backgroundColor = [UIColor greenColor];
 
 //創(chuàng)建控件
 [self creatControl];
 
 _typeArray = @[kCATransitionFade, kCATransitionPush, kCATransitionMoveIn, kCATransitionReveal, @"cube", @"suckEffect", @"oglFlip", @"rippleEffect", @"pageCurl", @"pageUnCurl", @"cameraIrisHollowOpen", @"cameraIrisHollowClose"];
}
 
- (void)creatControl
{
 NSArray *titleArray = @[@"淡化效果", @"推進效果", @"滑入效果", @"滑出效果", @"立方體效果", @"吮吸效果", @"翻轉(zhuǎn)效果", @"波紋效果", @"翻頁效果", @"反翻頁效果", @"開鏡頭效果", @"關(guān)鏡頭效果"];
 
 for (int i = 0; i < titleArray.count; i++) {
  CGFloat X = i % 2 == 0 ? mainW * 0.1 : mainW * 0.6;
  CGFloat Y = 64 + i / 2 * mainW * 0.15;
  UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(X, Y, mainW * 0.3, mainW * 0.1)];
  btn.tag = i;
  [btn setBackgroundColor:[UIColor colorWithRed:0.6f green:0.7f blue:0.6f alpha:0.7f]];
  [btn setTitle:titleArray[i] forState:UIControlStateNormal];
  [btn addTarget:self action:@selector(btnOnClick:) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:btn];
 }
}
 
- (void)btnOnClick:(UIButton *)btn
{
 static int i = 0;
 
 i = i == 0 ? 1 : 0;
 self.view.backgroundColor = i == 0 ? [UIColor greenColor] : [UIColor yellowColor];
 
 //創(chuàng)建CATransition對象
 CATransition *animation = [CATransition animation];
 
 //設(shè)置時間
 animation.duration = 1.0f;
 
 //設(shè)置類型
 animation.type = _typeArray[btn.tag];
 
 //設(shè)置方向
 animation.subtype = kCATransitionFromRight;
 
 //設(shè)置運動速度變化
 animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;
 
 [self.view.layer addAnimation:animation forKey:@"animation"];
}
 
@end

CATransition.type動畫類型：

kCATransitionFade   //淡化效果
kCATransitionPush   //推進效果
kCATransitionMoveIn  //滑入效果
kCATransitionReveal  //滑出效果
@"cube"        //立方體效果
@"suckEffect"      //吮吸效果
@"oglFlip"        //翻轉(zhuǎn)效果
@"rippleEffect"      //波紋效果
@"pageCurl"       //翻頁效果
@"pageUnCurl"      //反翻頁效果
@"cameraIrisHollowOpen"  //開鏡頭效果
@"cameraIrisHollowClose"  //關(guān)鏡頭效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: