您的位置：首页 > 移动开发 > IOS开发

iOS实现类似格瓦拉电影的转场动画

2016-11-01 08:54 726 查看

用过格瓦拉电影，或者其他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 格瓦拉 转场 动画
相关文章推荐
新的分享
章节导航