全球领先的IT技术网站 |首页 |Tags |网站地图

来吧程序猿_新闻资讯

RSS

您现在正在浏览:首页 » 新闻资讯 » 开发 » 【移动开发】iOS UIView动画实践(四):过渡与伪3D动画

【移动开发】iOS UIView动画实践(四):过渡与伪3D动画

摘要:本文为iOS UIView动画实践系列第四篇。作者以一个展示航班信息的应用来对移动位置、改变大小、旋转、弹簧动画、过渡动画进行实战,并详细介绍了伪3D动画以及示例动画演练。

 

前言

上三篇关于UIView Animation的文章向大家介绍了基础的UIView动画,包括移动位置、改变大小、旋转、弹簧动画、过渡动画。这些虽然看起来很简单,但是如果我们仔细分析、分解一个复杂动画时,就会发现这些复杂的动画其实是由若干基础的动画组合而成的。今天这篇文章是实践篇,我选择了Raywenderlich Top 5 iOS 7 Animations这篇文章中的一个动画效果,带大家一起实现。要实现这个动画效果,除了用到我们上三篇介绍过的知识点以外,还有两个知识点在这篇会介绍给大家,我们先看看实现的效果:

这个动画示例实现的是一个展示航班信息的应用,左右滑动显示不同的航班信息。我们可以分析一下都用到了哪些动画:

  • 淡入淡出:起飞地和目的地、起飞地和目的地下面的横线、底部的航班时间都使用了该动画。
  • 位置移动:起飞地和目的地、小飞机都使用了该动画。
  • 旋转:航站楼登机口前面的小箭头、小飞机都使用了该动画。
  • 过渡动画: 背景图片使用了淡入淡出效果的图片替换过渡动画。
  • 伪3D动画:顶部的时间、航班号、航站楼登机口信息、底部的起飞降落文字都是用了该动画。

前三个动画我们之前已经介绍过了,现在我们来介绍后两个动画。

伪3D动画效果

这个伪3D的效果模拟的是一个立体长方形由一面翻转到另一面。因为这不是真正的3D效果,所以我们可以分析一下它是如何模拟的,以上面动画中从下往上翻的效果为例。首先显示的是一个UILabel,当开始进行翻转时,当前显示的UILabel的高度开始慢慢变矮:

Practice-1

我们看看用代码怎么实现:

 

[cpp] view plaincopy
 
  1. UIView.animateWithDuration(1, animations: {  
  2.     self.devtalkingLabel.transform = CGAffineTransformMakeScale(1.0, 0.5)  
  3. })  

 

我们可以使用一个转换动画,使用CGAffineTransformMakeScale,它的第一个参数是x坐标的比例,第二个参数是y坐标的比例,这两个值的范围是1.0到0之间。上面的代码用白话文翻译出来就是在1秒内,devtalkingLabel的宽度不变,高度减少一半,减少的过程会自动生成补间动画。

我们接着来分析,在UILabel高度减少的同时,它的位置也会向上移动,我们可以用另外一个转换的动画:

 

[cpp] view plaincopy
 
  1. UIView.animateWithDuration(1, animations: {  
  2.     self.devtalkingLabel.transform = CGAffineTransformMakeScale(1.0, 0.5)  
  3.     self.devtalkingLabel.transform = CGAffineTransformMakeTranslation(1.0, -self.devtalkingLabel.frame.height / 2)  
  4. })  

 

CGFffineTransformMakeTranslation这个转换动画可以移动UIView的位置,这里需要注意它是以初始位置为基础进行移动的,所以上述代码在字面上的意思是devtalkingLabel在高度变小的同时向上移动它初始宽度一半的距离:

Practice-2

但是当我们编译运行后发现事与愿违,转换动画不像动画属性动画那样可以在animations闭包中写多个进行组合,而是由另一个组合转换动画来实现:

 

[cpp] view plaincopy
 
  1. UIView.animateWithDuration(1, animations: {  
  2.     self.devtalkingLabel.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1.0, 0.5), CGAffineTransformMakeTranslation(1.0, -self.devtalkingLabel.frame.height / 2))  
  3.     self.devtalkingLabel.alpha = 0  
  4. })  

 

来看看效果:

Practice-4

