iOS动画编程-View动画[ 3 ]Transitions动画

changfeng1050 发布于2019-06-25 14:38 / 3293人阅读

摘要：前言前几节中我们学习了改变控件位置透明度等属性实现的动画，然而如何通过动画的方式添加移除呢，这时我们需要用到动画示例添加一个新的通过这样一段代码，我们就将一个新的添加进了我们用到了这个方法看起来和标准的动画方法几乎一模一样，它的主要区别在于

前言

前几节中我们学习了改变控件位置/透明度等属性实现的动画，然而如何通过动画的方式添加/移除View呢，这时我们需要用到Transitions动画

transitions示例 添加一个新的view

var animationContainerView: UIView?
override func viewDidLoad() {
//set up the animation container animationContainerView = UIView(frame: view.bounds) animationContainerView!.frame = view.bounds view.addSubview(animationContainerView!)
}

override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
//create new view
let newView = UIImageView(image: UIImage(named: "banner")!) newView.center = animationContainerView!.center
//add the new view via transition
UIView.transitionWithView(animationContainerView!, duration: 0.33,
options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {
self.animationContainerView!.addSubview(newView) }, completion: nil)
}

通过这样一段代码，我们就将一个新的view添加进了self.animationContainerView
我们用到了
transitionWithView(_:duration: options:animations:completion:).
这个方法看起来和标准的UIView动画方法几乎一模一样，它的主要区别在于函数的option参数，比如例子中的.TransitionFlipFromBottom。正是这些参数决定了视图添加进来时的动画
下面是所有预设好的 transition animation options:

.TransitionFlipFromLeft

.TransitionFlipFromRight

.TransitionCurlUp

.TransitionCurlDown

.TransitionCrossDissolve

.TransitionFlipFromTop

.TransitionFlipFromBottom

移除一个view

//remove the view via transition
UIView.transitionWithView(animationContainerView!, duration: 0.33,
options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {
self.newView.removeFromSuperview() }, completion: nil)

与前例相似，我们在闭包里调用removeFromSuperview()移除了视图

隐藏/显示view

//hide the view via transition
UIView.transitionWithView(self.newView, duration: 0.33, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {
self.newView.hidden = true }, completion: nil)

对于hide属性的变化，不需要设置animationContainerView，我们将控件自身作为animationContainerView

以一个view取代其他view

//replace via transition
UIView.transitionFromView(self.oldView!, toView: self.newView!, duration: 0.33, options: [.TransitionFlipFromTop],
completion: nil)

我们使用transitionFromView方法，用newView替代了oldView

DEMO

我们继续上次做的登录界面

我们这次希望添加上如图的登录状态指示，并修改其内容，动画改变登录状态
首先我们在viewDidLoad方法中隐藏status，并将登录信息存储在一个Array中
随后我们写一个showMessage方法来展示状态

    /**
    展示登录状态
    
    - parameter index: Message数组的索引
    */
func showMessage(index index: Int) { label.text = messages[index]
UIView.transitionWithView(status, duration: 0.33, options: [.CurveEaseOut, .TransitionCurlDown], animations: {
self.status.hidden = false }, completion: {_ in
//transition completion
}) }

这个函数中我们通过transitionWithView(_:duration:options:animations: completion:) 方法，将状态添加进了视图中，我们使用的是TransitionCurlDown样式，效果如图

随后找到我们上次为LoginButton写的方法

animations: { self.loginButton.bounds.size.width += 80.0
}, completion: nil)

我们中completion闭包中调用我们的showMassage方法

completion: {_ in self.showMessage(index: 0)
}

Note:

如果觉得动画的速度点速度太快以至于没有看清楚，我们可以在模拟器中打开
Debug/Toggle Slow Animations in Frontmost App功能来减慢动画的执行速度，这样我们就可以方便的去调整我们的动画了

下一个动画中我们需要先去记录banner的位置，这样才能把下一个视图加入到合适的位置,添加一个变量statusPosition记录位置
var statusPosition = CGPoint.zero
在viewDidLoad的末尾添加statusPosition = status.center记录位置
接下来我们来实现消息的移除

    /**
    移除登录状态
    
    - parameter index: Message数组的索引
    */
