Transition 过渡/转场动画(一)
UIViewController 的转场效果
当viewController通过push 或 present 进行转场时, 系统自带的动画是从右侧push进来一个新的viewControler (或从下面present 一个新的ViewController), 接下来我们要做的就是要自定义系统的这个动画效果.
原理: 比如当viewController 调用 dismiss 后, 系统会检查当前 vc 是否实现<UIViewControllerTransitioningDelegate> 协议, 该协议会返回 自定义 的转场动画
例: 通过pan手势, dismiss 当前viewController
1. 在调用dimiss的 VC 中实现 <UIViewControllerTransitioningDelegate> 协议
#import "SecondViewController.h"
#import "CustomInteractiveTransition.h"
#import "CustomDissmissAnimation.h" @interface SecondViewController () <UIViewControllerTransitioningDelegate> @property (nonatomic, strong) CustomInteractiveTransition *interactiveAnimator;
@property (nonatomic, strong) CustomDissmissAnimation *dismissAnimator; @end @implementation SecondViewController - (instancetype)init {
if (self = [super init]) {
self.transitioningDelegate = self;
}
return self;
} - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor cyanColor]; UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
[button setTitle:@"dismiss" forState:UIControlStateNormal];
button.frame = CGRectMake(, , , );
[button addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button]; self.interactiveAnimator = [[CustomInteractiveTransition alloc] initWithViewController:self]; self.dismissAnimator = [[CustomDissmissAnimation alloc] init]; UIPanGestureRecognizer *panGestureRecognizer =[[UIPanGestureRecognizer alloc] initWithTarget:self.interactiveAnimator action:@selector(panGestureAction:)];
[self.view addGestureRecognizer:panGestureRecognizer]; [self.transitionCoordinator notifyWhenInteractionEndsUsingBlock:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) { }];
} - (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated]; [self.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
UIView *view = [context viewForKey:UITransitionContextFromViewKey];
view.transform = CGAffineTransformMakeScale(0.7, 0.7); } completion:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
// UIView *view = [context viewForKey:UITransitionContextFromViewKey];
// view.transform = CGAffineTransformIdentity;
}];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated]; [self.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
UIView *view = [context viewForKey:UITransitionContextToViewKey];
view.transform = CGAffineTransformMakeScale(, ); } completion:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
// UIView *view = [context viewForKey:UITransitionContextToViewKey];
// view.transform = CGAffineTransformIdentity;
}];
} - (void)dealloc
{
self.interactiveAnimator = nil;
self.dismissAnimator = nil;
} - (void)btnClick:(UIButton *)sender {
[self dismissViewControllerAnimated:YES completion:nil];
} #pragma mark - UIViewControllerTransitioningDelegate
// return 动画对象,该动画对象符合 UIViewControllerAnimatedTransitioning 协议,负责显示 present 动画。
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
return nil;
}
// return 动画对象,负责显示 dismiss 动画。
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
return self.dismissAnimator;
}
// return 交互式动画对象,该动画符合 UIViewControllerInteractiveTransitioning 协议,采用触摸手势或手势识别器作为动画的驱动,显示 present 动画。
- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id<UIViewControllerAnimatedTransitioning>)animator {
return nil;
}
// return 交互式动画,显示 dismiss 动画
- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator {
// 如果直接返回 interactive 会与系统的 dismiss 动画有冲突,导致点击 button 无法 dismiss 界面。
// 同时如果返回 interactiveAnimator,那么 animationControllerForDismissedController: 则必须实现
return self.interactiveAnimator.isInteractive? self.interactiveAnimator: nil;
// return self.interactiveAnimator;
} // return UIPresentationController,系统已经提供了各个演示样式。
//- (nullable UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source NS_AVAILABLE_IOS(8_0); @end
2. 实现一个动画对象, 实现 <UIViewControllerAnimatedTransitioning>协议
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
return 0.35f;
} - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
UIViewController *srcVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIViewController *secondVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; UIView *containerView = [transitionContext containerView]; [containerView addSubview:srcVC.view]; [containerView addSubview:secondVC.view]; [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
secondVC.view.frame = CGRectMake(, [UIScreen mainScreen].bounds.size.height, secondVC.view.bounds.size.width, secondVC.view.bounds.size.height);
} completion:^(BOOL finished) {
[transitionContext completeTransition:!transitionContext.transitionWasCancelled];
}];
}
3. 交互式动画效果, 需要实现<UIViewControllerInteractiveTransitioning>协议 ; 或者继承UIPercentDrivenInteractiveTransition 类
* 可选实现. 在本例中, 通过pan手势下滑跟随dismiss, 需要通过交互式动画来实现
#import "CustomInteractiveTransition.h"
@interface CustomInteractiveTransition : UIPercentDrivenInteractiveTransition @property (nonatomic, assign, readonly) BOOL isInteractive; - (instancetype)initWithViewController:(UIViewController *)viewController; - (void)panGestureAction:(UIPanGestureRecognizer *)gestureRecognizer; @end
//.m
@interface CustomInteractiveTransition () @property (nonatomic, weak) UIViewController *viewController; @property (nonatomic, assign) CGFloat startScale; @property (nonatomic, assign, readwrite) BOOL isInteractive; @end @implementation CustomInteractiveTransition - (instancetype)initWithViewController:(UIViewController *)viewController {
if (self = [super init]) {
_isInteractive = NO;
_viewController = viewController;
}
return self;
} - (void)panGestureAction:(UIPanGestureRecognizer *)recognizer {
CGFloat progress = [recognizer translationInView:self.viewController.view].y / (self.viewController.view.bounds.size.height * 1.0);
progress = MIN(1.0, MAX(0.0, progress)); self.isInteractive = YES; if (recognizer.state == UIGestureRecognizerStateBegan) { [self.viewController dismissViewControllerAnimated:YES completion:^{ }];
}
else if (recognizer.state == UIGestureRecognizerStateChanged) {
[self updateInteractiveTransition:progress];
}
else if (recognizer.state == UIGestureRecognizerStateEnded || recognizer.state == UIGestureRecognizerStateCancelled) {
if (progress > 0.5) {
[self finishInteractiveTransition];
}
else {
[self cancelInteractiveTransition];
} self.isInteractive = NO;
}
} @end
在 iOS中,可以取消一个过渡。这意味着,第二个视图的-viewWillApear
被调用,但-viewDidApear
不一定被调用。
如果代码写的假定-viewDidAppear
总是在-viewWillAppear
之后执行则需要重新考虑逻辑实现。
这种情况下UIViewControllerTransitionCoordinator
就有用了。在交互式过渡结束的时候,会在 block 中收到通知。
参考:
present: https://www.jianshu.com/p/aed8a3a15c82
push/pop: https://www.jianshu.com/p/28b9523d70a9
Transition 过渡/转场动画(一)的更多相关文章
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- iOS 动画学习之视图控制器转场动画
一.概述 1.系统会创建一个转场相关的上下文对象,传递到动画执行器的animateTransition:和transitionDuration:方法,同样,也会传递到交互Controller的star ...
- 转场动画CALayer (Transition)
1.将对应UI控件的层调用以下接口即可 1.1 .h文件 // // 文 件 名:CALayer+Transition.h // // 版权所有:Copyright © 2018年 leLight. ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- iOS:核心动画之转场动画CATransition
转场动画——CATransition CATransition是CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 U ...
- iOS 转场动画探究(一)
什么是转场动画: 转场动画说的直接点就是你常见的界面跳转的时候看到的动画效果,我们比较常见的就是控制器之间的Push和Pop,还有Present和Dismiss的时候设置一下系统给我们的modalTr ...
- iOS 转场动画探究(二)
这篇文章是接着第一篇写的,要是有同行刚看到的话建议从前面第一篇看,这是第一篇的地址:iOS 转场动画探究(一) 接着上一篇写的内容: 上一篇iOS 转场动画探究(一)我们说到了转场要素的第四点,把那个 ...
- iOS转场动画封装
写在前面 iOS在modal 或push等操作时有默认的转场动画,但有时候我们又需要特定的转场动画效果,从iOS7开始,苹果就提供了自定义转场的API,模态推送present和dismiss.导航控制 ...
随机推荐
- [Linux] 019 软件包管理简介
1. 软件包分类 源码包 脚本安装包 二进制包(RPM 包.系统默认包) 2. 源码包 (1)源码包的优点 开源,如果有足够的能力,可以修改源代码 可以自由选择所需的功能 软件是编译安装,所以更加适合 ...
- PHP_CodeIgniter Github实现个人空间
github支持github Pages 可以实现自己的个人空间 XXX.github.io/project 1 注册自己的github账户 2 需要设置自己的user_name, user_name ...
- Java并发编程:线程的同步
Java并发编程:线程的同步 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} J ...
- redis setNx方法
Redis有一系列的命令,特点是以NX结尾,NX是Not eXists的缩写,如SETNX命令就应该理解为:SET if Not eXists.这系列的命令非常有用,这里讲使用SETNX来实现分布式锁 ...
- NGUI的button的创建的问题(Button Script)
一,我们可以给了label,sprite等添加button事件 我们先添加一个label在UI_Root上,然后选中该label,右键-Attach-Box Collider,添加,当你添加完了Box ...
- C语言接口
struct i_foo * foobar_foo(void); //返回接口指针struct foo_object * foo_create(struct i_foo *iface, void *d ...
- 【转】 关于form与表单提交操作的一切
参考一:http://caibaojian.com/form.html 参考二:https://blog.csdn.net/weixin_42301628/article/details/867156 ...
- Redis这篇就够了
Redis 简介 Redis 优势 Redis 数据类型 string hash list set Zset 小总结 基本命令 发布订阅 简介 实例 发布订阅常用命令 事务 实例 Redis 事务命令 ...
- C语言字符串复制
strcpy(arg1,arg2);//将arg2内容赋值到arg1 strncpy(arg1,arg2,size);//赋值多少由size决定,如果要截取某一部分,可以将arg2指针进行arg2+x ...
- 八核浮点型DSP的双千兆网接口设计方案
千兆网络接口具有数据传输速率快.连接方便.可以即插即用的优点,使得其应用较为广泛.随着电子技术和处理器的发展,很多应用场合的数据通信速率超过千兆网口的实际传输速率.例如,在A/D采样中,需要直接存储A ...