此时,3D翻转效果的一个面已经成型了,也就是当前显示的这一面被向上翻转到顶部去了。接下来我们要实现底部的面翻转到当前显示的这一面。很明显这需要两个面,但我们只有一个UILabel,所以在执行整个翻转效果前需要先复制一个当前UILabel

 

[cpp] view plaincopy
 
  1. let devtalkingLabelCopy = UILabel(frame: self.devtalkingLabel.frame)  
  2. devtalkingLabelCopy.alpha = 0  
  3. devtalkingLabelCopy.text = self.devtalkingLabel.text  
  4. devtalkingLabelCopy.font = self.devtalkingLabel.font  
  5. devtalkingLabelCopy.textAlignment = self.devtalkingLabel.textAlignment  
  6. devtalkingLabelCopy.textColor = self.devtalkingLabel.textColor  
  7. devtalkingLabelCopy.backgroundColor = UIColor.clearColor()  

 

这样我们就复制了一个devtalkingLabel,这个复制品将作为底部的那一面,而且在一开始它的透明度是零,因为底面是看不到的。我们可以想象一下底面向上翻转的效果,其实就是底面的高度从很小慢慢变大,位置从下慢慢向上移动,然后有一个淡入的效果,所以我们在复制出devtalkingLabelCopy后,要调整它的高度和位置,然后添加到父视图中:

 

[cpp] view plaincopy
 
  1. devtalkingLabelCopy.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1.0, 0.1), CGAffineTransformMakeTranslation(1.0, self.devtalkingLabel.frame.height / 2))  
  2. self.view.addSubview(devtalkingLabelCopy)  

 

上述代码将devtalkingLabelCopy的高度减小到原本的十分之一,位置向下移动半个高度的位置,然后在之前的animateWithDuration方法的animations闭包中添加如下两行代码:

 

[cpp] view plaincopy
 
  1. devtalkingLabelCopy.alpha = 1  
  2. devtalkingLabelCopy.transform = CGAffineTransformIdentity  

 

CGAffineTransformIdentity的作用是将UIViewtransform恢复到初始状态,然后将透明度设为1。编译运行代码我们会看到devtalkingLabel的高度会慢慢变小,位置慢慢上移,最后淡出,devtalkingLabelCopy的高度慢慢变大,位置慢慢上移,最后淡入,整个效果看上去就像一个长方体在向上翻转,达到3D的效果:

Practice-5

替换UIView过渡动画

在要实现的动画示例中,背景图做了淡入淡出的图片替换过渡动画,这个动画很简单,我们来看看这段伪代码:

 

UIView.transitionWithView(backgroundImageView, duration: 2, options: .TransitionCrossDissolve, animations: {
    backgroundImageView.image = UIImage(named: "imageName")
}, completion: nil)

 

这个方法在上一篇文章中已经介绍过,我们只需要设置动画选项为.TransitionCrossDissolve,在animations闭包中给目标UIImageView设置要过渡的图片即可。

示例动画

至此,示例动画中用到的动画知识点都向大家介绍过了,在这一节我会将示例动画中主要的效果的伪代码贴出来给大家说说。关于左右滑动的手势以及PageControl在这里就不在累赘了。

数据源

为了方便,我们创建一个Flight.plist文件作为数据源:

Practice-6

我们定义一个延迟加载的属性flight

 

lazy var flight: NSArray = {
    let path = NSBundle.mainBundle().pathForResource("Flight", ofType: "plist")
    return NSArray(contentsOfFile: path!)!
}()

 

背景图片过渡

 

UIView.transitionWithView(self.backgroundImageView, duration: 2, options: .TransitionCrossDissolve, animations: {
    self.backgroundImageView.image = UIImage(named: flightItem["bg"] as! String)
}, completion: nil)

 

上一节刚介绍过,只是这里图片名称是从数据源中获取的。

3D翻转

因为有3D翻转动画效果的UIView比较多,而且有UILabel也有UIImageView,所以我们可以提炼成一个方法,将目标UIView和数据源作为参数:

 

