首页 > 代码库 > 类似nike+、香蕉打卡的转场动画效果-b
类似nike+、香蕉打卡的转场动画效果-b
首先,支持并感谢@wazrx 的 http://www.jianshu.com/p/45434f73019e和@onevcat 的https://onevcat.com/2013/10/vc-transition-in-ios7/ 对于转场动画的讲解和实现,非常详细,本人也是看过他们的文章后受的启发,快速实现了基于本项目需求的转场动画效果。
效果如下:(gif是我们的美术大师帮忙做的演示动效,实际的效果要比这个好,可通过文章最后链接下载我们的app:柠檬跑步,查看效果)
地图切换.gif
我的需求是两个页面push、pop之间的切换,所以自定义了push的转场动画,首先需要个遵循<UIViewControllerAnimatedTransitioning>协议的管理对象,并实现其两个方法:
XWCircleSpreadTransition.h
#import <UIKit/UIKit.h>typedef NS_ENUM(NSUInteger, XWCircleSpreadTransitionType) { XWCircleSpreadTransitionTypePush = 0, XWCircleSpreadTransitionTypePop };@interface XWCircleSpreadTransition : NSObject<UIViewControllerAnimatedTransitioning>@property (nonatomic, assign) XWCircleSpreadTransitionType type; + (instancetype)transitionWithTransitionType:(XWCircleSpreadTransitionType)type; - (instancetype)initWithTransitionType:(XWCircleSpreadTransitionType)type;@end
XWCircleSpreadTransition.m
#import "XWCircleSpreadTransition.h"@implementation XWCircleSpreadTransition+ (instancetype)transitionWithTransitionType:(XWCircleSpreadTransitionType)type{ return [[self alloc] initWithTransitionType:type]; } - (instancetype)initWithTransitionType:(XWCircleSpreadTransitionType)type{ self = [super init]; if (self) { _type = type; } return self; } - (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{ return 0.7; } - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{ switch (_type) { case XWCircleSpreadTransitionTypePush: [self presentAnimation:transitionContext]; break; case XWCircleSpreadTransitionTypePop: [self dismissAnimation:transitionContext]; break; } } - (void)dismissAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{ UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; UIView *containerView = [transitionContext containerView]; [containerView insertSubview:toVC.view atIndex:0]; //画两个圆路径 CGFloat radius = sqrtf(containerView.frame.size.height * containerView.frame.size.height + containerView.frame.size.width * containerView.frame.size.width) / 2; UIBezierPath *startCycle = [UIBezierPath bezierPathWithArcCenter:containerView.center radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:YES];// UIBezierPath *endCycle = [UIBezierPath bezierPathWithOvalInRect:temp.mapBtnFrame]; UIBezierPath *endCycle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 0, 0)]; //创建CAShapeLayer进行遮盖 CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.fillColor = [UIColor greenColor].CGColor; maskLayer.path = endCycle.CGPath; fromVC.view.layer.mask = maskLayer; //创建路径动画 CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; maskLayerAnimation.delegate = self; maskLayerAnimation.fromValue = http://www.mamicode.com/(__bridge id)(startCycle.CGPath); "transitionContext"]; [maskLayer addAnimation:maskLayerAnimation forKey:@"path"]; } - (void)presentAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{ UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIView *containerView = [transitionContext containerView]; [containerView addSubview:toVC.view]; //画两个圆路径// UIBezierPath *startCycle = [UIBezierPath bezierPathWithOvalInRect:fromVC.mapBtnFrame]; UIBezierPath *startCycle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 0, 0)]; CGFloat x = MAX(100, containerView.frame.size.width - 100); CGFloat y = MAX(100, containerView.frame.size.height - 100); CGFloat radius = sqrtf(pow(x, 2) + pow(y, 2)); UIBezierPath *endCycle = [UIBezierPath bezierPathWithArcCenter:containerView.center radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:YES]; //创建CAShapeLayer进行遮盖 CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.path = endCycle.CGPath; //将maskLayer作为toVC.View的遮盖 toVC.view.layer.mask = maskLayer; //创建路径动画 CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; maskLayerAnimation.delegate = self; //动画是加到layer上的,所以必须为CGPath,再将CGPath桥接为OC对象 maskLayerAnimation.fromValue = http://www.mamicode.com/(__bridge id)(startCycle.CGPath); "transitionContext"]; [maskLayer addAnimation:maskLayerAnimation forKey:@"path"]; } - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ switch (_type) { case XWCircleSpreadTransitionTypePush:{ id<UIViewControllerContextTransitioning> transitionContext = [anim valueForKey:@"transitionContext"]; [transitionContext completeTransition:YES]; UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey]; toView.layer.mask = nil; UIViewController *vc = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; vc.view.layer.mask = nil; } break; case XWCircleSpreadTransitionTypePop:{ id<UIViewControllerContextTransitioning> transitionContext = [anim valueForKey:@"transitionContext"]; [transitionContext completeTransition:YES]; UIViewController *vc = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; vc.view.layer.mask = nil; } break; } }@end
剩下的就是在ViewControllerA中实现代理<UINavigationControllerDelegate>中的animationControllerForOperation:
#pragma mark -#pragma mark - UINavigation Delegate-(id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC { if (fromVC == self) { return [XWCircleSpreadTransition transitionWithTransitionType:XWCircleSpreadTransitionTypePush]; } if (toVC == self) { return [XWCircleSpreadTransition transitionWithTransitionType:XWCircleSpreadTransitionTypePop]; } return nil; }
到此,这个简单的转场动画已经实现完毕,而且动画效果可以自定义成自己想要的展现形式。
类似nike+、香蕉打卡的转场动画效果-b
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。