自定义转场动画
动画效果
不知道哪里不对,做的gif好像比较大,链接github图片链接和直接在简书上传都显示不出来,好像.实在看不到的可以去最底下去我的guthub看gif.
gif01
gif02
gif01
gif02
自定义转场动画
-
iOS7 开始,苹果推出了自定义转场的API.用于两个viewController切换之间自定义动画,使我们的切换的效果不单单局限于系统自定义动画.
-
另外,随着大屏幕的普及,如今的app普遍支持手势滑动返回(一般是左滑),自定义转场动画也支持手势滑动返回.
-
苹果在 UINavigationControllerDelegate 和UIViewControllerTransitioningDelegate 中给出了几个协议方法，通过返回类型就可以很清楚地知道各自的具体作用。我们自定义的转场方法只需要重载以下的方法就行了.使用准则就是：UINavigationController pushViewController 时重载 UINavigationControllerDelegate 的方法；UIViewController presentViewController 时重载 UIViewControllerTransitioningDelegate 的方法。
<pre>
@protocol UIViewControllerAnimatedTransitioning <NSObject>
// This is used for percent driven interactive transitions, as well as for container controllers that have companion animations that might need to
// synchronize with the main animation.
-(NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
// This method can only be a nop if the transition is interactive and not a percentDriven interactive transition.
-(void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
@protocol UIViewControllerTransitioningDelegate <NSObject>
@optional
-(nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;
-(nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed;
-(nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator;
-(nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator;
-(nullable UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source NS_AVAILABLE_IOS(8_0);
</pre> -
具体步骤
-1、创建继承自 NSObject 并且声明 UIViewControllerAnimatedTransitioning 的的动画类。
-2、重载 UIViewControllerAnimatedTransitioning 中的协议方法。
<pre>
//动画时间
-(NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext
{
return 0.7f;
}
</pre>
<pre>
// This method can only be a nop if the transition is interactive and not a percentDriven interactive transition.
-(void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
self.transitionContext = transitionContext;//动画上下文
FirstViewController *fromVC = (FirstViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
SecondViewController *toVC = (SecondViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *contain = transitionContext.containerView;
[contain addSubview:fromVC.view];
[contain addSubview:toVC.view]; //这里必须是添加动画的图层在上面,之前在给pop做动画的时候黏贴,找了好久才发现没动画的原因在这里顺序搞反了,囧UIButton *pushButton = fromVC.button;
UIBezierPath *startpath = [UIBezierPath bezierPathWithOvalInRect:pushButton.frame];CGPoint finalPoint;
//根据终点位置所在象限的不同,计算覆盖的最大半径
if (pushButton.frame.origin.x > toVC.view.bounds.size.width * 0.5 ) {
if (pushButton.frame.origin.y < toVC.view.bounds.size.height * 0.5) { //第一象限
finalPoint = CGPointMake(pushButton.center.x , pushButton.center.y - toVC.view.bounds.size.height);
} else { //第四现象
finalPoint = CGPointMake(pushButton.center.x , pushButton.center.y);
}
} else {
if (pushButton.frame.origin.y < toVC.view.bounds.size.height * 0.5) { //第二象限
finalPoint = CGPointMake(pushButton.center.x - toVC.view.bounds.size.width , pushButton.center.y - toVC.view.bounds.size.height);
} else { //第三现象
finalPoint = CGPointMake(pushButton.center.x - toVC.view.bounds.size.width, pushButton.center.y);
}
}CGFloat radius = sqrt(finalPoint.x * finalPoint.x + finalPoint.y * finalPoint.y); //遮罩的最大半径
UIBezierPath *endPath = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(pushButton.frame, -radius, -radius)]; //-radius表示增大,+radius表示缩小
//创建一个 CAShapeLayer 作为 toView 的遮罩。并让遮罩发生 path 属性的动画
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = endPath.CGPath; //将它的 path 指定为最终的 path 来避免在动画完成后会回弹
toVC.view.layer.mask = maskLayer;CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
maskLayerAnimation.fromValue = (__bridge id _Nullable)(startpath.CGPath);
maskLayerAnimation.toValue = (__bridge id _Nullable)(endPath.CGPath);
maskLayerAnimation.duration = [self transitionDuration:self.transitionContext];
maskLayerAnimation.delegate = self;
maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];[maskLayer addAnimation:maskLayerAnimation forKey:@"push"];
}
</pre>
<pre>
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//告诉 iOS 这个 transition 完成,清除 fromVC和toVC 的 mask
[self.transitionContext completeTransition:![self.transitionContext transitionWasCancelled]];
[self.transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
[self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;
}
</pre>
-3、fromVC的控制器的使用
控制器实现UINavigationControllerDelegate的协议就行
<pre>
-(void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
//这里有个坑,设置navigationController的代理一定要放在viewWillAppear,而不是viewDidLoad里面.否则,push出去,pop回来,再push,就使用回系统默认的push动画了!!!
self.navigationController.delegate = self;
}
-(nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC
{
if (operation == UINavigationControllerOperationPush) {
PushAnimation *push = [PushAnimation new];
return push;
}else {
return nil;
}
}
</pre>
- 自定义转场动画就是以上的步骤,pop也是一样.
UIPercentDrivenInteractiveTransition 配合UIScreenEdgePanGestureRecognizer实现用返回滑动手势控制一个百分比交互式切换的过程动画
-1、创建滑动返回手势
<pre>
-
(void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.UIScreenEdgePanGestureRecognizer *edgePan = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(edgePan:)];
edgePan.edges = UIRectEdgeLeft;
[self.view addGestureRecognizer:edgePan];
} -
(void)edgePan:(UIGestureRecognizer *)gestureRecognizer
{
CGFloat per = [gestureRecognizer locationInView:self.view].x / self.view.bounds.size.width;
per = MIN(1, MAX(0, per));if (gestureRecognizer.state == UIGestureRecognizerStateBegan) {
_percentInteractiveTransition = [[UIPercentDrivenInteractiveTransition alloc] init];
[self.navigationController popViewControllerAnimated:YES];
} else if (gestureRecognizer.state == UIGestureRecognizerStateChanged){
[_percentInteractiveTransition updateInteractiveTransition:per];
} else if (gestureRecognizer.state == UIGestureRecognizerStateEnded || gestureRecognizer.state == UIGestureRecognizerStateCancelled){
if (per > 0.3) {
[_percentInteractiveTransition finishInteractiveTransition];
} else {
[_percentInteractiveTransition cancelInteractiveTransition];
}
_percentInteractiveTransition = nil;
}
}
</pre>
-2、实现UINavigationControllerDelegate中的协议
<pre>
-
(nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController
{
return _percentInteractiveTransition;
} -
(nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC
{
if (operation == UINavigationControllerOperationPop) {
PopAnimation *pop = [PopAnimation new];
return pop;
}else {
return nil;
}
}
</pre>
