動畫效果
不知道哪里不對,做的gif好像比較大,鏈接github圖片鏈接和直接在簡書上傳都顯示不出來,好像.實在看不到的可以去最底下去我的guthub看gif.
自定義轉場動畫
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>
