文/猫爪(简书作者)
原文链接:http://www.jianshu.com/p/688c491580e3
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

用Swift封装图片折叠效果

boyXiong

谈到封装,那么就要从使用者的角度出发,提供外界使用的方法

  • 1.新建一个类继承UIView

    class XWFoldImageView: UIView {}
  • 2.外界想实现这个效果只需要给我图片名和控件显示的frame就够了,那么提供使用者遍历构造方法
    convenience init(imageName:String ,frame:CGRect){
    self.init()
    self.frame = frame //1.在初始化做的操作
    self.setupDoubleImageViewLayer(imageName)
    self.setupGestureRecognizer()
    }
  • 3那么外界使用就是非常方便,如:

    override func viewDidLoad() {  super.viewDidLoad()
    let foldImageView = XWFoldImageView(imageName: "image", frame: CGRectMake(50, 100, 300, 200))
    self.view.addSubview(foldImageView)
    }

谈谈如何具体实现 + 大体思想

1.利用两张一模一样的图片,放在同一个UIView上面分了顶部和底部

这里写图片描述

具体代码

    //MARK: 成员属性
private var imageTopView:UIImageView!
private var imageBottomView:UIImageView!
private var gradientLayer:CAGradientLayer = CAGradientLayer() //MARK: 便利构造 convenience init(imageName:String ,frame:CGRect){
self.init()
self.frame = frame
self.setupDoubleImageViewLayer(imageName)
self.setupGestureRecognizer()
} //MARK: 设置图片图层的描点和 postion
private func setupDoubleImageViewLayer(imageName:String){ //1添加到父控件
let imageBottomView = UIImageView(image: UIImage(named: imageName))
imageBottomView.frame = self.bounds
imageBottomView.contentMode = UIViewContentMode.ScaleToFill
self.addSubview(imageBottomView)
self.imageBottomView = imageBottomView let imageTopView = UIImageView(image: UIImage(named: imageName))
imageTopView.frame = self.bounds
imageTopView.contentMode = UIViewContentMode.ScaleToFill
self.addSubview(imageTopView)
self.imageTopView = imageTopView //2.设置contents显示比例
self.imageTopView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5)
self.imageBottomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5) //2.1设置锚点
/** 两张图,各显示一半,让描点为中间的点,这样才可以用tranfrom 描点就是,在将自己图层的具体坐标点,按照width height 比例计算出x,y 显示到 position那个点上面去,整个图也就跟着动了,旋转是跟着锚点旋转的
*/
self.imageTopView.layer.anchorPoint = CGPointMake(0.5, 1)
self.imageBottomView.layer.anchorPoint = CGPointMake(0.5, 0) //3.修改图层坐标点,修改postion 其实就是center,改了之后center也跟着改了
self.imageTopView.layer.position = CGPointMake(self.imageTopView.center.x, self.imageTopView.center.y + self.imageTopView.height * 0.5)
//3.1 虽然修改了图层的contentsRect 但是本身的高度并没有修改,导致旋转的时候,高度变高
self.imageTopView.height = self.height * 0.5 //3.2 设置底图的postion 但是不用设置实际高,因为不需要形变
self.imageBottomView.height = self.height * 0.5 //4 给图层增加一个阴影层
self.gradientLayer.frame = self.imageBottomView.bounds
//4.1渐变的颜色
self.gradientLayer.colors = [UIColor .clearColor().CGColor, UIColor.blackColor().CGColor]
//不透明度
self.gradientLayer.opacity = 0 self.imageBottomView.layer.addSublayer(self.gradientLayer) }

2.给父控件添加手势,来改变子控件图层的形变

这里写图片描述

具体代码

//MARK: 添加手势拖拽
private func setupGestureRecognizer(){
//1.
let pan = UIPanGestureRecognizer(target: self, action: "panFunc:") self.addGestureRecognizer(pan)
} //MARK: 手势执行 func panFunc(pan:UIPanGestureRecognizer){ //1.得到偏移量,就是x,y坐标与 左上角CGPointZero 的差距
let offSet = pan.translationInView(pan.view) print(offSet) //2.得到旋转的角度
var angle = -kAngle2Radian(offSet.y) * 5 //3.如果大于角度就固定最刚好遮盖值
if fabs(angle) >= kAngle2Radian(340) * 5 { angle = angle / angle * kAngle2Radian(346) * 5
} //增强立体感
var transfrom:CATransform3D = CATransform3DIdentity
// d:人的眼睛和屏幕的垂直距离
let d:CGFloat = 300
// 设置形变的m34就可以增加立体感,立体感(近大远小)
transfrom.m34 = -1 / d //2.根据 y 值的大小进行旋转X轴的角度
transfrom = CATransform3DRotate(transfrom, angle, 1, 0, 0) self.imageTopView.layer.transform = transfrom //2.1设置阴影
self.gradientLayer.opacity = Float(fabs(angle) / (kAngle2Radian(346) * 4.0)) //3.检查用户抬起手势
if pan.state == UIGestureRecognizerState.Ended { UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.1, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in self.imageTopView.layer.transform = CATransform3DIdentity self.gradientLayer.opacity = 0; }, completion: { (Bool) -> Void in }) } }

