好久沒更新自己的簡書了,悲哀呀...
先來個效果圖吧
transformAimationGif.gif
-
先拽兩個控制器, 藍色關(guān)聯(lián)PushViewController, 淺黃色關(guān)聯(lián)PopViewController,如圖:
圖1.png
-
關(guān)聯(lián)屬性于Push
圖2.png
-
做過自定義轉(zhuǎn)場動畫的同學(xué)們應(yīng)該都曉得必須遵守<UIViewControllerAnimatedTransitioning>協(xié)議,那么這里就創(chuàng)建一個類(CustomPushTransition)專門來實現(xiàn)此轉(zhuǎn)場效果.在.m必須實現(xiàn)這兩個方法:
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext; - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext -
代碼如下, 大致思想:創(chuàng)建兩個圓(利用貝爾曲線),一個是與push按鈕的size, 另一個是有足夠覆蓋屏幕的半徑,最后的動畫是由這兩個的path來完成.
@property (nonatomic, strong) id<UIViewControllerContextTransitioning>customTransitionContext; - (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{ return .5f; } - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{ self. PushViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; PopViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; //獲取push控制器中按鈕. UIButton *button = fromVC.push; //獲取容器 UIView *containerView = [transitionContext containerView]; //添加視圖 [containerView addSubView:fromVC.view]; [containerView addSubView:toVC.view]; //繪制小圓, Oval:橢圓形 UIBezierPath *startBP = [UIBezierPath bezierPathWithOvalInRect:button.frame]; //繪制大圓, 需先確定半徑,其實這里用到勾股定理,很好理解的,如圖3: CGFloat horizontalSide_X = button.center.x; CGFloat verticalSide_Y = CGRectGetMaxY(toVC.view.bounds) - button.center.y; CGFloat radius = sqrt( (horizontalSide_X * horizontalSide_X) + (verticalSide_Y * verticalSide_Y) ); /* CGRect CGRectInset ( CGRect rect, CGFloat dx, CGFloat dy ); 解釋: 該結(jié)構(gòu)體是以rect的中點為中心,插入一個以dx,dy為參考的放大或縮小的矩形; 正表示縮小,負表示放大. 所以繪制大圓是以小圓(button.frame)為中心點,插入一個radius尺寸的放大的圓 */ UIBezierPath *finalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(button.frame, -radius, -radius)]; CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.path = finalBP.CGPath; //設(shè)置目標(biāo)控制器的mask toVC.view.layer.mask = maskLayer; //執(zhí)行動畫 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; animation.fromValue = (__bridge id _Nullable)(startBP.CGPath); animation.toValue = (__bridge id _Nullable)(finalBP.CGPath); animation.during = [self transitionDuration:transitionContext]; animation.timingFuncion = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; animation.delegate = self; [maskLayer addAnimation:maskLayerAnimation forKey:@"path"]; }pragma mark - CABasicAnimation
-
(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//告訴系統(tǒng)轉(zhuǎn)場動畫完成
[self.customTransitionContext completeTransition:![self.customTransitionContext transitionWasCancelled]];
//清除相應(yīng)控制器視圖的mask
[self.customTransitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
[self.customTransitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;
}
圖3.png
-
5. push的自定義轉(zhuǎn)場基本完成了,現(xiàn)在回到PushViewController上, 控制器須遵守<UINavigationControllerDelegate>協(xié)議, 所以self.navigationCtroller.delegate = self; //注意設(shè)置導(dǎo)航控制器的代理須寫在viewWillAppear中或是viewDidAppear.實現(xiàn)導(dǎo)航控制器的代理:
#pragma mark - UINavigationControllerDelegate
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
if (operation == UINavigationControllerOperationPush) {
return self.pushAnimation;
}
return nil;
}
#pragma mark - 懶加載
- (CustomPushTransition *)pushAnimation{
if (!_pushAnimation) {
_pushAnimation = [[CustomPushTransition alloc] init];
}
return _pushAnimation;
}