6.添加View的动画效果
本章节主要来做明细页面点击后翻转的动画效果,该效果可以进行多种改变,以达到想要的效果。
1.首先我们需要进行翻转的正反两个view,前面我们已经做好了,分别是PKOElementDetailImageView和PKOElementDetailImageFlippedView,具体翻转动画在明细页面的控制其中进行,触发当然是PKOElementDetailImageView中的点击事件,前文已经提到。
2.PKOElementDetailImageView中的点击事件调用PKOElementDetailViewController中的flipImageView()方法,该方法具体实现翻转功能,注释中写的很详细。
代码如下。
-
- func flipImageView() {
- UIView.beginAnimations(nil, context:nil)
-
- UIView.setAnimationCurve(UIViewAnimationCurve.Linear)
- UIView.setAnimationDuration(1)
-
- var reflectionHeight: CGFloat
- var reflectedImage: UIImage?
-
-
- if(self.frontViewIsVisible == true){
- UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromLeft, forView: self.subView!, cache: true)
- self.detailImage.removeFromSuperview()
- self.subView?.addSubview(self.detailImageFlipped)
- }
-
- else{
- UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromRight, forView:self.subView!, cache:true)
- self.detailImageFlipped.removeFromSuperview()
- self.subView?.addSubview(self.detailImage)
- }
-
- UIView.commitAnimations()
-
- self.frontViewIsVisible = !self.frontViewIsVisible
- }
7.添加View的阴影
本章节主要来做明细页面图片的阴影效果,该效果可以进行高度设置,并且完全反射,包含所绘制的文字。
1.通过控制器PKOElementDetailViewController绘制明细图的同时,绘制图片的阴影,该阴影应该基于阴影的主图,所以放在PKOElementDetailImageView中处理。
reflectedImageWithHeight(height: UInt) ->UIImage该方法将返回对应阴影image。
具体做法请看注释,思路是:复制一个位图并裁剪成需要大小-翻转并绛色-填充渐变色
代码如下。
-
- func reflectedImageWithHeight(height: UInt) ->UIImage{
-
- var nil nilUnsafeMutablePointer: UnsafeMutablePointer<Void> = nil
-
- var colorSpace = CGColorSpaceCreateDeviceRGB()
- var int32CGImageAlphaInfo = CGImageAlphaInfo.PremultipliedLast.toRaw()
- var bitmapInfo = CGBitmapInfo.fromRaw(int32CGImageAlphaInfo)
-
-
-
-
-
-
-
-
-
- var mainViewContentContext = CGBitmapContextCreate(nilUnsafeMutablePointer, UInt(self.bounds.size.width), height, UInt(8), UInt(0), colorSpace, bitmapInfo!)
-
-
-
-
- var translateVertical = CGFloat(self.bounds.size.height) - CGFloat(height)
-
- CGContextTranslateCTM(mainViewContentContext, 0, -translateVertical)
-
-
- self.layer.renderInContext(mainViewContentContext)
-
-
- var mainViewContentBitmapContext = CGBitmapContextCreateImage(mainViewContentContext)
-
-
- var gradientMaskImage = PKOElementDetailImageView.AEViewCreateGradientImage(UInt(1), pixelsHigh: UInt(height))
-
-
- var reflectionImage = CGImageCreateWithMask(mainViewContentBitmapContext, gradientMaskImage)
-
-
- var theImage = UIImage(CGImage: reflectionImage)
- return theImage
- }
-
- class func AEViewCreateGradientImage ( pixelsWide: UInt, pixelsHigh: UInt) ->CGImageRef {
- var nil nilUnsafeMutablePointer: UnsafeMutablePointer<Void> = nil
- var colorSpace = CGColorSpaceCreateDeviceGray()
- var int32CGImageAlphaInfo = CGImageAlphaInfo.None.toRaw()
- var bitmapInfo = CGBitmapInfo.fromRaw(int32CGImageAlphaInfo)
-
- var gradientBitmapContext = CGBitmapContextCreate(nilUnsafeMutablePointer, pixelsWide, pixelsHigh,
- UInt(8), UInt(0), colorSpace, bitmapInfo!)
-
-
- var colors: [CGFloat] = [0.0, 1.0,1.0, 1.0]
- var nil nilUnsafePointer: UnsafePointer<CGFloat> = nil
- var grayScaleGradient = CGGradientCreateWithColorComponents(colorSpace, colors, nilUnsafePointer, UInt(2))
-
-
- var gradientStartPoint = CGPointZero
- var gradientEndPoint = CGPointMake(0, CGFloat(pixelsHigh))
-
-
- CGContextDrawLinearGradient(gradientBitmapContext, grayScaleGradient, gradientStartPoint, gradientEndPoint, CGGradientDrawingOptions())
-
-
- var theCGImage = CGBitmapContextCreateImage(gradientBitmapContext)
- return theCGImage
- }
2.在PKOElementDetailViewController中图像渲染时调用PKOElementDetailImageView中的reflectedImageWithHeight(height: UInt) ->UIImage返回image,将其添加在subview中。
代码如下。
-
- var reflectionRect = imageRect
- reflectionRect.size.height = CGFloat(CGRectGetHeight(reflectionRect)) * CGFloat(reflectionRadio)
- reflectionRect = CGRectOffset(reflectionRect, 0, CGRectGetHeight(imageRect))
- var reflectionView = UIImageView(frame: reflectionRect)
- self.reflectionImage = reflectionView
- var height = (self.detailImage?.bounds.height as CGFloat!) * CGFloat(reflectionRadio)
- self.reflectionImage.image = self.detailImage?.reflectedImageWithHeight(UInt(height))
- self.reflectionImage.alpha = 0.3
-
- self.subView?.addSubview(self.reflectionImage)
3.在翻转的同时需要更新倒影,使倒影应用于反面,再次翻转时需要再次更新,保证阴影跟随主图的变幻而变化,在控制器的翻转方法flipImageView()中进行处理即可 。
代码如下。
-
- func flipImageView() {
- UIView.beginAnimations(nil, context:nil)
-
- UIView.setAnimationCurve(UIViewAnimationCurve.Linear)
- UIView.setAnimationDuration(1)
-
- var reflectionHeight: CGFloat
- var reflectedImage: UIImage?
-
-
- if(self.frontViewIsVisible == true){
- UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromLeft, forView: self.subView!, cache: true)
- self.detailImage?.removeFromSuperview()
- self.subView?.addSubview(self.detailImageFlipped)
-
-
- reflectionHeight = (self.detailImageFlipped.bounds.height as CGFloat) * CGFloat(reflectionRadio)
- reflectedImage = self.detailImageFlipped.reflectedImageWithHeight(UInt(reflectionHeight))
- self.reflectionImage.image = reflectedImage
- }
-
- else{
- UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromRight, forView:self.subView!, cache:true)
- self.detailImageFlipped.removeFromSuperview()
- self.subView?.addSubview(self.detailImage!)
-
-
- reflectionHeight = (self.detailImage!.bounds.height as CGFloat) * CGFloat(reflectionRadio)
- reflectedImage = self.detailImage?.reflectedImageWithHeight(UInt(reflectionHeight))
- self.reflectionImage.image = reflectedImage
- }
-
- UIView.commitAnimations()
-
- self.frontViewIsVisible = !self.frontViewIsVisible
- }
至此全部改造完成,完整源代码请去第一篇下载
原文地址:http://blog.csdn.net/ooppookid/article/details/40373609