func cubeAnimate(targetView: UIView, flightInfo: String) {
    // 判断UIView的具体实现类
    if targetView.isKindOfClass(UILabel) {
        let virtualTargetView = targetView as! UILabel
        // 复制UIView,作为底面
        let viewCopy = UILabel(frame: virtualTargetView.frame)
        viewCopy.alpha = 0
        viewCopy.text = flightInfo
        viewCopy.font = virtualTargetView.font
        viewCopy.textAlignment = virtualTargetView.textAlignment
        viewCopy.textColor = virtualTargetView.textColor
        viewCopy.backgroundColor = UIColor.clearColor()
        // 设置底面UIView的初始位置和高度
        viewCopy.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1.0, 0.1), CGAffineTransformMakeTranslation(1.0, viewCopy.frame.height / 2))
        self.topView.addSubview(viewCopy)
        UIView.animateWithDuration(2, animations: {
            // 执行UIView和UIViewCopy的动画
            virtualTargetView.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1.0, 0.1), CGAffineTransformMakeTranslation(1.0, -virtualTargetView.frame.height / 2))
            virtualTargetView.alpha = 0
            viewCopy.alpha = 1
            viewCopy.transform = CGAffineTransformIdentity
        }, completion: { _ in
            // 当动画执行完毕后,将UIViewCopy的信息赋值给UIView,并还原UIView的状态,即与UIViewCopy相同的状态,然后移除UIViewCopy
            virtualTargetView.alpha = 1
            virtualTargetView.text = viewCopy.text
            virtualTargetView.transform = CGAffineTransformIdentity
            viewCopy.removeFromSuperview()
        })
     } else if targetView.isKindOfClass(UIImageView) {
         let virtualTargetView = targetView as! UIImageView
         let viewCopy = UIImageView(frame: virtualTargetView.frame)
         viewCopy.alpha = 0
         viewCopy.image = UIImage(named: flightInfo)
         viewCopy.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1.0, 0.1), CGAffineTransformMakeTranslation(1.0, viewCopy.frame.height / 2))
         self.topView.addSubview(viewCopy)
         UIView.animateWithDuration(2, animations: {
             virtualTargetView.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1.0, 0.1), CGAffineTransformMakeTranslation(1.0, -virtualTargetView.frame.height / 2))
             virtualTargetView.alpha = 0
             viewCopy.alpha = 1
             viewCopy.transform = CGAffineTransformIdentity
         }, completion: { _ in
             virtualTargetView.alpha = 1
             virtualTargetView.image = viewCopy.image
             virtualTargetView.transform = CGAffineTransformIdentity
             viewCopy.removeFromSuperview()
         })
     }
}

 