通过这个思想,通过捆绑式控件,让父控件响应用户交互,然后控制子控件形变,来实现复杂的UI动画效果比继承UIControl,来完成复杂的自定义控件操作,应该容易点

Swift 2.0 封装图片折叠效果的更多相关文章

  1. iOS图片折叠效果:Layer的contentsRect属性和渐变层

    http://www.cocoachina.com/ios/20150722/12622.html 作者:@吖了个峥 授权本站转载. 前言 此次文章,讲述的是Layer的一个属性contentsRec ...

  2. thinkphp5.0 实现图片验证效果且能点击图片刷新图片

    思路与文件上传相同,只是验证码一个方法: <img src="{:captcha_src()}" /> 后台文件:app\ceshi\yam <?php name ...

  3. Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...

  4. iOS开发——UI进阶篇(十八)核心动画小例子,转盘(裁剪图片、自定义按钮、旋转)图片折叠、音量震动条、倒影、粒子效果

    一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // re ...

  5. 淡入淡出(折叠效果)and点击切换背景图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Android仿掌上英雄联盟首页,实现折叠效果

    概述 仿掌上英雄联盟首页的demo 详细 代码下载:http://www.demodashi.com/demo/10695.html 首页大概分为几个部分 状态栏 标题栏 轮播图 切换的Tab 资讯列 ...

  7. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  8. JS实现图片''推拉门''效果

    JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

  9. 仿FLASH的图片轮换效果

    css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...

随机推荐

  1. autochannel 指定栏目

    (> DedeCMS 4,DedeCMS5) 名称:autochannel 功能:指定排序位置的单个栏目的链接 语法: {dede:autochannel partsort='2' typeid ...

  2. 关于js中 document.body.scrollTop 不能返回正确值的原因

    本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素,但是不管滚动条在什么位置总是返回是0,造成这样的原因和html的头部声明有关,如果头部声明 为:< ...

  3. js操作符

    JS操作符 x + y(数字) 将x和y相加; x + y(字符串) 将x和y拼接在一起; x - y 从x中减去y; x * y 将x和y相乘; x / y 将x除以y; x % y x和y的模(既 ...

  4. 带搜索功能,支持绑定对象到节点的TreeView辅助类

    特点: 1.支持数叶子节点与对象绑定 2.支持xml导入,且数据类相关的xml可自定义,只和泛型的实现有关 3.支持节点搜索功能,可在树结构上要求只显示部分节点 4.用C#编写,但与平台关联性低,可移 ...

  5. (转)JQuery处理json与ajax返回JSON实例

    son数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过 ...

  6. Android -------- RelativeLayout 和 LinearLayout 的性能分析

    布局的绘制角度 RelativeLayout不如LinearLayout快的根本原因是: RelativeLayout需要对其子View进行两次measure过程, 而LinearLayout则只需一 ...

  7. "sfc/scannow" 修复系统,提示 "windows资源保护无法启动修复服务"(win7)

    原因: ArcGIS9.3安装后对注册空间进行了限制. 解决方案: 1,输入 regeidt 打开注册表. 2,找到 HKEY_LOCAL_MACHINE\System\CurrentControlS ...

  8. SQlserver表连接

    连接是两元运算,可以对两个或多个表进行查询,结果通常是含有参加连接运算的两个表或多个表的指定列的表. 在T-SQL中,连接查询有两类: 第一类:符合SQL标准的连接谓词表示形式: 第二类:T-SQL扩 ...

  9. 自律训练法 John Sehorz

    自律训练法,系1932年由德国精神医学医师John Sehorz所创立.他研究人们在催眠催眠状态下,所呈现的生理状态,如:沉重与温暖感.. ,因而,John Sehorz改以「逆向操作」之方式,由自我 ...

  10. MySQL查询指定时间的数据

    user_event :用户事件表 create_time :表中存储时间的字段 #获取当月数据 SELECT * FROM user_event WHERE DATE_FORMAT(create_t ...