深度页面转换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
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
使用约束来调整大小:
-
创建2个视图,其父视图的宽度/高度相同
-
对齐使用
CenterX
-
设置距离底部的距离= 0并为约束创建出口
-
创建
PanGestureRecognizer
-
相应地为前视图底部约束设置动画
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:
Create 2 views with same width / height of their parent view
Align both with
CenterX
Set both distance from bottom = 0 and create an outlet for the constraints
Create a
PanGestureRecognizer
Animate the front view bottom constraint accordingly to the pan
translationInView.y
这篇关于深度页面转换UIView,Swift的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!