苹果就提供了自定义转场的API,模态推送present和dismiss、导航控制器push和pop、标签控制器的控制器切换都可以自定义转场。
转场动画流程:
1、设置将要跳转到的视图控制器(presentedViewController)的transitioningDelegate代理(在intit方法中设置代理)
2、实现Presented和Dismissed代理方法,代理方法需要返回一个遵守<UIViewControllerAnimatedTransitioning>协议的转场动画管理器,我们称为animator。
3、animator是整个动画的核心逻辑,自定义动画,实现转场动画效果。
一、转场动画代理
实现转场动画UIViewControllerTransitioningDelegate协议方法。创建Animator动画管理器,指定页面present和dismiss时的Animator。
控制器被弹出(有动画效果时调用,关闭动画效果时不调用)时代理方法:
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
也就是在[self presentViewController:vc animated:true completion:nil]执行时调用;
控制器消失时(有动画效果时调用,关闭动画效果时不调用)(dismissViewControllerAnimated:completion:)时调用代理方法:
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed;
这两个代理方法都返回了Animator(自定义转场动画),也就是设置了转场动画的实现的Animator。
二、AnimatedTransitioning
Animator动画管理器
它是实现了UIViewControllerAnimatedTransitioning协议的对象,用于控制动画的持续时间和动画展示逻辑。它有两个代理方法必须实现,一个设置持续时间的代理,另一个是开始转场动画时执行的操作代理方法。
设置持续时间
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
转场动画并非一来就直接跳转到下一个页面,我们可以设置转场动画的持续时间,在这段时间内Animator可以获取到前一页面和下一个页面中的元素,设置元素动画效果,在持续时间内播放动画。
获取上下文
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
如果转换是交互式的,而不是一个动画的交互转换,那么这种方法只能是一个空操作
方法是在两个视图之间进行转换时调用。它传递了一个包含转换视图元素的上下文transitionContext,这些上下文将在我们的转换中使用。
上下文遵守<UIViewControllerContextTransitioning>协议,其中包含:
viewControllerForKey: 获取转场动画指定控制器(UITransitionContextToViewControllerKey,UITransitionContextFromViewControllerKey)
containerView 转场动画容器,后面会具体介绍
initialFrameForViewController: and finalFrameForViewController 给我们每个视图控制器视图的开始和结束位置
present与dismiss判断
通常我们会创建一个animator对象实现present和dismiss的动画效果,或者分别提供各自对应的animator,如果两者动画效果类似,您可以共用同一个animator,唯一的区别在于:
present时,要把toView加入到container的视图层级。
dismiss时,要把fromView从container的视图层级中移除。
为了使一个Animator实现多种动画效果,我们可以给自定义的Animator设置类型。根据不同的类型组合实现不同的转场动画
typedef NS_ENUM(NSUInteger, HyPresentOneTransitionType) {
HyPresentOneTransitionTypePresent = 0,//管理present动画
HyPresentOneTransitionTypeDismiss//管理dismiss动画
};
typedef NS_ENUM(NSUInteger, HyTransitionStyleType) {
HyTransitionStyleTypeVideoDetails = 0,
HyTransitionStyleTypeAuthorVideoSet ,
HyTransitionStyleTypePlayVideo
};
containerView动画容器
获取到足够的信息后,最后就是执行动画,接下来就是对对present过程更加彻底的自定义,比如修改被展示视图的大小,新增自定义视图等
如果要对视图做转场动画,视图就必须要加入containerView中才能进行,可以理解containerView管理着所有做转场动画的视图。所有转场动画的效果都在该视图上展现的。
UIView *containerView = [transitionContext containerView];
//实现present动画逻辑代码
- (void)presentAnimation:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
//截屏作为背景图片
UIImage *image = [fromVC.view screenShot];
//背景图片View
UIImageView *snapView = [[UIImageView alloc] initWithImage:image];
snapView.alpha = 1.0f;
snapView.frame = fromVC.view.frame;
//因为对截图做动画,vc1就可以隐藏了
toVC.view.alpha = 0;
fromVC.view.hidden = true;
//这里有个重要的概念containerView,如果要对视图做转场动画,视图就必须要加入containerView中才能进行,可以理解containerView管理着所有做转场动画的视图
UIView *containerView = [transitionContext containerView];
//将截图视图和vc2的view都加入ContainerView中
[containerView addSubview:snapView];
[containerView addSubview:toVC.view];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:_startFrame];
imageView.image = _resources;
imageView.contentMode = UIViewContentModeScaleAspectFill;
UIImage *blur = [_resources applyExtraLightEffect];//[_resources blurredImageWithRadius:100 iterations:2.0f tintColor:[UIColor clearColor]];
VideoDetailsView *detailsView = [[VideoDetailsView alloc] initWithFrame:_startFrame];
detailsView.imageView.image = blur;
[snapView addSubview:detailsView];
[snapView addSubview:imageView];
[UIView animateWithDuration:0.3 delay:0.0 options:0 animations:^{
imageView.frame = CGRectMake(0, 0, toVC.view.width, (toVC.view.height/2)+40);
detailsView.frame = CGRectMake(0, CGRectGetMaxY(imageView.frame), toVC.view.width, toVC.view.height - imageView.height);
} completion:nil];
[UIView animateWithDuration:0.2 delay:0.3 options:0 animations:^{
toVC.view.alpha = 1;
} completion:^(BOOL finished) {
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
[snapView removeFromSuperview];
}];
}
//实现dismiss动画逻辑代码
- (void)dismissAnimation:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *containerView = [transitionContext containerView];
toVC.view.hidden = false;
fromVC.view.hidden = true;
//参照present动画的逻辑,present成功后,containerView的最后一个子视图就是截图视图,我们将其取出准备动画
UIImage *image = [toVC.view screenShot];
UIImageView *snapView = [[UIImageView alloc] initWithImage:image];
snapView.frame = fromVC.view.frame;
[containerView addSubview:fromVC.view];
[containerView addSubview:snapView];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, toVC.view.width, (toVC.view.height/2)+40)];
imageView.image = _resources;
imageView.contentMode = UIViewContentModeScaleAspectFill;
//MoreInfoView *blurImage = [[MoreInfoView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(imageView.frame), toVC.view.width, toVC.view.height - imageView.height)];
//blurImage.isBlur = YES;
UIImage *blur = [_resources applyExtraLightEffect];//[_resources blurredImageWithRadius:80 iterations:1.5f tintColor:[UIColor clearColor]];
//blurImage.imageView.image = blur;
VideoDetailsView *detailsView = [[VideoDetailsView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(imageView.frame), toVC.view.width, toVC.view.height - imageView.height)];
detailsView.imageView.image = blur;
//[blurImage addSubview:detailsView];
[snapView addSubview:detailsView];
[snapView addSubview:imageView];
//动画吧
[UIView animateWithDuration:0.3f animations:^{
imageView.frame = _startFrame;
//blurImage.frame = _startFrame;
detailsView.frame = _startFrame;
}];
[UIView animateWithDuration:0.2 delay:0.3 options:0 animations:^{
snapView.alpha = 0;
} completion:^(BOOL finished) {
if ([transitionContext transitionWasCancelled]) {
//失败了标记失败
[transitionContext completeTransition:NO];
}else{
//如果成功了,我们需要标记成功,同时让vc1显示出来,然后移除截图视图,
[transitionContext completeTransition:YES];
fromVC.view.hidden = false;
toVC.view.hidden = NO;
[snapView removeFromSuperview];
}
}];
}