模仿格瓦拉電影的轉場動畫
demo.gif
自定義轉場動畫
- 首先就要聲明一個遵守UIViewControllerAnimatedTransitioning協(xié)議的類.
- 然后實現(xiàn)協(xié)議中的兩個函數
// 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:里面實現(xiàn)烧给，所以需要一個參數表示是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這個協(xié)議，返回時間的方法就不介紹了酝惧。重點在
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
//起始視圖控制器
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
//目標視圖控制器
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//在這個視圖上實現(xiàn)跳轉動畫
UIView *containView = [transitionContext containerView];
}
如上注釋榴鼎，我們可以通過參數transitionContext獲取到起始和目標控制。并在containView這個視圖實現(xiàn)我們想要實現(xiàn)的動畫晚唇。
接下來就是轉場動畫的實現(xiàn)了,push動畫的流程大概就是:點擊第一個頁面的一個控件巫财，模擬出控件然后移動到第二個界面同一個樣式控件的位置，之后再把第二個界面以控件的位置中心擴散顯示出來哩陕。
- 那么現(xiàn)在我們就在協(xié)議方法中通過fromVC獲取到第一個視圖的控件翁涤，并制造一個鏡像視圖移動到toVC的目標控件的位置桥言。在這里，我調用了UIViewcontroller分類關聯(lián)一個對象葵礼，用來記錄控件（非擁有關系）号阿。
#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;
}
- 現(xiàn)在就可以制作移動的動畫：
//起始位置
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來實現(xiàn)扔涧。UIBezierPath表示路徑，CAShapeLayer可以根據路徑來顯示區(qū)域届谈，那么我們可以以第一個界面的視圖先看看效果枯夜。
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的路徑湖雹，顯示的區(qū)域就為兩個路徑之間的區(qū)域。
123.png
然后再把代碼中的radius大小設為200
456.png
現(xiàn)在曙搬，我們創(chuàng)建一個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"];
789.gif
現(xiàn)在就可以完成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差不多，這里就不說了橡娄。
github地址：點這里
參考博客：點這里