func removeMessage(index index: Int) {
UIView.animateWithDuration(0.33, delay: 0.0, options: [], animations:
{
self.status.center.x += self.view.frame.size.width
}, completion: {_ in
//动画结束后移回原位并隐藏
self.status.hidden = true self.status.center = self.statusPosition
self.showMessage(index: index+1) })
}

这样我们很容易的结合了标准UIView动画与transitions动画，我们仅仅通过这些API和UIKit，在后台调用了响应的Core Animation元素
现在我们来完成showMessage和removeMessage的链条
找到showMessage方法中的注释//transition，替换为如下代码

delay(seconds: 2.0) {
if index < self.messages.count-1 {
self.removeMessage(index: index) } else {
//reset form
} }

＊delay函数为休眠当前线程2s，模拟网络连接延迟
这样我们已经实现了动画改变登录状态

总结

transition动画是UIView动画重要的一部分，也是在UIKit中唯一能实现3D效果动画的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/15897.html

iOS动画编程-View动画[ 4 ]高级View Animations

摘要：组合动画前几节中我们已经学习了基本的动画，其实我们已经可以通过这些技术的组合实现非常酷炫的效果了，这节我们不会涉及新的，一起来学习一下动画的组合背景图片的渐变效果背景图片的渐变效果在很多应用中都会遇到，其实利用前几节学习到的基本动画就可以做 View组合动画前几节中我们已经学习了基本的View动画，其实我们已经可以通过这些技术的组合实现非常酷炫的效果了，这节我们不会涉及新的API，一...

Nino 2019-06-25 14:40 评论0 收藏0
iOS 中的 Delayed Transition

摘要：的动画体系中存在一类由管理的动画这个方法很特殊执行此方法后其后续的变化不会立即作用到视图上而是等下一次更新周期到来时以动画的形式批量作用到视图上至少在我看来这种设定很新颖写法也很自然除此之外它能批量执行多个属性值变化的特性也让人眼前一亮动画 Android 的动画体系中,存在一类由 TransitionManager. beginDelayedTransition 管理的动画.这个方法...

linkin 2019-06-25 16:27 评论0 收藏0
iOS进阶

摘要：然而，副作用对于系统的可测试性来说就是一剂毒药，并且可能会因应用程序和请求的不同而出现差异性。这些事件并不具备特定时序性，甚至它们可能同时发生。粘性动画中，粘性小球会根据移动距离的大小拥有不同的弹性程度。 PPAsyncDrawingKit - 实现了一系列基础 UI 控件的轻量级 ASDK 一款轻量级的 ASDK，实现了一系列基础 UI 控件。 iOS 开发之 Runtime 常用示...

Cheng_Gang 2019-06-25 16:35 评论0 收藏0
iOS动画编程-Layer动画[ 3 ] Basic Layer Animations

摘要：动画编程动画期末考试这段时间再没有更新，过几天旅游回来多更几章介绍这节中主要介绍一些顾名思义属于动画中最简单的部分这里我们会通过将我们之前创建的登录页面的替换为来讲解第一个动画这里我们首先实现及用户名密码飞入屏幕的动画第一步移除中对它们位 iOS动画编程-Layer动画[ 3 ] Basic Layer Animations 期末考试这段时间再没有更新，过几天旅游回来多更几章介绍这...

sushi 2019-06-25 14:57 评论0 收藏0
iOS动画编程-View动画[ 1 ] 基础View动画

摘要：中的动画系统中的应用大多都灵活运用了各种各样的动画来让自己的应用变的丰富多彩，一个对动画的运用直接影响了用户体验，学习动画编程是非常有用的基础动画中提供了最基础的动画这里来演示一下最基础的几个这里来介绍一下各个参数的意义动画执行的时间动画开 iOS中的动画 iOS系统中的应用大多都灵活运用了各种各样的动画来让自己的应用变的丰富多彩，一个App对动画的运用直接影响了用户体验，学习iOS动...

Kosmos 2019-06-25 14:39 评论0 收藏0