Swift教程_零基础学习Swift完整实例(八)_swift完整实例(添加View的动画效果、添加View的阴影)...
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。
具体做法请看注释,思路是:复制一个位图并裁剪成需要大小-翻转并绛色-填充渐变色
代码如下。
- //通过指定高度生成倒影图,方法完全照搬官方sample,
- func reflectedImageWithHeight(height: UInt) ->UIImage{
- //这里注意,swift不能直接在CG方法中用nil,需要声明一个变量
- var nil nilUnsafeMutablePointer: UnsafeMutablePointer<Void> = nil
- //rgb颜色容器,RGBA和CMYK的区别我会另开博文去说这个
- var colorSpace = CGColorSpaceCreateDeviceRGB()
- var int32CGImageAlphaInfo = CGImageAlphaInfo.PremultipliedLast.toRaw()
- var bitmapInfo = CGBitmapInfo.fromRaw(int32CGImageAlphaInfo)
- //使用CG绘制位图上下文,以下是方法的用法,网上抓的,大家可以试一下具体用法。
- //参数data指向绘图操作被渲染的内存区域,这个内存区域大小应该为(bytesPerRow*height)个字节。如果对绘制操作被渲染的内存区域并无特别的要求,那么可以传递NULL给参数date。
- //参数width代表被渲染内存区域的宽度。
- //参数height代表被渲染内存区域的高度。
- //参数bitsPerComponent被渲染内存区域中组件在屏幕每个像素点上需要使用的bits位,举例来说,如果使用32-bit像素和RGB颜色格式,那么RGBA颜色格式中每个组件在屏幕每个像素点上需要使用的bits位就为32/4=8。
- //参数bytesPerRow代表被渲染内存区域中每行所使用的bytes位数。
- //参数colorspace用于被渲染内存区域的“位图上下文”。
- //参数bitmapInfo指定被渲染内存区域的“视图”是否包含一个alpha(透视)通道以及每个像素相应的位置,除此之外还可以指定组件式是浮点值还是整数值。
- var mainViewContentContext = CGBitmapContextCreate(nilUnsafeMutablePointer, UInt(self.bounds.size.width), height, UInt(8), UInt(0), colorSpace, bitmapInfo!)
- //注意,swift操作CG是不需要释放的,CG内部的GC已经处理了
- //调整位图位置,CGContextTranslateCTM为位移方法
- var translateVertical = CGFloat(self.bounds.size.height) - CGFloat(height)
- //这里相当于翻转
- CGContextTranslateCTM(mainViewContentContext, 0, -translateVertical)
- //将该位图渲染到layer层,layer层是view的根层,这里相当与copy一个self
- self.layer.renderInContext(mainViewContentContext)
- //根据位图上下文生成位图
- var mainViewContentBitmapContext = CGBitmapContextCreateImage(mainViewContentContext)
- //创建一个mask,确认刚才生成的位图那些是需要显示的,这里主要用它的渐变功能,image mask就像是用于表征色彩放在页面的哪一部分
- var gradientMaskImage = PKOElementDetailImageView.AEViewCreateGradientImage(UInt(1), pixelsHigh: UInt(height))
- //将位图需要显示的部分显示出来
- var reflectionImage = CGImageCreateWithMask(mainViewContentBitmapContext, gradientMaskImage)
- //通过image生成UIImage,并返回
- 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)
- //使用CG绘制位图上下文,渐变色位图
- var gradientBitmapContext = CGBitmapContextCreate(nilUnsafeMutablePointer, pixelsWide, pixelsHigh,
- UInt(8), UInt(0), colorSpace, bitmapInfo!)
- //创建渐变对象,对于CG渐变我会在开博文详细解释
- 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())
- //通过image生成UIImage,并返回
- 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
Swift教程_零基础学习Swift完整实例(八)_swift完整实例(添加View的动画效果、添加View的阴影)...相关推荐
- 明日科技的python书籍怎么样_零基础学习Python不可错过的5本书籍
3.Python基础教程(第3版) 作者:[挪]芒努斯·利·海特兰德(Magnus Lie Hetland) 出版社:人民邮电出版社 Python3.5编程从入门到实践,Python入门佳作,机器学习 ...
- 【J2ME 2D 游戏开发系列】◣HIMI游戏开发启蒙教程◢JAVA零基础学习J2ME游戏开发全过程!...
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/j2me-2/774.html Himi从写 ...
- 零基础学习python入门书_零基础学习Python不可错过的5本书籍
原标题:零基础学习Python不可错过的5本书籍 Python作为目前编程开发的主流语言之一,在企业中的应用范围越来越广,广阔的发展前景吸引了很多小伙伴想要入行Python,下面小U就为大家介绍一下零 ...
- python入门之函数调用第一关_零基础学习 Python 之与函数的初次相见
写在之前 大家好,这是首发在我公众号「Python空间」的第 26 篇文章,欢迎关注. 大家好,这里是零基础学习 Python 系列,在这里我将从最基本的Python 写起,然后再慢慢涉及到高阶以及具 ...
- python零基础书推荐_零基础学习Python(Python初学者、Python入门)常见问题:资料、社区、书籍推荐...
Python web开发 QQ学习群:338985564 ,欢迎各位加入,一起学习. 本文针对零基础的,想学习Python者.本文会不定时更新. 一.学会使用搜索引擎,尤其是Google. 推荐阅读文 ...
- python for loop循环程序语句_零基础学习 Python 之 for 循环语句
写在之前 大家好,这里是零基础学习 Python 系列,在这里我将从最基本的Python 写起,然后再慢慢涉及到高阶以及具体应用方面.我是完全自学的 Python,所以很是明白自学对于一个人的考验,所 ...
- 0基础学好python难不难_零基础学习Python难不难?Python有什么优势?
原标题:零基础学习Python难不难?Python有什么优势? Python是一种计算机程序设计语言.首先,我们普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如下载一个 ...
- java基础知识点_零基础学习Java语言,各个阶段需要掌握的知识点
随社会的脚步的不断发展,Java技术在不断的与时俱进,这也是Java一直长盛不衰的原因之一.Java技术的学习,永远没有早晚之分,技不压身,对于21世纪的我们80后,90后,甚至00后,尤其适用! 那 ...
- 抛物线的中点生成算法_零基础学习梯度下降算法
零基础学习梯度下降算法 作者:Philipp Muens 翻译:老齐 与本文相关的图书推荐:<数据准备和特征工程> 梯度下降法是机器学习中最基本的优化技术之一.那么,什么是梯度? 下降的是 ...
最新文章
- python cv2 hsv数组,len()与 size字段的区别
- 智能机器人比巴和智伴哪个好_扫地机器人和吸尘器哪个好?
- 【C语言】逗号运算符 ,
- 扫地机器人开年之战:新品初现,战局微调
- ubuntun 16.04环境安装Caffe过程
- gophp解释器_go语言环境搭建、基本使用
- 十年数据分析经验,总结出这三类分析工具最好用
- [转]文本编辑软件UltraEdit v16.20官方简/繁体中文版下载+注册码和破解方法
- android自动化测试--appium运行的坑问题及解决方法
- 适合初学者的PASCAL VOC2012数据集的下载及简单讲解
- 经过20天的面试终于进了阿里(分享面试过程)
- Drive-by Compromise 术语名词概念
- 非常实用的,国内十大另类行业网址导航站
- Javascript 中 atob/btoa
- java 里面耦合和解耦
- 公众号滑动图代码_微信公众号图文排版之图片滑动的新玩法
- Python学习 day03
- 大学生静态HTML网页设计--公司官网首页
- 职称计算机ppt2003注意,【资格考试】职称计算机_PPT2003ppt模版课件.ppt
- 利用word宏命令来自动化缩写期刊名称
热门文章
- AndroidStudio_开发工具的设置_代码编辑器使用_新特性---Android原生开发工作笔记73
- Sharding-JDBC(实现读写分离)_Sharding-Sphere,Sharding-JDBC分布式_分库分表工作笔记014
- k8s核心技术-Pod(调度策略)_影响Pod调度(污点和污点容忍)---K8S_Google工作笔记0027
- springcloud工作笔记092---清理多余权限垃圾数据小工具
- Android学习笔记---26_网络通信之资讯客户端,使用pull解析器,解析,从网络中获得的自定义xml文件
- 用phpcms如何将静态页面制作成企业网站(中)
- vs资源视图加载失败
- hibernate数据库连接池
- zeromq+python安装手册
- 无人驾驶(基于计算机视觉的高精度地图)