效果图
mask的理解
CALayer有一个属性叫做mask。
比如imageLayer有一个maskLayer作为mask，
如果maskLayer比imageLayer要小，那默认的maskLayer之外的地方都是透明的，都不会渲染。
动画思路
1.获取Tableview点击的坐标，画一个小圆点。
2.将小圆点作为目标controller的遮罩，不断扩散到全屏。
获取坐标
1.添加单击手势
UITapGestureRecognizer *oneTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(getTouchPoint)];
oneTap.delegate = self;
oneTap.numberOfTouchesRequired = 1;
[self.tableview addGestureRecognizer:oneTap];
getTouchPoint可以不实现，反正也不会响应，不高兴看到⚠️可以写个空的。
-(void)getTouchPoint {
}
UIGestureRecognizer的代理方法,self.touchPoint暴露在.h，用与转场动画的设置
#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
// 如果点击tableViewCell则不截获点击事件
if ([NSStringFromClass([touch.view class]) isEqualToString:@"UITableViewCellContentView"]) {
//获取点击坐标
UIView *window = [[[UIApplication sharedApplication] delegate] window];
self.touchPoint = [touch locationInView:window];
return NO;
}
return YES;
}
自定义push效果
-(void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
self.navigationController.delegate = self;
}
#pragma mark --UINavigationControllerDelegate
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
if (operation == UINavigationControllerOperationPush) {
OvalTransition *ovalTransi = [OvalTransition new];
return ovalTransi;
}else{
return nil;
}
}
其中OvalTransition是遵循UIViewControllerAnimatedTransitioning协议的对象。
.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface OvalTransition : NSObject <UIViewControllerAnimatedTransitioning>
@end
.m
#import "OvalTransition.h"
#import "OneViewController.h"
#import "TwoViewController.h"
@interface OvalTransition () <CAAnimationDelegate>
@property (strong, nonatomic) id<UIViewControllerContextTransitioning>transitionContext;
@end
@implementation OvalTransition
#pragma mark - UIViewControllerAnimatedTransitioning
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
return 0.7;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
//赋值给属性,动画结束时方便传值
self.transitionContext = transitionContext;
OneViewController *fromVC = (OneViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
TwoViewController *toVC = (TwoViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//获取转场时生成的转场视图view
UIView *containerView = [transitionContext containerView];
CGRect rect = CGRectMake(fromVC.touchPoint.x - 15 , fromVC.touchPoint.y - 15 , 30, 30);
UIBezierPath *maskStartBP = [UIBezierPath bezierPathWithOvalInRect:rect];
[containerView addSubview:fromVC.view];
[containerView addSubview:toVC.view];
//创建两个圆形的UIBezierPath实例: 一个是点击位置的30*30的小圆点,另外一个则拥有足够覆盖屏幕的半径.最终的动画是在这两个圆周路径之中进行的
//这里的finalPoint用于计算足够覆盖屏幕的圆的半径（点击的点和他对角屏幕的连线长度）
CGPoint finalPoint;
//判断触发在哪一个象限
if (rect.origin.x > (toVC.view.bounds.size.width / 2)) {
if (rect.origin.y < (toVC.view.bounds.size.width / 2)) {
//第一象限
finalPoint = CGPointMake(fromVC.touchPoint.x - 0, fromVC.touchPoint.y - CGRectGetMaxY(toVC.view.bounds) + 30);
}else{ //第四象限
finalPoint = CGPointMake(fromVC.touchPoint.x - 0, fromVC.touchPoint.y - 0);
}
}else{
if (rect.origin.y < (toVC.view.bounds.size.height / 2)) {
//第二象限
finalPoint = CGPointMake(fromVC.touchPoint.x - CGRectGetMaxX(toVC.view.bounds), fromVC.touchPoint.y - CGRectGetMaxY(toVC.view.bounds)+30);
}else{
//第三象限
finalPoint = CGPointMake(fromVC.touchPoint.x - CGRectGetMaxX(toVC.view.bounds), fromVC.touchPoint.y - 0);
}
}
//绘制大圆形
CGFloat radius = sqrt((finalPoint.x * finalPoint.x) + (finalPoint.y * finalPoint.y));
UIBezierPath *maskFinalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(rect, -radius, -radius)];
//创建一个 CAShapeLayer 来负责展示圆形遮盖
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = maskFinalBP.CGPath; //将它的 path 指定为最终的 path 来避免在动画完成后会回弹
toVC.view.layer.mask = maskLayer;
CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
maskLayerAnimation.fromValue = (__bridge id)(maskStartBP.CGPath);
maskLayerAnimation.toValue = (__bridge id)((maskFinalBP.CGPath));
maskLayerAnimation.duration = [self transitionDuration:transitionContext];
maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
maskLayerAnimation.delegate = self;
[maskLayer addAnimation:maskLayerAnimation forKey:@"path"];
}
#pragma mark - CABasicAnimation的Delegate
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//告诉 iOS 这个 transition 完成
[self.transitionContext completeTransition:![self. transitionContext transitionWasCancelled]];
//清除 fromVC 的 mask,这里一定要清除,否则会影响响应者链
[self.transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
[self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;
}
OvalTransition还可以完善，通过枚举值来判断是push还是pop。