具体有这么几个步骤:

  • 判断UIView的具体实现类,判断是UILabel还是UIImageView
  • 复制一份UIView,作为底面。
  • 设置UIViewCopy的初始位置和高度。
  • 执行UIViewUIViewCopy`的动画。
  • 当动画执行完毕后,将UIViewCopy的信息赋值给UIView,并还原UIView的状态,即与UIViewCopy相同的状态,然后移除UIViewCopy

小箭头旋转动画

因为航班信息有已降落和即将起飞两种状态,所以小箭头旋转涉及到一个方向问题,我们可以先定义一个枚举类型:

 

enum RotateDirection: Int {
    case Positive = 1
    case Negative = -1
}

 

然后写一个箭头旋转的方法:

 

func rotateAnimate(direction: Int) {
   UIView.animateWithDuration(2, animations: {
       // 判断向上还是向下旋转
       if RotateDirection.Positive.rawValue == direction {
           // 在这个示例中小箭头的初始状态是飞机已降落状态,所以想要箭头从起飞状态旋转到降落状态,只要恢复初始状态即可
           self.landedOrDepatureSmallArrowImageView.transform = CGAffineTransformIdentity
       } else {
           // 向上旋转
           let rotation = CGAffineTransformMakeRotation(CGFloat(RotateDirection.Negative.rawValue) * CGFloat(M_PI_2))
           self.landedOrDepatureSmallArrowImageView.transform = rotation
       }
    }, completion: nil)
}

 

给大家解释一下上述方法的几个步骤:

  • 首先判断旋转的方向,通过传入的direction参数。
  • 如果判断出是降落状态的箭头,也就是向下旋转的箭头,那么我们只需要将landedOrDepatureSmallArrowImageViewtransform属性恢复初始值即可,因为在这个示例中小箭头的初始状态就是飞机降落状态。
  • 向上旋转时创建一个CGAffineTransformMakeRotation,然后设置正确地方向和角度即可。

注:CGAffineTransformMakeRotation转换每次都是以初始位置为准,CGAffineTransformRotation转换是以每次的旋转位置为准。

地点和飞机动画

起飞地、目的地、飞机的动画是一个组合动画,因为这里面存在飞机出现和消失,以及旋转的时机问题,我们来看看这个方法:

 

func placeAndAirplaneAnimate(flightItem: NSDictionary) {
    UIView.animateWithDuration(1, delay: 0, options: [], animations: {
        // 将起飞地向上移动,同时淡出
        self.targetPlace.center.y += 100
        self.targetPlace.alpha = 0
        // 将目的地向下移动,同时淡出
        self.sourcePlace.center.y -= 100
        self.sourcePlace.alpha = 0
        // 将飞机向右移出屏幕
        self.airplaneImageView.center.x += self.view.bounds.width / 1.5
        }, completion: { _ in
            // 根据传入的数据源更改起飞地和目的地
            self.targetPlace.text = flightItem["targetPlace"] as? String
            self.sourcePlace.text = flightItem["sourcePlace"] as? String
            // 将飞机移到屏幕左侧外,这里没有补间动画
            self.airplaneImageView.center.x -= self.view.bounds.width * 1.5
            // 将飞机向上旋转一个角度,这里没有补间动画
            self.airplaneImageView.transform = CGAffineTransformMakeRotation(-3.14/10)
            UIView.animateWithDuration(1.0, animations: {
                // 将起飞地向下移动,也就是恢复到初始位值,同时淡入
                self.targetPlace.center.y -= 100
                self.targetPlace.alpha = 1
                // 将目的地向上移动,也就是恢复到初始位值,同时淡入
                self.sourcePlace.center.y += 100
                self.sourcePlace.alpha = 1
                // 将飞机移动到初始位置
                self.airplaneImageView.center = self.airplaneImageViewOriginalCenter
            })
            UIView.animateWithDuration(0.7, delay: 0.5, options: [], animations: {
                // 将飞机的角度恢复到初始状态
                self.airplaneImageView.transform = CGAffineTransformIdentity
            }, completion: nil)
    })
}

 

刨析一下这个方法:

  • 首先是起飞地向上移动同时淡出、目的地向下移动同时淡出、将飞机向右移出屏幕,这些动画属性的改变会产生补间动画。
  • 然后,当上面这些动画结束后,根据数据源参数更改起飞地和目的地的值,同时将飞机移动屏幕左侧外并向上旋转一个角度,这些属性的改变是不会产生补间动画的,应为它们在completion闭包中。
  • 最后再使用两个动画方法将起飞地向下移动,也就是恢复到初始位值同时淡入,将目的地向上移动,也就是恢复到初始位值同时淡入,将飞机移动到初始位置,将飞机的角度恢复到初始状态。这里为什么不把恢复飞机角度和恢复位置放在一个动画方法里呢?因为恢复飞机角度需要一个延迟时间,也就是当飞机飞入屏幕一会后再恢复角度,表示一个降落的效果,使动画看起来更加逼真。

还有底部的时间、地点下地横线都是简单的淡入淡出动画,这里就不再赘述了。

结束语

再简单的动画效果只要组合恰当,值设置得考究都可以做出出色的动画效果,而简单的动画效果也是复杂动画效果的基础。上述动画的示例代码可能写得不够精细,还可以提炼得更有层次,不过大家了解了知识点后可以自己实现更考究的代码结构,以及更精致的动画。

 

0 »

新闻专题

OS X Mavericks 欲与 Windows 8.1 试比高
OS X Mavericks 欲与 Windows 8.1 试比高

微软在美国旧金山举行的Build 2013开发者大会上推出Windows操作系统的下一代更新——Windows 8.1预览版。苹果在旧金山召开了盛大的本年度WWDC(苹果全球开发者大会)大会上推出OS X 操作系统的新版本Mac OS X Mavericks。本文针对这两个全新的系统进行10个回合的对比,看看谁才是目前最出色的桌面系统。

微软 Windows 8.1 毫无新意
微软 Windows 8.1 毫无新意

2013 年 10 月 17 日, 微软发布 Windows 8.1 更新,改进了一些 Windows 8 上饱受诟病的体验,但是毫无惊艳可言,只是在旧系统上的“缝缝补补”,总体来说,有惊喜,无惊艳。

最新资讯

热点文章

  • 24小时
  • 一周
  • 本月