Swift教程_零基础学习Swift完整实例(八)_swift完整实例(添加View的动画效果、添加View的阴影)

6.添加View的动画效果

本章节主要来做明细页面点击后翻转的动画效果,该效果可以进行多种改变,以达到想要的效果。

1.首先我们需要进行翻转的正反两个view,前面我们已经做好了,分别是PKOElementDetailImageViewPKOElementDetailImageFlippedView,具体翻转动画在明细页面的控制其中进行,触发当然是PKOElementDetailImageView中的点击事件,前文已经提到。
2.PKOElementDetailImageView中的点击事件调用PKOElementDetailViewController中的flipImageView()方法,该方法具体实现翻转功能,注释中写的很详细。
代码如下。

[objc] view plain copy
  1. //翻转动画  
  2.     func flipImageView() {  
  3.         UIView.beginAnimations(nil, context:nil)  
  4.         //平滑动画效果  
  5.         UIView.setAnimationCurve(UIViewAnimationCurve.Linear)  
  6.         UIView.setAnimationDuration(1)  
  7.           
  8.         var reflectionHeight: CGFloat  
  9.         var reflectedImage: UIImage?  
  10.           
  11.         //点击正面  
  12.         if(self.frontViewIsVisible == true){  
  13.             UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromLeft, forViewself.subView!, cachetrue)  
  14.             self.detailImage.removeFromSuperview()  
  15.             self.subView?.addSubview(self.detailImageFlipped)  
  16.         }  
  17.         //点击反面  
  18.         else{  
  19.             UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromRight, forView:self.subView!, cache:true)  
  20.             self.detailImageFlipped.removeFromSuperview()  
  21.             self.subView?.addSubview(self.detailImage)  
  22.         }  
  23.         //提交动画  
  24.         UIView.commitAnimations()  
  25.         //设置是否正面显示标识  
  26.         self.frontViewIsVisible = !self.frontViewIsVisible  
  27.     }  

7.添加View的阴影

本章节主要来做明细页面图片的阴影效果,该效果可以进行高度设置,并且完全反射,包含所绘制的文字。

1.通过控制器PKOElementDetailViewController绘制明细图的同时,绘制图片的阴影,该阴影应该基于阴影的主图,所以放在PKOElementDetailImageView中处理。
reflectedImageWithHeight(height: UInt) ->UIImage该方法将返回对应阴影image。
具体做法请看注释,思路是:复制一个位图并裁剪成需要大小-翻转并绛色-填充渐变色
代码如下。

[objc] view plain copy
  1. //通过指定高度生成倒影图,方法完全照搬官方sample,  
  2.     func reflectedImageWithHeight(height: UInt) ->UIImage{  
  3.         //这里注意,swift不能直接在CG方法中用nil,需要声明一个变量  
  4.         var nil nilUnsafeMutablePointer: UnsafeMutablePointer<Void> = nil  
  5.         //rgb颜色容器,RGBA和CMYK的区别我会另开博文去说这个  
  6.         var colorSpace  = CGColorSpaceCreateDeviceRGB()  
  7.         var int32CGImageAlphaInfo = CGImageAlphaInfo.PremultipliedLast.toRaw()  
  8.         var bitmapInfo = CGBitmapInfo.fromRaw(int32CGImageAlphaInfo)  
  9.           
  10.         //使用CG绘制位图上下文,以下是方法的用法,网上抓的,大家可以试一下具体用法。  
  11.         //参数data指向绘图操作被渲染的内存区域,这个内存区域大小应该为(bytesPerRow*height)个字节。如果对绘制操作被渲染的内存区域并无特别的要求,那么可以传递NULL给参数date。  
  12.         //参数width代表被渲染内存区域的宽度。  
  13.         //参数height代表被渲染内存区域的高度。  
  14.         //参数bitsPerComponent被渲染内存区域中组件在屏幕每个像素点上需要使用的bits位,举例来说,如果使用32-bit像素和RGB颜色格式,那么RGBA颜色格式中每个组件在屏幕每个像素点上需要使用的bits位就为32/4=8。  
  15.         //参数bytesPerRow代表被渲染内存区域中每行所使用的bytes位数。  
  16.         //参数colorspace用于被渲染内存区域的“位图上下文”。  
  17.         //参数bitmapInfo指定被渲染内存区域的“视图”是否包含一个alpha(透视)通道以及每个像素相应的位置,除此之外还可以指定组件式是浮点值还是整数值。  
  18.         var mainViewContentContext = CGBitmapContextCreate(nilUnsafeMutablePointer, UInt(self.bounds.size.width), height, UInt(8), UInt(0), colorSpace, bitmapInfo!)  
  19.           
  20.         //注意,swift操作CG是不需要释放的,CG内部的GC已经处理了  
  21.           
  22.         //调整位图位置,CGContextTranslateCTM为位移方法  
  23.         var translateVertical = CGFloat(self.bounds.size.height) - CGFloat(height)  
  24.         //这里相当于翻转  
  25.         CGContextTranslateCTM(mainViewContentContext, 0, -translateVertical)  
  26.           
  27.         //将该位图渲染到layer层,layer层是view的根层,这里相当与copy一个self  
  28.         self.layer.renderInContext(mainViewContentContext)  
  29.           
  30.         //根据位图上下文生成位图  
  31.         var mainViewContentBitmapContext = CGBitmapContextCreateImage(mainViewContentContext)  
  32.           
  33.         //创建一个mask,确认刚才生成的位图那些是需要显示的,这里主要用它的渐变功能,image mask就像是用于表征色彩放在页面的哪一部分  
  34.         var gradientMaskImage = PKOElementDetailImageView.AEViewCreateGradientImage(UInt(1), pixelsHigh: UInt(height))  
  35.           
  36.         //将位图需要显示的部分显示出来  
  37.         var reflectionImage = CGImageCreateWithMask(mainViewContentBitmapContext, gradientMaskImage)  
  38.           
  39.         //通过image生成UIImage,并返回  
  40.         var theImage = UIImage(CGImage: reflectionImage)  
  41.         return theImage  
  42.     }  
  43.       
  44.     class func AEViewCreateGradientImage ( pixelsWide: UInt, pixelsHigh: UInt) ->CGImageRef {  
  45.         var nil nilUnsafeMutablePointer: UnsafeMutablePointer<Void> = nil  
  46.         var colorSpace = CGColorSpaceCreateDeviceGray()  
  47.         var int32CGImageAlphaInfo = CGImageAlphaInfo.None.toRaw()  
  48.         var bitmapInfo = CGBitmapInfo.fromRaw(int32CGImageAlphaInfo)  
  49.         //使用CG绘制位图上下文,渐变色位图  
  50.         var gradientBitmapContext = CGBitmapContextCreate(nilUnsafeMutablePointer, pixelsWide, pixelsHigh,  
  51.             UInt(8), UInt(0), colorSpace, bitmapInfo!)  
  52.           
  53.         //创建渐变对象,对于CG渐变我会在开博文详细解释  
  54.         var colors: [CGFloat] = [0.01.0,1.01.0]  
  55.         var nil nilUnsafePointer: UnsafePointer<CGFloat> = nil  
  56.         var grayScaleGradient = CGGradientCreateWithColorComponents(colorSpace, colors, nilUnsafePointer, UInt(2))  
  57.           
  58.         //渐变的开始点和结束点  
  59.         var gradientStartPoint = CGPointZero  
  60.         var gradientEndPoint = CGPointMake(0, CGFloat(pixelsHigh))  
  61.           
  62.         //填充渐变色  
  63.         CGContextDrawLinearGradient(gradientBitmapContext, grayScaleGradient, gradientStartPoint, gradientEndPoint, CGGradientDrawingOptions())  
  64.           
  65.         //通过image生成UIImage,并返回  
  66.         var theCGImage = CGBitmapContextCreateImage(gradientBitmapContext)  
  67.         return theCGImage  
  68.     }  

