UIKit中ImageView动画堆叠显示的微调整

原创 2016年05月30日 18:20:46

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.
如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;)


网上看到一个PackingList项目(如果需要源代码可以Q我,或自行在网上搜索下载),用来演示UIKit的各种动画效果,尤其是对自动布局(auto layout)限制产生的动画,运行看一下效果还不错:

这里写图片描述

如上动画显示,不过,如果你耐心看到最后几个操作,就会发现快速连续点击TableView中的行时会发生图片缩略图发生重叠的现象.

因为代码中每次点击TableView的行就会放大显示对应图片的缩略图,在延时1s后将其移除屏幕.如果你连续点击行的速度小于1s,则就会发生新缩略图和前一个缩略图发生稍许重叠的情况.

虽然本猫不是处女座,但是这细微的瑕疵必须得以清除 ;]

我们来看看如何修改源代码已达到更好的效果.

首先在ViewController.swift中添加2个实例变量:

var imageView:UIImageView!
var isImageViewRemoved = false

第一个用来存放最后一个显示缩略图对应的ImageView,后面一个用来检查是否旧的缩略图已经被删除了.

接着我们微修类中的showItem(_)方法:

@available(iOS 9.0, *)
    func showItem(index: Int) {
    print("tapped item \(index)")
        //add new
        if imageView != nil{
            imageView.removeFromSuperview()
            imageView = nil
            isImageViewRemoved = true
        }

    //let imageView = UIImageView(image: UIImage(named: "summericons_100px_0\(index).png"))
    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)

    let conX = imageView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor)
    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])

        view.layoutIfNeeded()

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

        UIView.animateWithDuration(0.8, delay: 1.0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.0, options: [], animations: {
                conBottom.constant = self.imageView.frame.size.height
                conWidth.constant = -50.0
                self.view.layoutIfNeeded()
            }){_ in
                if !self.isImageViewRemoved{
                    self.imageView.removeFromSuperview()
                    self.imageView = nil
                }

            }
  }

我们首先在方法开头添加了旧缩略图是否显示的判断,如果是则将其删除,并将isImageViewRemoved设置为true,这是为了在后面动画的completion中不会出错!

然后我们将动画闭包内的imageView相关的变量开头都加上self,这是为了满足挑剔的编译器.

最后修改最后一个动画的completion,在其中添加如上代码:

if !self.isImageViewRemoved{
                    self.imageView.removeFromSuperview()
                    self.imageView = nil
                }

编译运行App,现在效果如下:

这里写图片描述

现在赶脚好多了 ;]

注意上述演示是在竖屏状态下运行的,因为App使用了auto layout,所以无论是横屏还是竖屏,无论是iPhone4s还是iPad pro效果都是一样的.

版权声明:大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.谢谢! hopy ;)

相关文章推荐

UIKit视图动画的微扩展

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 好久没写blog了,还不快快写来… ;]我们知道在UIK...
  • mydo
  • mydo
  • 2016-05-28 18:12
  • 4312

[C] 老鼠走迷宫(使用回圈+堆叠)

这是最近看到的一个小题目,以C语言来实作练练手。 题目叙述: 设计一个程式,读入文件中的迷宫地图数据,然后利用回圈或递回函数在迷宫中行进。 并且使用堆叠(或堆栈、stack)记录走过的分岔路口座标...

交换机堆叠技术

首先,为什么需要“堆叠”呢?前面我们提到过,交换机的级连个数不得超过 7 个,举一个很简单的例子,一个 200 节点的网络,如果使用普通 24 口交换机级连几乎无法实现,因为 24 个端口乘以 7 台...

自由堆叠的屋顶——线段树的应用

自由堆叠的屋顶 时间限制(普通/Java) : 1000 MS/ 3000 MS          运行内存限制 : 65536 KByte 总提交 : 109      ...

自定义ViewGroup-堆叠头像的点赞Layout

简介这样的点赞列表怎么样?之前做社区的时候也有类似的点赞列表,但是没有这样重叠,一个小小的改变,个人感觉逼格提高不少。这个很有规则,就是后一个头像会覆盖一部分到前一个头像上,头像多了就像一串糖葫芦了。...

AstroNova堆叠式数据采集系统DAXUS

AstroNova堆叠式数据采集系统DAXUS         美国AstroNova公司的堆叠式数据采集系统是一款非常小巧便捷,却又功能强大的数据采集设备。它可以单独使用,也可以多台堆叠来...

iOS9新特性——堆叠视图UIStackView(2)

UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到StackView的视图,你不用再添加自动布局的约束了。Stack View管理这些子视图的布局,并帮你自动布局约束。...

PADS导入DXF结构【样条曲线不能导入】【 多线段和并】【导出DXF(堆叠)文件】【问题:pads 不能将此dxf文件添加到原点】

PADS layout中导入结构图步骤如下: 在上面的步骤中也可以把结构图导到其他的图层中,只要稍微一改就行了,这里如果DXF中有样条曲线,则PADS中很有可能看不到这些样条曲线,这时候先要把样条曲...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)