自定義轉(zhuǎn)場(chǎng)動(dòng)畫-小圓點(diǎn)擴(kuò)散

效果圖

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。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容