基于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);
可以设置渐变从一个颜色到下一个颜色的位置
设置属性为locations = @[@0.3,@0.7]
渐变层同时还有一个opacity属性.这个属性是调协渐变层的不透明度.
它的取值范围同样也是 0-1, 当为0时代表透明, 当为1明,代码不透明.
所以我们可以给下部分图片添加一个渐变层,渐变层的颜色为从透明到黑.
gradientl.colors = @[(id)[uicolor clearcolor].cgcolor,(id)[uicolor blackcolor].cgcolor];
开始时没有渐变,所以可以把渐变层设为透明状态.
之后随着手指向下拖动的时,渐变层的透明度跟着改变.
当手指拖到最下面的时候,渐变层的透明度正好为1.
cgfloat opacity = 1 * transp.y / 200.0;
1.7 在手指松开后有一个反弹动画
在手指松开后，我们添加一个反弹动画。
当手势状态为结束时：
1.把渐变的透明度改为 0
2.情况之前的形变
//手指松开，图片复位
if(pan.state == uigesturerecognizerstateended){
//把渐变效果透明
self.gradient.opacity = 0;
//delay:动画延时执行时间
//damping:弹性系数,设的超小, 弹性就越大
//velocity:弹性的初始速度
//options:以什么样样式来做动画,开始有结束慢,
[uiview animatewithduration:1 delay:0 usingspringwithdamping:0.1 initialspringvelocity:0 options:uiviewanimationoptioncurvelinear animations:^{
//上部分图片复位
self.topiv.layer.transform = catransform3didentity;
} completion:nil];
}
二、代码
//
// viewcontroller.m
// 03_uiview74_图片折叠
//
// created by 杞文明 on 17/7/19.
// copyright © 2017年 杞文明. all rights reserved.
//
#import "viewcontroller.h"
@interface viewcontroller ()
@property (weak, nonatomic) iboutlet uiimageview *topiv;
@property (weak, nonatomic) iboutlet uiimageview *bottomiv;
@property (weak, nonatomic) iboutlet uiview *dragview;
@property (nonatomic, weak) cagradientlayer *gradient;
#define max_h self.dragview.bounds.size.height
@end
@implementation viewcontroller
- (void)viewdidload {
[super viewdidload];
//让上部图层显示上半部分
self.topiv.layer.contentsrect = cgrectmake(0, 0, 1, 0.5);
self.topiv.layer.anchorpoint = cgpointmake(0.5, 1);
//让下部图片只显示下半部分
self.bottomiv.layer.contentsrect = cgrectmake(0, 0.5, 1, 0.5);
self.bottomiv.layer.anchorpoint = cgpointmake(0.5, 0);
//添加手势
uipangesturerecognizer *pan = [[uipangesturerecognizer alloc]initwithtarget:self action:@selector(pan:)];
[self.dragview addgesturerecognizer:pan];
//渐变层
[self gradientlayer];
}
-(void)gradientlayer{
//渐变层
cagradientlayer *gradient = [cagradientlayer layer];
gradient.frame = self.bottomiv.bounds;
//设置渐变的颜色
gradient.colors = @[(id)[uicolor clearcolor].cgcolor,(id)[uicolor blackcolor].cgcolor];
[self.bottomiv.layer addsublayer:gradient];
gradient.opacity = 0;
self.gradient = gradient;
}
-(void)pan:(uipangesturerecognizer*)pan{
//获取当前手指的偏移量
cgpoint tranp = [pan translationinview:self.dragview];
//最大旋转180
//当手指偏移量为dragview的高度时为180
cgfloat angle = tranp.y * m_pi / max_h;
catransform3d transform = catransform3didentity;
//设置立体效果（近大远小）
//设置眼睛和屏幕的距离
transform.m34 = -1 /300.0;
//设置渐变层的不透明度
self.gradient.opacity = tranp.y / max_h;
//让上层图片绕x轴旋转
self.topiv.layer.transform = catransform3drotate(transform, -angle, 1, 0, 0);
//手指松开，图片复位
if(pan.state == uigesturerecognizerstateended){
//把渐变效果透明
self.gradient.opacity = 0;
//delay:动画延时执行时间
//damping:弹性系数,设的超小, 弹性就越大
//velocity:弹性的初始速度
//options:以什么样样式来做动画,开始有结束慢,
[uiview animatewithduration:1 delay:0 usingspringwithdamping:0.1 initialspringvelocity:0 options:uiviewanimationoptioncurvelinear animations:^{
//上部分图片复位
self.topiv.layer.transform = catransform3didentity;
} completion:nil];
}
}
@end
三、图示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。