浅谈转场动画(一)

因工作需要,用到了转场动画,在这里呢,就简单的介绍一下转场动画的用法。今天主要讲实用性,如果各位客观照着小弟说的做,肯定能让你看到效果。

[传送门,demo中代码与本文代码可能有所不同,希望看官有自我学习能力啊。][id]
[id]: https://github.com/cnvegetablebird/simpleTransformation

浅谈转场动画(一)_第1张图片
demo.gif

转场动画分为:push/pop , modal/dismiss
交互式, 非交互式
这里呢,因为用到了 非交互式 push/pop,所有就先说说这个,剩下的,我会在之后的文章中讲解。
可能我们一提到转场动画呢,就感觉好高深的样子,其实本屌丝在一开始的时候也这么认为,查阅各种资料之后,当自己写的时候才发现,切~~ 什么鬼,简单的要死,不就是实现几个协议的事吗? 所以说,转场拼的不是你的技术,关键在于你的创意指数,亲们赶紧撸起吧。。。。

转场动画三步走:(最简单的例子)

第一步:

继承协议: UINavigationControllerDelegate,并实现协议中的关键方法

// self.homePageTransitions自定义的类,实现了UINavigationControllerDelegate协议
1. self.navigationController?.delegate = self.homePageTransitions

// 自定义的类,实现UINavigationControllerDelegate代理
class HomePageTransitions: NSObject, UINavigationControllerDelegate {

let pushAnimator: HomePagePushAnimator
// 必须实现的方法
func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    
    // operation: Push Pop 我相信大家一看就懂吧
    if operation == .Push { 
        // fromVC: 来源ViewController  toVC: 目标ViewController 这里可以对VC做判断,使它只支持特殊的样式
        if fromVC.isKindOfClass(HomeListViewController) && toVC.isKindOfClass(DetailViewController) {
            return pushAnimator  // 真正执行动画的类(见第二步)
        }
    }else if operation == .Pop {
        return nil    // 如果返回空,则不执行转场动画
    }
    return nil
}
}

第二步:

继承动画协议:UIViewControllerAnimatedTransitioning,并实现协议中的关键方法。

class HomePagePushAnimator: NSObject, UIViewControllerAnimatedTransitioning {

var fromImageView: UIImageView
var toImageView: UIImageView
var animationImageView: UIImageView!
var containerView: UIView!
var maskView: UIView!

// 转场动画执行时间
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
    return 1.0
}
// 所有的动画效果,都要在这个方法里边实现
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

    // 通过key获取VC
    let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)!
    let toView = toVC.view
    // 动画上下文view
    let containerView = transitionContext.containerView()
    self.containerView = containerView
    // 遮盖层,添加到上下文中
    self.maskView = UIView()
    self.maskView.backgroundColor = UIColor.blackColor()
    self.maskView.frame = containerView.bounds
    containerView.addSubview(self.maskView)
    
    // 坐标转换
    let fromRect: CGRect = fromImageView.convertRect(fromImageView.frame, toView: containerView)
    var toRect: CGRect = toImageView.frame//toImageView.convertRect(toImageView.frame, toView: containerView)
    
    // 实际上做动画的UIImageView
    self.animationImageView = UIImageView(frame: fromRect)
    self.animationImageView.image = fromImageView.image
    containerView.addSubview(self.animationImageView)
    
    // 动画效果
    let duration: NSTimeInterval = self.transitionDuration(transitionContext)
    UIView.animateWithDuration(duration * 0.5, animations: {
        self.animationImageView.frame = toRect
        }, completion: { (finished) in
            containerView.addSubview(toView)
            // 必须实现,如果不实现,你可以试试看,效果,很好玩的。。。。
            transitionContext.completeTransition(true)
    })
}

func animationEnded(transitionCompleted: Bool) {
    print("动画完成之后,执行的方法")
}
}

第三步:

打完收工,各位赶紧去浪吧。

ps: 代码中,返回转场动画,估计没写,有兴趣可以自己下载下来玩玩。

你可能感兴趣的:(浅谈转场动画(一))