资讯专栏INFORMATION COLUMN

iOS动画编程-AutoLayout动画[ 5 ] Animating dynamically cr

Rocko / 397人阅读

摘要:前段时间考试,没有来得及写文,最近会抽时间把部分写完介绍这一节中,我们将利用本节所学的内容,创建一个新的,添加约束并显示出来函数将在我们点击的时候显示出来一个新的,实现如下效果在方法中加入如下代码来创建一个新的在上面的代码中,我们加载了一张

前段时间考试,没有来得及写文,最近会抽时间把Animation部分写完

介绍

这一节中,我们将利用本节所学的内容,创建一个新的View,添加约束并显示出来
showItem(_:)函数将在我们点击TableViewRow的时候显示出来一个新的View,实现如下效果:

Add the following code to showItem(_:) to create an image view out of the selected image:
在方法中加入如下代码来创建一个新的View

    let imageView = UIImageView(image:
    UIImage(named: "summericons_100px_0(index).png"))
    imageView.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.5)
    imageView.layer.cornerRadius = 5.0 
    imageView.layer.masksToBounds = true
    imageView.translatesAutoresizingMaskIntoConstraints = false 
    view.addSubview(imageView)

在上面的代码中,我们加载了一张图片,创建了一个新的ImageView,修改了圆角并设置了背景,注意,我们没有设置这个控件在父视图的位置。
接下来我们将通过代码对这个ImageView设置一个个约束:

let conX = imageView.centerXAnchor.constraintEqualToAnchor( view.centerXAnchor)

这里使用了NSLayoutAnchor这个类,这个类允许我们使用很简单的方法创建约束,这里我们创建了ImageView X中心与主View X中心位置之间的约束

    let conBottom = imageView.bottomAnchor.constraintEqualToAnchor( 
    view.bottomAnchor, constant: imageView.frame.height)
    let conWidth = imageView.widthAnchor.constraintEqualToAnchor( view.widthAnchor,
    multiplier: 0.33,
    constant: -50.0)
    let conHeight = imageView.heightAnchor.constraintEqualToAnchor( imageView.widthAnchor)
    //使约束生效
    NSLayoutConstraint.activateConstraints([conX, conBottom, conWidth, conHeight])

这步完成之后,我们的新视图就已经出现在屏幕下方了接下来我们用动画把它移到屏幕中央

Adding additional dynamic animations

接下来我们通过约束调整视图在Y轴方向的位置

    UIView.animateWithDuration(0.8, delay: 0.0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.0, options: [], animations: {
    conBottom.constant = -imageView.frame.size.height/2 conWidth.constant = 0.0
    //使约束生效
    self.view.layoutIfNeeded()
    }, completion: nil)

运行一下,我们发现图片从屏幕的左上角飞到屏幕中央,这是为什么呢
思考一下: 你添加了一个新的View,设置了一些约束,然后使这些约束动态的设置来改变布局,然而这个View的默认位置在左上角(0,0)处 ,它没有机会去应用这些约束,直到你在动画必报中调用,为了解决这个问题,我们应该在动画前将设置初始位置的约束生效:
在动画闭包前先调用一次layoutIfNeeded()

移除视图

我们可以在动画的完成闭包里延迟1s并移除imageView

//尾挂闭包
    { (_) -> Void in
                UIView.animateWithDuration(0.8, delay: 1, options: [], animations: { () -> Void in
                    conBottom.constant += self.view.frame.size.height/2
                    self.view.layoutIfNeeded()
                    }){(_)-> Void in
                        self.view.willRemoveSubview(imageView)
                }
        }

最终效果

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

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

相关文章

  • iOS动画编程-AutoLayout动画[ 1 ]Animating Constraints

    摘要:简介自动布局功能随着的发布横空出世,现在已经成为了机型适配最佳的解决方案之一。由于自动布局的特点,对于使用自动布局功能的视图,我们不能再像之前一样去操作它的等属性,我们通过对布局约束的操作来代替之前的方法来实现动画。 简介 AutoLayout自动布局功能随着iOS6的发布横空出世,现在已经成为了iOS机型适配最佳的解决方案之一。由于自动布局的特点,对于使用自动布局功能的视图,我们不能...

    sihai 评论0 收藏0
  • iOS动画编程-AutoLayout动画[ 3 ] Animating by replacing c

    介绍 之前的几节中,我们都是通过修改一个约束的值来实现动画的。但是如果你想做的更多,你可能需要删除旧的约束并添加新的约束 删除约束 在IB中,我们可以为每一个约束注册一个identifiershowImg(https://segmentfault.com/img/bVqExV);showImg(https://segmentfault.com/img/bVqExY);showImg(https:/...

    miya 评论0 收藏0
  • iOS动画编程-AutoLayout动画[ 2 ]Inspecting and animating

    摘要:介绍通过可视化方法,使用来控制约束,实现动画确实非常方便也非常容易,但是有时你不可能把上所有元素都做,这会有巨大的工程量。也许你希望通过代码来增减调整约束由于这些原因,你将需要在运行时检查已存在的约束,并且用代码让它们动起来。 介绍 通过可视化方法,使用outlets来控制约束,实现动画确实非常方便也非常容易,但是有时你不可能把UI上所有元素都做outlet,这会有巨大的工程量。也许你...

    ad6623 评论0 收藏0
  • Coder Essential之客户端知识索引(iOS/Android/Web)

    摘要:本文主要面向笔者在等移动端开发中的经验总结出在现有以及未来的所有客户端的学习中应该掌握的知识脉络图。它表示的是一种常见的客户端软件开发框架。部分放在这边是因为它是一套从开始到后面响应中的完整的机制,以中的中的以及中的为典型代表。 [TOC] 本文主要面向笔者在Web、iOS、Android、WP等移动端开发中的经验总结出在现有以及未来的所有客户端的学习中应该掌握的知识脉络图。通俗来说,...

    AlienZHOU 评论0 收藏0
  • Coder Essential之客户端知识索引(iOS/Android/Web)

    摘要:本文主要面向笔者在等移动端开发中的经验总结出在现有以及未来的所有客户端的学习中应该掌握的知识脉络图。它表示的是一种常见的客户端软件开发框架。部分放在这边是因为它是一套从开始到后面响应中的完整的机制,以中的中的以及中的为典型代表。 [TOC] 本文主要面向笔者在Web、iOS、Android、WP等移动端开发中的经验总结出在现有以及未来的所有客户端的学习中应该掌握的知识脉络图。通俗来说,...

    renweihub 评论0 收藏0

发表评论

0条评论

Rocko

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<