用过格瓦拉电影，或者其他app可能都知道，一种点击按钮用放大效果实现转场的动画现在很流行，效果大致如下
自定义转场动画
首先就要声明一个遵守UIViewControllerAnimatedTransitioning协议的类.
然后实现协议中的两个函数
// This is used for percent driven interactive transitions, as well as for container controllers that have companion animations that might need to // 返回转场时间 - (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext; // 转场的动作 - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
push和pop都在animateTransition:里面实现，所以需要一个参数表示是push还是pop；还有一个参数表示转场时间
#import <UIKit/UIKit.h> #import <Foundation/Foundation.h> typedef enum : NSUInteger { animate_push = 0, animate_pop = 1, } Animate_Type; @interface SFTrainsitionAnimate : NSObject<UIViewControllerAnimatedTransitioning> - (instancetype)initWithAnimateType:(Animate_Type)type andDuration:(CGFloat)dura; @property (assign, nonatomic) CGFloat duration; @property (assign, nonatomic) Animate_Type type; @end
那么要如何使用新建的对象呢？可以通过UINavigationControllerDelegate中的
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{ if (operation == UINavigationControllerOperationPush) { self.animate = [[SFTrainsitionAnimate alloc] init]; return self.animate; }else{ return nil; } }
当然，要调用这个方法还得先把UINavigationControllerDelegate委托给视图控制器
self.navigationController.delegate = self;
再来看看UIViewControllerAnimatedTransitioning这个协议，返回时间的方法就不介绍了。重点在
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{ //起始视图控制器 UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; //目标视图控制器 UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; //在这个视图上实现跳转动画 UIView *containView = [transitionContext containerView]; }
如上注释，我们可以通过参数transitionContext获取到起始和目标控制。并在containView这个视图实现我们想要实现的动画。
接下来就是转场动画的实现了,push动画的流程大概就是:点击第一个页面的一个控件，模拟出控件然后移动到第二个界面同一个样式控件的位置，之后再把第二个界面以控件的位置中心扩散显示出来。
那么现在我们就在协议方法中通过fromVC获取到第一个视图的控件，并制造一个镜像视图移动到toVC的目标控件的位置。在这里，我调用了UIViewcontroller分类关联一个对象，用来记录控件（非拥有关系）。
#import <UIKit/UIKit.h> #import <Foundation/Foundation.h> @interface UIViewController (SFTrainsitionExtension) @property (assign, nonatomic) CGFloat sf_targetHeight;//灰白背景的分割线高度 @property (weak , nonatomic) UIView *sf_targetView; @end
产生targetView镜像：
//产生targetView镜像 - (UIView *)customSnapshoFromView:(UIView *)inputView { // Make an image from the input view. UIGraphicsBeginImageContextWithOptions(inputView.bounds.size, NO, 0); [inputView.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); // Create an image view. UIView *snapshot = [[UIImageView alloc] initWithImage:image]; snapshot.layer.masksToBounds = NO; snapshot.layer.cornerRadius = 0.0; snapshot.layer.shadowOffset = CGSizeMake(0.0, 0.0); snapshot.layer.shadowRadius = 5.0; snapshot.layer.shadowOpacity = 0.4; return snapshot; }
现在就可以制作移动的动画：
//起始位置 CGRect originFrame = [fromVC.sf_targetView convertRect:fromVC.sf_targetView.bounds toView:fromVC.view]; //动画移动的视图镜像 UIView *customView = [self customSnapshoFromView:fromVC.sf_targetView]; customView.frame = originFrame; //移动的目标位置 CGRect finishFrame = [toVC.sf_targetView convertRect:toVC.sf_targetView.bounds toView:toVC.view]; UIView *containView = [transitionContext containerView]; //背景视图 灰色高度 CGFloat height = CGRectGetMidY(finishFrame); toVC.sf_targetHeight = height; //背景视图 灰色 UIView *backgray = [[UIView alloc] initWithFrame:CGRectMake(0, 0, k_SF_SCREEN_WIDTH, k_SF_SCREEN_HIGHT)]; backgray.backgroundColor = [UIColor lightGrayColor]; //背景视图 白色 UIView *backwhite = [[UIView alloc] initWithFrame:CGRectMake(0, height, k_SF_SCREEN_HIGHT, k_SF_SCREEN_HIGHT-height)]; backwhite.backgroundColor = [UIColor whiteColor]; toVC.view.frame = [transitionContext finalFrameForViewController:toVC]; //注意添加顺序 [containView addSubview:toVC.view]; [containView addSubview:backgray]; [backgray addSubview:backwhite]; [containView addSubview:customView]; //动画 [UIView animateWithDuration:_duration/3 animations:^{ customView.frame = finishFrame; customView.transform = CGAffineTransformMakeScale(1.1, 1.1); } completion:^(BOOL finished) { if (finished) { [UIView animateWithDuration:_duration/3 animations:^{ customView.transform = CGAffineTransformIdentity; } completion:^(BOOL finished) { if (finished) { [UIView animateWithDuration:_duration/3 animations:^{ customView.alpha = 0.0; } completion:^(BOOL finished) { if (finished) { [backgray removeFromSuperview]; [customView removeFromSuperview]; [transitionContext completeTransition:YES]; } }]; [self addPathAnimateWithView:backgray fromPoint:customView.center]; } }];
移动完之后，要以圆形扩散显示出push之后的界面。就可以通过UIBezierPath和CAShapeLayer来实现。UIBezierPath表示路径，CAShapeLayer可以根据路径来显示区域，那么我们可以以第一个界面的视图先看看效果。
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.collectionView.bounds]; [path appendPath:[UIBezierPath bezierPathWithArcCenter:self.collectionView.center radius:50 startAngle:0 endAngle:2*M_PI clockwise:NO]]; CAShapeLayer *layer = [CAShapeLayer layer]; layer.path = path.CGPath; self.collectionView.layer.mask = layer;
初始化path路径以collectionView的四边画一个路径，然后加入一个以collectionView的中心为圆点，半径为50的路径，显示的区域就为两个路径之间的区域。
然后再把代码中的radius大小设为200
现在，我们创建一个CABasicAnimation对象去完成扩散的动画，起始位置是半径为10的圆，终点位置是半径为200的圆.
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.collectionView.bounds]; [path appendPath:[UIBezierPath bezierPathWithArcCenter:self.collectionView.center radius:10 startAngle:0 endAngle:2*M_PI clockwise:NO]]; UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:self.collectionView.bounds]; [path2 appendPath:[UIBezierPath bezierPathWithArcCenter:self.collectionView.center radius:200 startAngle:0 endAngle:2*M_PI clockwise:NO]]; CAShapeLayer *layer = [CAShapeLayer layer]; self.collectionView.layer.mask = layer; CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; pathAnimation.fromValue = (__bridge id)path.CGPath; pathAnimation.toValue = (__bridge id)path2.CGPath; pathAnimation.duration = 1.0; pathAnimation.repeatCount = 1; pathAnimation.removedOnCompletion = NO; pathAnimation.fillMode = kCAFillModeForwards; pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; [layer addAnimation:pathAnimation forKey:@"pathAnimate"];
现在就可以完成push的 转场效果了。注意圆圈白色部分显示的是collectionView底部的self.view的视图。
//加入收合动画 - (void)addPathAnimateWithView:(UIView *)toView fromPoint:(CGPoint)point{ //create path UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, k_SF_SCREEN_WIDTH, k_SF_SCREEN_HIGHT)]; //create path [path appendPath:[UIBezierPath bezierPathWithArcCenter:point radius:0.1 startAngle:0 endAngle:2*M_PI clockwise:NO]]; CGFloat radius = point.y > 0?k_SF_SCREEN_HIGHT*3/4: k_SF_SCREEN_HIGHT*3/4-point.y; UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, k_SF_SCREEN_WIDTH, k_SF_SCREEN_HIGHT)]; [path2 appendPath:[UIBezierPath bezierPathWithArcCenter:point radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO]]; CAShapeLayer *shapeLayer = [CAShapeLayer layer]; //shapeLayer.path = path.CGPath; toView.layer.mask = shapeLayer; CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; pathAnimation.fromValue = _type == animate_push? (__bridge id)path.CGPath:(__bridge id)path2.CGPath; pathAnimation.toValue = _type == animate_push? (__bridge id)path2.CGPath:(__bridge id)path.CGPath; pathAnimation.duration = _duration/3; pathAnimation.repeatCount = 1; pathAnimation.removedOnCompletion = NO; pathAnimation.fillMode = kCAFillModeForwards; pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; [shapeLayer addAnimation:pathAnimation forKey:@"pathAnimate"]; }
pop动画其实和push差不多，这里就不说了。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
【iOS实现类似格瓦拉电影的转场动画】相关文章：