2.在PKOElementDetailViewController中图像渲染时调用PKOElementDetailImageView中的reflectedImageWithHeight(height: UInt) ->UIImage返回image,将其添加在subview中。
代码如下。

[objc] view plain copy
  1. //创建倒影图  
  2.         var reflectionRect = imageRect  
  3.         reflectionRect.size.height = CGFloat(CGRectGetHeight(reflectionRect)) * CGFloat(reflectionRadio)  
  4.         reflectionRect = CGRectOffset(reflectionRect, 0, CGRectGetHeight(imageRect))  
  5.         var reflectionView = UIImageView(frame: reflectionRect)  
  6.         self.reflectionImage = reflectionView  
  7.         var height = (self.detailImage?.bounds.height as CGFloat!) * CGFloat(reflectionRadio)  
  8.         self.reflectionImage.image = self.detailImage?.reflectedImageWithHeight(UInt(height))  
  9.         self.reflectionImage.alpha = 0.3  
  10.         //添加倒影  
  11.         self.subView?.addSubview(self.reflectionImage)  

3.在翻转的同时需要更新倒影,使倒影应用于反面,再次翻转时需要再次更新,保证阴影跟随主图的变幻而变化,在控制器的翻转方法flipImageView()中进行处理即可 。
代码如下。

[objc] view plain copy
  1. //翻转动画  
  2.     func flipImageView() {  
  3.         UIView.beginAnimations(nil, context:nil)  
  4.         //平滑动画效果  
  5.         UIView.setAnimationCurve(UIViewAnimationCurve.Linear)  
  6.         UIView.setAnimationDuration(1)  
  7.           
  8.         var reflectionHeight: CGFloat  
  9.         var reflectedImage: UIImage?  
  10.           
  11.         //点击正面  
  12.         if(self.frontViewIsVisible == true){  
  13.             UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromLeft, forViewself.subView!, cachetrue)  
  14.             self.detailImage?.removeFromSuperview()  
  15.             self.subView?.addSubview(self.detailImageFlipped)  
  16.               
  17.             // 更新倒影  
  18.             reflectionHeight = (self.detailImageFlipped.bounds.height as CGFloat) * CGFloat(reflectionRadio)  
  19.             reflectedImage = self.detailImageFlipped.reflectedImageWithHeight(UInt(reflectionHeight))  
  20.             self.reflectionImage.image = reflectedImage  
  21.         }  
  22.         //点击反面  
  23.         else{  
  24.             UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromRight, forView:self.subView!, cache:true)  
  25.             self.detailImageFlipped.removeFromSuperview()  
  26.             self.subView?.addSubview(self.detailImage!)  
  27.               
  28.             // 更新倒影  
  29.             reflectionHeight = (self.detailImage!.bounds.height as CGFloat) * CGFloat(reflectionRadio)  
  30.             reflectedImage = self.detailImage?.reflectedImageWithHeight(UInt(reflectionHeight))  
  31.             self.reflectionImage.image = reflectedImage  
  32.         }  
  33.         //提交动画  
  34.         UIView.commitAnimations()  
  35.         //设置是否正面显示标识  
  36.         self.frontViewIsVisible = !self.frontViewIsVisible  
  37.     }  

至此全部改造完成,完整源代码请去第一篇下载

原文地址:http://blog.csdn.net/ooppookid/article/details/40373609

上一篇:Python3+PyCharm环境的安装及配置


下一篇:【导入导出】EXP-00079