深度页面转换UIView，Swift [英] depth page Transform on UIView,Swift

问题描述

如何创建深度页面转换动画（从上到下，从下到上），如

解决方案

我按照教程

如果您不想阅读整个教程，这里基本上是你要做的：

1。创建 TrasitionManager 类

  // 
 // TransitionManager .swift 
 // Aleph Retamal 
 // 
 //由Aleph Retamal于2015年4月19日创建。 
 //版权所有（c）2015 Aleph Retamal。版权所有。 
 // 
 
 import UIKit 
 
类TransitionManager：NSObject，UIViewControllerAnimatedTransitioning，UIViewControllerTransitioningDelegate {
 
 private var present：Bool = true 
 var leftSide：Bool = true 
 
 // MARK：UIViewControllerAnimatedTransitioning协议方法
 
 //动画从一个视图控制器到另一个视图控制器的变化
 func animateTransition（transitionContext： UIViewControllerContextTransitioning）{
 
 //引用我们的fromView，toView以及我们应该在
中执行转换的容器视图let container = transitionContext.containerView（）
 let fromView = transitionContext.viewForKey（UITransitionContextFromViewKey）！ 
让toView = transitionContext.viewForKey（UITransitionContextToViewKey）！ 
 
 
 let offScreenRight = CGAffineTransformConcat（CGAffineTransformMakeTranslation（container！.frame.width，0），CGAffineTransformMakeScale（0.1,0.1））
 let offScreenLeft = CGAffineTransformMakeTranslation（-container！.frame） .width，0）
 
 //启动屏幕右侧的toView 
 if！leftSide {
 if self.presenting {
 toView.transform = offScreenRight 
} else {
 toView.transform = offScreenLeft 
} 
} else {
 if self.presenting {
 toView.transform = offScreenLeft 
 } else {
 toView.transform = offScreenRight 
} 
} 
 
 //将两个视图添加到视图控制器
容器！.addSubview（toView） ）
容器！.addSubview（fromView）
 
 //获取动画的持续时间
 / /不要只输入'0.5s' - 之所以在下一个帖子
 //之前没有意义，但是现在重要的是遵循这个方法
 let duration = self.transitionDuration （transitionContext）
 
 //执行动画！ 
 //对于这个例子，只需从View和toView同时向左滑动
 //意味着fromView被推离屏幕而toView幻灯片进入视图
 //我们也使用块动画使用SpringWithDamping稍微反弹
 UIView.animateWithDuration（持续时间，动画：{（） - > Void in 
 if！self.leftSide {
 if self.presenting {
 fromView.transform = offScreenLeft 
} else {
 container！.sendSubviewToBack（fromView）
 fromView.transform = offScreenRight 
} 
} else {
 if self.presenting {
 fromView.transform = offScreenRight 
 container！.sendSubviewToBack（fromView）
} else {
 fromView.transform = offScreenLeft 
} 
} 
 
 toView.transform = CGAffineTransformIdentity 
}）{（已完成） - >无效
 //告诉我们的transitionContext对象我们已完成动画
 transitionContext.completeTransition（true）
} 
 
} 
 
 //返回过渡动画需要多少秒
 func transitionDuration（transitionContext：UIViewControllerContextTransitioning？） - > NSTimeInterval {
返回1.0 
} 
 
 // MARK：UIViewControllerTransitioningDelegate协议方法
 
 //在呈现viewcontroller时返回animataor 
 / / remmeber animator（或动画控制器）是任何对象，它们都是UIViewControllerAnimatedTransitioning协议
 func animationControllerForPresentedController（赠送：UIViewController，presentsController呈现：UIViewController，sourceController源：UIViewController） - > UIViewControllerAnimatedTransitioning？ {
 self.presenting = true 
 return self 
} 
 
 //返回从视图控制器中解除时使用的动画制作者
 func animationControllerForDismissedController（dismissed：UIViewController） ） - > UIViewControllerAnimatedTransitioning？ {
 self.presenting = false 
返回自我
} 
 
} 
  

这是您设置视图转换方式的地方

  let offScreenRight = CGAffineTransformConcat（CGAffineTransformMakeTranslation（ container！.frame.width，0），CGAffineTransformMakeScale（0.1,0.1））
 let offScreenLeft = CGAffineTransformMakeTranslation（-container！.frame.width，0）
  

在这种情况下，一个视图将翻译 + 缩放，而另一个视图仅翻译

2。在 ViewController中实例化 TransitionManager

  let transitionManager = TransitionManager（）
  

3。设置转移委托

 覆盖func prepareForSegue（segue：UIStoryboardSegue，sender：AnyObject？）{
 transitionManager.leftSide = false 
 let toViewController = segue.destinationViewController 
 toViewController.transitioningDelegate = self.transitionManager 
} 
  

如果您希望视图来自右侧， leftSide = false

  transitionManager.leftSide = false 
  

