
效果圖
mask的理解
CALayer有一個(gè)屬性叫做mask。
比如imageLayer有一個(gè)maskLayer作為mask,
如果maskLayer比imageLayer要小,那默認(rèn)的maskLayer之外的地方都是透明的,都不會(huì)渲染。
動(dòng)畫思路
1.獲取Tableview點(diǎn)擊的坐標(biāo),畫一個(gè)小圓點(diǎn)。
2.將小圓點(diǎn)作為目標(biāo)controller的遮罩,不斷擴(kuò)散到全屏。
獲取坐標(biāo)
1.添加單擊手勢(shì)
UITapGestureRecognizer *oneTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(getTouchPoint)];
oneTap.delegate = self;
oneTap.numberOfTouchesRequired = 1;
[self.tableview addGestureRecognizer:oneTap];
getTouchPoint可以不實(shí)現(xiàn),反正也不會(huì)響應(yīng),不高興看到??可以寫個(gè)空的。
-(void)getTouchPoint {
}
UIGestureRecognizer的代理方法,self.touchPoint暴露在.h,用與轉(zhuǎn)場(chǎng)動(dòng)畫的設(shè)置
#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
// 如果點(diǎn)擊tableViewCell則不截獲點(diǎn)擊事件
if ([NSStringFromClass([touch.view class]) isEqualToString:@"UITableViewCellContentView"]) {
//獲取點(diǎn)擊坐標(biāo)
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協(xié)議的對(duì)象。
.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 {
//賦值給屬性,動(dòng)畫結(jié)束時(shí)方便傳值
self.transitionContext = transitionContext;
OneViewController *fromVC = (OneViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
TwoViewController *toVC = (TwoViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//獲取轉(zhuǎn)場(chǎng)時(shí)生成的轉(zhuǎn)場(chǎng)視圖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];
//創(chuàng)建兩個(gè)圓形的UIBezierPath實(shí)例: 一個(gè)是點(diǎn)擊位置的30*30的小圓點(diǎn),另外一個(gè)則擁有足夠覆蓋屏幕的半徑.最終的動(dòng)畫是在這兩個(gè)圓周路徑之中進(jìn)行的
//這里的finalPoint用于計(jì)算足夠覆蓋屏幕的圓的半徑(點(diǎn)擊的點(diǎn)和他對(duì)角屏幕的連線長(zhǎng)度)
CGPoint finalPoint;
//判斷觸發(fā)在哪一個(gè)象限
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)];
//創(chuàng)建一個(gè) CAShapeLayer 來(lái)負(fù)責(zé)展示圓形遮蓋
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = maskFinalBP.CGPath; //將它的 path 指定為最終的 path 來(lái)避免在動(dòng)畫完成后會(huì)回彈
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 這個(gè) transition 完成
[self.transitionContext completeTransition:![self. transitionContext transitionWasCancelled]];
//清除 fromVC 的 mask,這里一定要清除,否則會(huì)影響響應(yīng)者鏈
[self.transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
[self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;
}
OvalTransition還可以完善,通過枚舉值來(lái)判斷是push還是pop。