iOS动画 —— CATransition

作者: iOS_修心 | 来源:发表于2022-04-28 17:16 被阅读0次

以前对转场的概念有点笼统，对 ViewController 层次的转场和 View 的转场（过渡）老是混淆，区分一下此处先对 View 转场用 CATransition 实现动画，进行一个笔记。

对 CATransition 进行了解，它是CAAnimation的子类，用于做过渡动画或者转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。其中最主要的就是 type 和 subType 这两个属性。

@property(copy) NSString *type;  // 动画的类型
@property(nullable, copy) NSString *subtype;//  动画类型的方向

公共Type（官方的SDK其实只提供了四种过渡效果）

CA_EXTERN NSString * const kCATransitionFade;
CA_EXTERN NSString * const kCATransitionMoveIn;
CA_EXTERN NSString * const kCATransitionPush;
CA_EXTERN NSString * const kCATransitionReveal;

私有的Type （私有API提供了其他很多非常炫的过渡动画），需要自己额外写的

NSString *const kCATransitionCube = @"cube"; 
NSString *const kCATransitionSuckEffect = @"suckEffect"; 
NSString *const kCATransitionOglFlip = @"oglFlip"; 
NSString *const kCATransitionRippleEffect = @"rippleEffect"; 
NSString *const kCATransitionPageCurl = @"pageCurl"; 
NSString *const kCATransitionPageUnCurl = @"pageUnCurl"; 
NSString *const kCATransitionCameraIrisHollowOpen = @"cameraIrisHollowOpen";
NSString *const kCATransitionCameraIrisHollowClose = @"cameraIrisHollowClose";

SubType：动画类型的方向

CA_EXTERN NSString * const kCATransitionFromRight;
CA_EXTERN NSString * const kCATransitionFromLeft;
CA_EXTERN NSString * const kCATransitionFromTop;
CA_EXTERN NSString * const kCATransitionFromBottom;

为了加深印象，对 Type 的类型一一进行尝试, 只是将 type 的方式替换而已。

CATransition *animation = [CATransition animation];
animation.type = kCATransitionPush;//设置动画的类型
animation.subtype = kCATransitionFromRight; //设置动画的方向
animation.duration = 1.0f;
[testView.layer addAnimation:animation forKey:@"pushAnimation"];

样式

转场动效

kCATransitionFade

kCATransitionFade.gif
kCATransitionMoveIn

kCATransitionMoveIn.gif
kCATransitionPush

kCATransitionPush.gif
kCATransitionReveal

kCATransitionReveal.gif

[图片上传中...(kCATransitionSuckEffect.gif-9e0810-1651137269522-0)]
kCATransitionCube

kCATransitionCube.gif
kCATransitionSuckEffect

kCATransitionSuckEffect.gif
kCATransitionOglFlip

kCATransitionOglFlip.gif
kCATransitionRippleEffect

kCATransitionRippleEffect.gif
kCATransitionPageCurl

kCATransitionPageCurl.gif
kCATransitionPageUnCurl

kCATransitionPageUnCurl.gif
kCATransitionCameraIrisHollowOpen

kCATransitionCameraIrisHollowOpen.gif
kCATransitionCameraIrisHollowClose

kCATransitionCameraIrisHollowClose.gif