就是这样！

编辑：

为达到此效果：

这是项目的一个git： https://github.com/alaphao/indepth

使用约束来调整大小：

1. 创建2个视图，其父视图的宽度/高度相同




2. 对齐使用 CenterX




3. 设置距离底部的距离= 0并为约束创建出口




4. 创建 PanGestureRecognizer




5. 相应地为前视图底部约束设置动画 translationInView.y

how to create the depth page Transform animation (Top to bottom, bottom to Top) like this https://youtu.be/c2ccXwwmcnA . I searched in Google but I am not get any idea for how to Implement in iOS.

Sample Output Like this:

解决方案

I followed the tutorial Animated Transitions in Swift and I got this effect:

If you don't want to read the whole tutorial, here is basically what you have to do:

1. Create the TrasitionManager class

//
//  TransitionManager.swift
//  Aleph Retamal
//
//  Created by Aleph Retamal on 4/19/15.
//  Copyright (c) 2015 Aleph Retamal. All rights reserved.
//

import UIKit

class TransitionManager: NSObject, UIViewControllerAnimatedTransitioning, UIViewControllerTransitioningDelegate  {

    private var presenting:Bool = true
    var leftSide:Bool = true

    // MARK: UIViewControllerAnimatedTransitioning protocol methods

    // animate a change from one viewcontroller to another
    func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

        // get reference to our fromView, toView and the container view that we should perform the transition in
        let container = transitionContext.containerView()
        let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
        let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!


        let offScreenRight = CGAffineTransformConcat(CGAffineTransformMakeTranslation(container!.frame.width, 0), CGAffineTransformMakeScale(0.1, 0.1))
        let offScreenLeft = CGAffineTransformMakeTranslation(-container!.frame.width, 0)

        // start the toView to the right of the screen
        if !leftSide {
            if self.presenting {
                toView.transform = offScreenRight
            } else {
                toView.transform = offScreenLeft
            }
        } else {
            if self.presenting {
                toView.transform = offScreenLeft
            } else {
                toView.transform = offScreenRight
            }
        }

        // add the both views to our view controller
        container!.addSubview(toView)
        container!.addSubview(fromView)

        // get the duration of the animation
        // DON'T just type '0.5s' -- the reason why won't make sense until the next post
        // but for now it's important to just follow this approach
        let duration = self.transitionDuration(transitionContext)

        // perform the animation!
        // for this example, just slid both fromView and toView to the left at the same time
        // meaning fromView is pushed off the screen and toView slides into view
        // we also use the block animation usingSpringWithDamping for a little bounce
        UIView.animateWithDuration(duration, animations: { () -> Void in
            if !self.leftSide {
                if self.presenting {
                    fromView.transform = offScreenLeft
                } else {
                    container!.sendSubviewToBack(fromView)
                    fromView.transform = offScreenRight
                }
            } else {
                if self.presenting {
                    fromView.transform = offScreenRight
                    container!.sendSubviewToBack(fromView)
                } else {
                    fromView.transform = offScreenLeft
                }
            }

            toView.transform = CGAffineTransformIdentity
            }) { (finished) -> Void in
                // tell our transitionContext object that we've finished animating
                transitionContext.completeTransition(true)
        }

    }

    // return how many seconds the transiton animation will take
    func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
        return 1.0
    }

    // MARK: UIViewControllerTransitioningDelegate protocol methods

    // return the animataor when presenting a viewcontroller
    // remmeber that an animator (or animation controller) is any object that aheres to the UIViewControllerAnimatedTransitioning protocol
    func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        self.presenting = true
        return self
    }

    // return the animator used when dismissing from a viewcontroller
    func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        self.presenting = false
        return self
    }

}

This is where you set how the views should transform

let offScreenRight = CGAffineTransformConcat(CGAffineTransformMakeTranslation(container!.frame.width, 0), CGAffineTransformMakeScale(0.1, 0.1))
let offScreenLeft = CGAffineTransformMakeTranslation(-container!.frame.width, 0)

In this case, one view will Translate + Scale while the other one will only Translate

2. Instantiate the TransitionManager inside your ViewController

let transitionManager = TransitionManager()

3. Set the transition delegate

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    transitionManager.leftSide = false
    let toViewController = segue.destinationViewController
    toViewController.transitioningDelegate = self.transitionManager
}

If you want the view to come from the right, leftSide = false

transitionManager.leftSide = false

That's it!

Edit:

To achieve this effect:

Here's a git with the project: https://github.com/alaphao/indepth

Use constraints for alignment an sizing:

1. Create 2 views with same width / height of their parent view

2. Align both with CenterX

3. Set both distance from bottom = 0 and create an outlet for the constraints

4. Create a PanGestureRecognizer

5. Animate the front view bottom constraint accordingly to the pan translationInView.y

这篇关于深度页面转换UIView，Swift的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！