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 ;)

ImageView以淡入淡出的方式切换显示的图片

效果如下图,ImageView在我们提供的一组图片中不断以淡入淡出的动画切换显示。实现起来也很简单,主要用到的就是线程,每隔一个特定时间切换下一张图片。这里我们直接自定义一个ImageView,在里面...
  • a2810459655
  • a2810459655
  • 2016年06月05日 14:16
  • 1411

自定义ImageView实现播放帧动画

对于帧动画的显示有多种不同的实现方式,帧动画的图片有两种不同的情形,一种是多个单张图片,放在animation-list对应的xml里面,采用轮播的方式进行;另一种是一张大图片排列不同的小图片,之前实...
  • xutao3716
  • xutao3716
  • 2015年10月26日 17:23
  • 1782

UIKit框架解读

简介: UIKitk框架提供一系列的Class(类)来建立和管理iPhone OS应用程序的用户界面( UI )接口、应用程序对象、事件控制、绘图模型、窗口、视图和用于控制触摸屏等的接口。(PS1: ...
  • gang544043963
  • gang544043963
  • 2016年05月17日 09:51
  • 588

Android实现ImageView的旋转动画

本文主要介绍如何使用RotatationAnimation和ObjectionAnimation实现ImageView不同旋转的动画。...
  • coralline_xss
  • coralline_xss
  • 2015年12月29日 16:53
  • 11864

用UIImageView自带方法实现简单动画

UIImageView有一组关于动画的方法/参数,可以实现简单的动画。 然而这种方法是个鸡肋,占资源,效果不咋地,无法实现细腻的、动态的动画;而且,还有更好的替代方式,比如直接播放gif动画,简单方便...
  • lixing333
  • lixing333
  • 2015年08月10日 22:22
  • 3135

Android PowerImageView实现,可以播放动画的强大ImageView

我个人是比较喜欢逛贴吧的,贴吧里总是会有很多搞笑的动态图片,经常看一看就会感觉欢乐很多,可以释放掉不少平时的压力。确实,比起一张单调的图片,动态图片明显更加的有意思。一般动态图片都是GIF格式的,浏览...
  • sinyu890807
  • sinyu890807
  • 2013年10月25日 08:36
  • 45422

为Vue2集成UIkit

Vue只是为我们提供了一个很优秀的前端组件式开发框架,但单纯依靠Vue是做不出一个漂亮的网页应用的,甚至连“不难看”这个标准都达不到。这个时候借助界面框架UIkit能够很好地解决这一问题。 本文出自...
  • broadview2006
  • broadview2006
  • 2017年04月26日 10:43
  • 2521

ImageView图片不变形

ImageView的scaleType的属性有好几种,分别是matrix(默认)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fi...
  • chazihong
  • chazihong
  • 2017年08月08日 20:46
  • 512

关于ImageView的scaleType理解(播放动画)

关于ImageView的scaleType理解 关于Imageview的scaleType的理解,网上有太多的实例和解释,不过,都是就介绍了 它的使用效果,最新产品有个需求,要实现图片内容的放...
  • longwanglidfdfdf
  • longwanglidfdfdf
  • 2016年02月26日 15:08
  • 563

UIKit视图动画的微扩展

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 好久没写blog了,还不快快写来… ;]我们知道在UIK...
  • mydo
  • mydo
  • 2016年05月28日 18:12
  • 4370
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UIKit中ImageView动画堆叠显示的微调整
举报原因:
原因补充:

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