没有合适的资源?快使用搜索试试~ 我知道了~
基于iOS实现图片折叠效果
0 下载量 140 浏览量
2021-01-20
09:38:23
上传
评论
收藏 86KB PDF 举报
温馨提示
试读
4页
本文实例为大家分享了iOS实现图片折叠效果的具体代码,供大家参考,具体内容如下 一、分析与说明 1.1 分析界 效果 当鼠标在图片上拖动的时候,图片上有一个折叠的效果. 这种折叠效果其实就是图片的上半部分绕着X轴做一个旋转的操作. 我们图片的旋转都是绕着锚点进 旋转的.所以如果是一张图片的,办不到只上图 的上半部 分进 个旋转. 其实是两张图片, 把两张图片合成一张图片的方法, 实现方案.弄上下两张图 ,上部图片只显示上半部分, 下部图片只显示下半部分. 1.2 如果让 张图 只显 上半部分或者下半部分? 利用 CALayer的一个属性contentsRect = CGRectMake
资源详情
资源评论
资源推荐
基于基于iOS实现图片折叠效果实现图片折叠效果
本文实例为大家分享了iOS实现图片折叠效果的具体代码,供大家参考,具体内容如下
一、分析与说明一、分析与说明
1.1 分析界 效果
当鼠标在图片上拖动的时候,图片上有一个折叠的效果.
这种折叠效果其实就是图片的上半部分绕着X轴做一个旋转的操作.
我们图片的旋转都是绕着锚点进 旋转的.所以如果是一张图片的,办不到只上图 的上半部 分进 个旋转.
其实是两张图片, 把两张图片合成一张图片的方法,
实现方案.弄上下两张图 ,上部图片只显示上半部分, 下部图片只显示下半部分.
1.2 如果让 张图 只显 上半部分或者下半部分?
利用 CALayer的一个属性contentsRect = CGRectMake(0, 0, 1, 0.5);
contentsRect就是要显示的范围.它是取值范围是(0~1);
想让上部图片只显示上半部分contentsRect设置CGRectMake(0, 0, 1, 0.5); 让下部图片只显示下半部分contentsRect设置为
CGRectMake(0, 0.5, 1, 0.5)
1.3 让上部图 绕着锚点进 旋转,但是图 的默认锚点在中 ,所以要把上部图 的锚点设在 最底部.
修改上部分的锚点为anchorPoint = CGPointMake(0.5, 1)
但是修过锚点之后, 会出现一个问题,就是上部分的图片,会往上走.导致两个图片中间有一个空隙.
解决办法为*.把两张图片放到一起.设置上部分图片的锚点后.上部分图 会上走一半的距离.
然后再设置下部图片的锚点.设置下部图 锚点值为anchorPoint = CGPointMake(0.5, 0);
这样就能够办到两张图片合成一张的效果.
1.4 添加一个添加手势的view(Drag View)
弄一个和图片V相同的View,把手势添加给这个UIView.
添加完手势时, 在手势方法当中去旋转上部分图片.
用來计算旋转的角度,上半部分旋转的角度是根据手指向下拖动的Y值来决定.当 指到最下部 时正好旋转180度.
假设手指移动到最下部为200.那旋转 度应该为 angel = transP.Y * M_PI / 200.0;
1.5 拖动的时候让它有一个立体产效果
立体的效果就是有一种近大远小的感觉.
想要设置立体效果.要修改它的TransForm当中的一个M34值,
设置方式为弄一个空的TransFrom3D
CATransform3D transform = CATransform3DIdentity;
200.0可以理解为,人的眼睛离手机屏幕的垂直距离,
transform.m34 = - 1 / 200.0;
transform = CATransform3DRotate(transform, angle, 1, 0, 0);
1.6 给下部分图片添加阴影的效果.阴影是有渐变的效果.是从透明到黑色的一个渐变.
我们可以通过CAGradientLayer这个层来创建渐变.这个层我们就称它是一个渐变层.
渐变层也是需要添加到一个层上面才能够显.
渐变层里面有一个 colors属性.这个属性就是设置要渐变的颜色.它是一个数组.
数组当中要求我们传入都是 CGColorRef类型,所以我们要把颜 转成CGColor.
但是转成CGColor后,数组就认识它是一个对象了,就要通过在前面加上一个(id)来告诉编译器是 一个对象.
可以设置渐变的方向:
通过startPoint和endPoint这两个属性来设置渐变的方向.它的取值范围也是(0~1)
默认 向为上下渐变为:
gradientL.startPoint = CGPointMake(0, 0);
gradientL.endPoint = CGPointMake(0, 1);
设置左右渐变
gradientL.startPoint = CGPointMake(0, 0);
gradientL.endPoint = CGPointMake(1, 0);
weixin_38723105
- 粉丝: 4
- 资源: 969
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0