最近公司让做和系统相似的图片展示功能, 于是就顺带的研究一一下转场功能的实现(也就是自定义转场功能).
针对于网上那些我都看不太懂的程序, 我自己想也一点,用来做个记录.
1.对于相册照片的点击功能大家应该都比较了解. 点击图片, 图片从原位置进行放大, 而我们可以清晰的看到放大的效果示例. 那么这个问题就来了,
(1)展示图片的这个是一个什么? 控制器? 视图? 还是什么的?
(2)它是怎么去实现动画功能?
(3)它是以什么情况弹出的控制器 modal??
(4)为什么弹出的位置可以随心所欲呢?
2.在苹果WWDC2014的时候,苹果给我提供了两个用于转场动画的协议.
UIViewControllerTransitioningDelegate 控制器转场代理协议
UIViewControllerAnimatedTransitioning 控制器转场动画协议
内部提供了很多方法, 目的在于让我们更精准的控制自己的转场动画.
// 转场协议 .
@protocol UIViewControllerTransitioningDelegate <NSObject>
@optional
// 需要返回一个遵守协议的对象, 此对象可控制动画的行为. 动画控制 展示情况
/*
三个参数:
1.PresentedController: 被展示出来的控制器
2.Presenting: 发起展示的控制器
3.source: 资源控制器
返回值 ,用来设置样式,只要遵守协议的控制器,都是可以的
*/
- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;
// 转场 消失时的动画
- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed;
// 下面两个方法是用在交互时, 我还没有好的认识, 所以暂不接受
// 交互
- (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator;
- (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator;
// 这个方法很重要 , 如果要改变样式的话, 自定义modal的话,必须调用. 它返回的控制器,包含着 衔接 被展示和 发起展示的控制器.
- (nullable UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source NS_AVAILABLE_IOS(8_0);
@end
说了这么多我想大家都懵了, 现在给展示展示一些相关的应用吧
自定义转场1.gif
因为我们一般对于一些衔接性不是很强的控制器,都是采用modal直接进行弹出的, 但是我们有时候也需要它从我们想要的地方,以我们需要的方式进行展示才可以, 这时候我们需要自定义转场(modal)动画.
具体步骤
给需要转场的控制器设置代理和转场类型.
- 设置转场的代理,(自己实现转场 ,做了一些自己想做的事情,代理方法中书写)
控制器属性 transitionDelegate需要遵守协议:UIViewControllerTransitionDelegate - 设置转场的类型,(因为不需要系统从下往上的死板推出, 所以类型需要重新设置 , 在iphone中 转场类型除
custom以外都是从下往上推的,但ipad 可以应用于其他转场类型)
modalPresentationStyle
代理这么一个属性,只要是遵守了相关协议都可以作为他的代理, 所以为了方便起见(以后能够抽出来用),建立了一个专门用来处理转场的类 CustomModalUpDown的类(形象说明自定义上下转场)
继承于NSobject,遵守UIViewControllerTransitioningDelegate协议
控制器中代码形式:
--实例代码先用Swift进行书写
// 将代码封装成工具类, 以便以后使用
private lazy var customModal = CustomModalUpDown()
// 加载storyboard中的控制器
let sb = UIStoryboard.init(name: "PopoverViewController", bundle: nil)
let popVc = sb.instantiateInitialViewController()!
// 设置 转场代理
popVc.transitioningDelegate = customModal
// 设置转场类型
popVc.modalPresentationStyle = UIModalPresentationStyle.Custom
// modal出控制器
presentViewController(popVc, animated: true, completion: nil)
工具类专门用来做modal
// 定义一个通知name,用于model出来
let LXLPopoverViewShow = "LXLPopoverViewShow"
// 定义一个通知name,用于dismiss
let LXLPopoverViewDismiss = "LXLPopoverViewDismiss"
import UIKit
class CustomModalUpDown: NSObject,UIViewControllerTransitioningDelegate,UIViewControllerAnimatedTransitioning {
// 定义变量,记录是否已经pop出来控制器
private var isPop : Bool = false
// 传递
var presentFrame : CGRect = CGRectZero
// MARK: - UIViewControllerTransitioningDelegate -代理方法
/// 如果是改变样式的话,也就是改变显示的尺寸, 必须调用这个方法
func presentationControllerForPresentedViewController(presented: UIViewController, presentingViewController presenting: UIViewController, sourceViewController source: UIViewController) -> UIPresentationController?
{
// 自己定义一个 PresentationController 继承于 UIPresentationController, 内部包含上下文, 可以修改上下文内容. 我在后面接收自定义这个类都干了什么.
let presentC = PresentationController(presentedViewController: presented, presentingViewController: presenting)
// 将外界的 尺寸进行传入
presentC.presentFrame = presentFrame
return presentC
}
// modal展示出控制器时的动画
// presented:被展示的控制器
// presenting:发起展示的控制器
// source: 资源控制器 (用来设置样式.只要遵守协议的控制器,都是可以的)
func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
isPop = true
// NSNotificationCenter.defaultCenter().postNotificationName(LXLPopoverViewShow, object: self)
return self
}
// modal 消失时的动画
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
isPop = false
NSNotificationCenter.defaultCenter().postNotificationName(LXLPopoverViewDismiss, object: self)
return self
}
// MARK : - UIViewControllerAnimatedTransitioning - 代理方法
/// 返回转场时间, 一般没人管
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval
{
return 888
}
/// 设置转场动画,利用上下文
func animateTransition(transitionContext: UIViewControllerContextTransitioning)
{
let presentView : UIView!
// 展示和dismiss的时候,它的上下文中的 from 和 to对应得刚好相反.
if isPop {
// 取出上下文中的 展示控制器的view
presentView = transitionContext.viewForKey(UITransitionContextToViewKey)!
presentView.layer.anchorPoint = CGPoint(x: 0.5, y: 0)
// warning 将view需要手动加到 内容view上,才能显示 , 相当于自己还要在进行创建内容控制器一样.
transitionContext.containerView()?.addSubview(presentView)
presentView.transform = CGAffineTransformMakeScale(1.0, 0.0)
UIView.animateWithDuration(0.5, animations: { () -> Void in
presentView.transform = CGAffineTransformIdentity
}) { (_) -> Void in
// 完成时,一定记得关闭上下文,负责动画无法完成.
transitionContext.completeTransition(true)
}
}else{
// 取出上下文中的 展示控制器的view
presentView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
// waring 将view需要手动加到 内容view上,才能显示 , 相当于自己还要在进行创建内容控制器一样.
transitionContext.containerView()?.addSubview(presentView)
UIView.animateWithDuration(0.5, animations: { () -> Void in
presentView.transform = CGAffineTransformMakeScale(1.0, 0.0000001)
}) { (_) -> Void in
// 完成时,一定记得关闭上下文,负责动画无法完成.
transitionContext.completeTransition(true)
}
}
}
}
自定义展示控制器(主要是取得其上下文, 进行添加层次.)
import UIKit
class PresentationController: UIPresentationController {
// 设置尺寸, 供外界设置 展示控制器的大小
var presentFrame : CGRect = CGRectZero
/// 负责布局 内容容器中的子控件的 (此方法值调用一次)
override func containerViewWillLayoutSubviews() {
super.containerViewWillLayoutSubviews()
let view = presentedView()
// 自己进行设置被展示的view的大小 (当然我是希望外界可以进行传递的), 如果外界没有, 那我自己进行设置
view?.frame = (presentFrame == CGRectZero) ? CGRect(x: 100, y: 56, width: 150, height: 300) : presentFrame
// containerView中存放着 modal双方的 视图 . 然后自己进行插入蒙版视图
containerView?.insertSubview(cover, atIndex: 0)
}
// MARK: -懒加载蒙版
private lazy var cover : UIView = {
let view = UIView(frame: UIScreen.mainScreen().bounds)
view.backgroundColor = UIColor(white: 0.5, alpha: 0.2)
let tap = UITapGestureRecognizer(target: self, action: Selector("dismissView"))
view.addGestureRecognizer(tap)
return view
}()
//MARK :- 点击事件的监听
func dismissView()
{
// 拿到被展示的控制器, 然后让其消失
presentedViewController.dismissViewControllerAnimated(true, completion: nil)
}
}
OC部分的代码---- 相当于只是一个转换
简单的实现, 简单粗暴吧
oc自定义转场.gif
自定义类,专门管理转场,遵守两个协议,一个代理, 一个动画协议
// .h文件
#import <UIKit/UIKit.h>
@interface CustomModal : NSObject<UIViewControllerTransitioningDelegate,UIViewControllerAnimatedTransitioning>
@property(assign,nonatomic) CGRect rect;
@end
//.m文件
#import "CustomModal.h"
#import "PresentController.h"
@interface CustomModal()
@property(nonatomic,assign) BOOL isPop;
@end
@implementation CustomModal
- (UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source
{
PresentController *presentationVC = [[PresentController alloc]initWithPresentedViewController:presented presentingViewController:presenting];
[presentationVC setRect:self.rect];
return presentationVC;
}
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
self.isPop = YES;
return self;
}
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
self.isPop = NO;
return self;
}
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
{
return 0.5;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIView *presentView = [[UIView alloc]init];
if (self.isPop) {
presentView = [transitionContext viewForKey:UITransitionContextToViewKey];
presentView.layer.anchorPoint = CGPointMake(0.5, 0);;
[[transitionContext containerView] addSubview:presentView];
presentView.transform = CGAffineTransformMakeScale(1.0, 0.0);
[UIView animateWithDuration:0.5 animations:^{
presentView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
[transitionContext completeTransition:YES];
}];
}else
{
presentView = [transitionContext viewForKey:UITransitionContextFromViewKey];
[[transitionContext containerView] addSubview:presentView];
[UIView animateWithDuration:0.5 animations:^{
presentView.transform = CGAffineTransformMakeScale(1.0, 0.00001);
} completion:^(BOOL finished) {
[transitionContext completeTransition:YES];
}];
}
}
@end
自定义类,专门用于转场展示view的处理
// .h文件
#import <UIKit/UIKit.h>
@interface PresentController : UIPresentationController
- (void)setRect: (CGRect)rect;
@end
// .m文件
#import "PresentController.h"
@interface PresentController()
@property(nonatomic,strong) UIView *cover;
@end
@implementation PresentController
- (UIView *)cover
{
if (_cover == nil) {
NSLog(@"________");
UIView *cover = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
cover.backgroundColor = [[UIColor alloc]initWithWhite:0.2 alpha:0.5];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(clickDismiss)];
[cover addGestureRecognizer:tap];
_cover = cover;
}
return _cover;
}
- (void)containerViewWillLayoutSubviews
{
[super containerViewWillLayoutSubviews];
// UIView *presentView = self.presentedView;
[self.containerView insertSubview:self.cover atIndex:0];
}
- (void)setRect:(CGRect)rect
{
self.presentedView.frame = rect;
}
- (void)clickDismiss
{
[self.presentedViewController dismissViewControllerAnimated:YES completion:nil];
}
