一、簡(jiǎn)介
CATransition是CAAnimation的子類,用于做轉(zhuǎn)場(chǎng)動(dòng)畫
能夠?yàn)閳D層提供移出屏幕和移入屏幕的動(dòng)畫效果。iOS比Mac OS X的轉(zhuǎn)場(chǎng)動(dòng)畫效果少一點(diǎn)
如:UINavigationController導(dǎo)航控制器就是通過CATransition轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn)了將控制器的視圖推入屏幕的動(dòng)畫效果
CATransition頭文件
動(dòng)畫屬性:
type:動(dòng)畫過渡類型
subtype:動(dòng)畫過渡方向
startProgress:動(dòng)畫起點(diǎn)(在整體動(dòng)畫的百分比)
endProgress:動(dòng)畫終點(diǎn)(在整體動(dòng)畫的百分比)
......
二、view類自帶轉(zhuǎn)場(chǎng)動(dòng)畫函數(shù)
1、單視圖
+(void)transitionWithView:(UIView*)view duration:(NSTimeInterval)duration options:
(UIViewAnimationOptions)options
animations:(void(^)(void))animations
completion:(void(^)(BOOLfinished))completion;
參數(shù)說明:
duration:動(dòng)畫的持續(xù)時(shí)間
view:需要進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)畫的視圖
options:轉(zhuǎn)場(chǎng)動(dòng)畫的類型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block
2、雙視圖
+ (void)transitionFromView:(UIView*) fromView
toView:(UIView*) toViewduration:(NSTimeInterval)durationoptions:(UIViewAnimationOptions) options
completion:(void(^)(BOOLfinished))completion;
參數(shù)說明:
duration:動(dòng)畫的持續(xù)時(shí)間
options:轉(zhuǎn)場(chǎng)動(dòng)畫的類型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block
三、應(yīng)用
注意:
轉(zhuǎn)場(chǎng)動(dòng)畫使用注意點(diǎn):轉(zhuǎn)場(chǎng)代碼必須和轉(zhuǎn)場(chǎng)動(dòng)畫代碼寫在一起,否則無效
1、圖片瀏覽
實(shí)例:
代碼實(shí)現(xiàn)
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageV;
@end
@implementation ViewController
// 注意: 轉(zhuǎn)場(chǎng)動(dòng)畫使用注意點(diǎn):轉(zhuǎn)場(chǎng)代碼必須和轉(zhuǎn)場(chǎng)動(dòng)畫代碼寫在一起,否則無效
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 實(shí)現(xiàn):圖片瀏覽
/** 轉(zhuǎn)場(chǎng)代碼 */
static int index = 2;
NSString *imageName = [NSString stringWithFormat:@"%d",index];
_imageV.image = [UIImage imageNamed:imageName];
index++;
if (index == 4) {
index = 1;
}
/** 轉(zhuǎn)場(chǎng)動(dòng)畫代碼 */
// 創(chuàng)建轉(zhuǎn)場(chǎng)動(dòng)畫對(duì)象
CATransition *anim = [CATransition animation];
// 設(shè)置轉(zhuǎn)場(chǎng)類型
anim.type = @"pageCurl";
// 設(shè)置動(dòng)畫的方向
anim.subtype = kCATransitionFromLeft;
anim.duration = 3;
[_imageV.layer addAnimation:anim forKey:nil];
}
@end
代碼實(shí)現(xiàn)
@interface ViewController ()
@property (weak, nonatomic) UIImageView *iconView;
@end
@implementation ViewController
- (void)viewDidLoad{
[super viewDidLoad];
UIImageView *iconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1"]];
[self.view addSubview:iconView];
iconView.center = self.view.center;
iconView.backgroundColor = [UIColor greenColor];
self.iconView = iconView;
// 設(shè)置為圓角圖片
self.iconView.layer.cornerRadius = self.iconView.frame.size.width * 0.5;
self.iconView.clipsToBounds = YES;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// UIView自帶的轉(zhuǎn)場(chǎng)動(dòng)畫
[UIView transitionWithView:self.iconView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{ /** 執(zhí)行左翻轉(zhuǎn)動(dòng)畫,*/
// 從左邊翻轉(zhuǎn) , 之前設(shè)置顯示圖片1,翻轉(zhuǎn)后顯示圖2 -》圖片1 左翻轉(zhuǎn)到最后顯示圖片2
self.iconView.image = [UIImage imageNamed:@"2"];
} completion:^(BOOL finished) {
NSLog(@"completion");
/** 左翻轉(zhuǎn)動(dòng)畫 結(jié)束后, 停 1 秒后,再執(zhí)行 右翻轉(zhuǎn)動(dòng)畫 */
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 停 1 秒后,再執(zhí)行 右翻轉(zhuǎn)動(dòng)畫
[UIView transitionWithView:self.iconView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{ // 然后,從右邊翻轉(zhuǎn),翻轉(zhuǎn)時(shí)顯示圖片1 -》圖片2 右翻轉(zhuǎn)最后顯示圖片1
self.iconView.image = [UIImage imageNamed:@"1"];
} completion:nil];
});
}];
}
@end
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
/**< imageView1 */
@property (nonatomic, strong) UIView *view1;
/**< imageView2 */
@property (nonatomic, strong) UIView *view2;
@end
@implementation ViewController
- (void)viewDidLoad{
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
// 1. scrollView 添加 view2 子控件
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor greenColor];
[self.scrollView addSubview:view2];
self.view2 = view2;
// 2. scrollView 添加 view1 子控件
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[self.scrollView addSubview:view1];
self.view1 = view1;
// 3. frame
CGFloat scrollViewW = self.scrollView.frame.size.width;
CGFloat scrollViewH = self.scrollView.frame.size.height;
view1.frame = CGRectMake(0, 0, scrollViewW, scrollViewH);
view2.frame = CGRectMake(0, 0, scrollViewW, scrollViewH); // CGRectMake(scrollViewW, 0, scrollViewW, scrollViewH);
// 4. scrollView
self.scrollView.contentSize = CGSizeMake(scrollViewW, scrollViewH);
// 添加手勢(shì)
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapClick:)];
[self.scrollView addGestureRecognizer:tap];
}
int i = 1;
// 監(jiān)聽到點(diǎn)擊scrollView,進(jìn)行翻轉(zhuǎn)動(dòng)畫
- (void)tapClick:(UITapGestureRecognizer *)tap{
if (i % 2 != 0) {
[UIView transitionFromView:self.view1 toView:self.view2 duration:1.0 options:UIViewAnimationOptionTransitionFlipFromTop completion:nil];
}else{
[UIView transitionFromView:self.view2 toView:self.view1 duration:1.0 options:UIViewAnimationOptionTransitionFlipFromBottom completion:nil];
}
i++;
}
新聞熱點(diǎn)
疑難解答
圖片精選