在我作为iOS开发人员的几年中开发多个应用程序时,我被要求不止一次地在屏幕之间进行与iOS系统默认过渡提供的不同的自定义过渡。
在本文中,我将显示iOS系统给我们的基本过渡,以及在UIViewController
之间移动时如何创建自己的自定义过渡。
默认过渡
想象以下情况,我们在屏幕上有一个按钮,当用户点击按钮另一个带有全屏红色背景的屏幕时。
红色背景UIViewController
将覆盖从下到顶部的当前UIViewController
,这是默认的iOS过渡,它称为.coverVertical
。
要从另一个UIViewController
提出一个UIViewController
,我们可以使用以下代码:
let redViewController = UIStoryboard(name: "Main", bundle: nil)
.instantiateViewController(identifier: "redViewController")
redViewController.modalPresentationStyle = .fullScreen
self.present(redViewController, animated: true)
如前所述,让我们查看所有过渡选项iOS系统给我们:
-
.coverVertical
�这是iOS系统给我们的默认行为,呈现的UIViewController
涵盖了从下到顶部的UIViewController
。 -
.flipHorizontal
水平翻转呈现的UIViewController
并在另一侧呈现新的UIViewController
。 -
.crossDissolve
- 淡入呈现的UIViewController
到呈现的UIViewController
。 -
.partialCurl
`将呈现的UIViewController
翻转到呈现的uiviewController上,就像书中的页面一样。 如何使用与coverVertical
不同的iOS默认过渡的一个示例:
func openRedViewController() {
let redViewController = UIStoryboard(name: "Main", bundle: nil)
.instantiateViewController(identifier: "redViewController")
redViewController.modalPresentationStyle = .fullScreen
redViewController.modalTransitionStyle = .partialCurl
self.present(redViewController, animated: true)
}
我们将.modalTransitionStyle
添加到我们的UIViewController
并将其属性设置为.partialCurl
,所以现在我们没有得到coverVertical
过渡,而是paritalCurl
。
这四个过渡是iOS系统给我们的基本过渡,但是如果我们想要更多呢?如果我们想要不同的过渡怎么办?如果我们想控制速度,时机,对齐等等怎么办?我们该怎么做?
以下代码向我们展示了如何创建从右到左的推动过渡:
func createPushRightToLeftTransition() -> CATransition {
let transition: CATransition = CATransition()
transition.startProgress = 0.0
transition.endProgress = 1.0
transition.type = .push
transition.subtype = .fromRight
transition.duration = 0.3
return transition
}
首先,我们创建一个类型的对象,该对象将包含实现我们想要的过渡所需的所有属性:
-
startProgress
指示接收器的起点是整个过渡的一部分。 EndProgress表示接收器的端点是整个过渡的一部分。 -
type — the name of the transition, multiple options we have here: fade, moveIn, push and reveal. Default
imimalim。 -
subtype
- 过渡的可选亚型。用于指定基于运动的过渡的过渡方向,值:fromLeft
,fromRight
,fromTop
,fromBottom
。 -
duration
–过渡的基本持续时间。 (秒) 我们只是创建了我们的过渡对象,但是我们如何使用它?让我们看以下代码:
`
Func OpenRedViewController(){
令redviewController = UistoryBoard(名称:“ Main”,Bundle:Nil)
.instantiateViewController(标识符:“ RedViewController”)
让过渡= CreatePushRightToleftTransition()
self.view.window?.layer.add(过渡,forkey:“ kcatransition”)
self.present(redviewController,anistated:false)
}
Again, as we have seen before we are creating our `redViewController` object, but there are two main changes here so we can use our custom transition.
- We added a new line, on the view.window` where we add to its layer our custom transition.
when we call `self.present` we have to set the animated parameter to false.
- Those two conditions will allow us to use our custom transition, once we call this function the `redViewController` will be pushed from right to left in 0.3 seconds.
Let’s see another example of a custom transition, this time we are going to create a fade transition, where the presenting `UIViewController` fade out and the presented `UIViewController` fades in:
func createfadetransition() - > catransition {
让过渡:catransition = catransition()
transition.type = .fade
transition.duration = 0.75
返回过渡
}
As we did before, we create our `CATransition` object, but this time we use fade as our type for the transition, we then set the duration to 0.75 seconds.
As same as we did before with presenting a `UIViewController` with a custom transition, we can do the same when want to dismiss a `UIViewController`, take a look at the following code snippet:
func dimpriveViewController(){
让过渡= createFadeTransition()
self.view.window?.layer.add(过渡,forkey:“ kcatransition”)
self.dismiss(动画:false,完成:nil)
}
Important to remember here is to set the animated property for the dismiss function to false otherwise, our custom transition will not work.
## Conclusion
CATransition object is great to create different and custom transitions. we have a variety of types and subtypes with can use to create many custom transitions, we can also set the duration of the transition, the start point, and the endpoint.
For more reading about custom transitions please click [here](https://developer.apple.com/documentation/quartzcore/catransition).