折叠图片效果图
源代码下载链接：https://github.com/ZhengYaWei1992/ZWFoldImageAnimation
这种折叠效果看起来还是很神奇的，在图片下拉的折叠的时候还会有阴影效果看起来还是比较接近真实的折叠情况。这种折叠效果的实现只需要一张图片便可以实现，但是我们需要对这一章图片大作文章。需要创建两个imageView对象和一个UIView对象，两个imageView对象和UIView对象是完全重叠在一起的。其中，一个imageView对象只显示图片的上半部分，另一个只显示图片的下半部分。UIView对象放在两个ImageView对象的最上方，并设置为透明色，主要是为了在UIView对象上添加拖动手势，触发折叠事件。在图片折叠的时候，上半部分的imageView根据拖动的距离进行旋转，下半部分的imageView对象根据旋转的角度颜色渐变，形成阴影效果，这个渐变层的阴影效果主要是通过CAGradientLayer这个类完成的。以上是实现的思路，下面看具体实现代码。
1.创建两个imageView对象和一个UIView对象，并为UIView添加手势。下面这些代码很简单，但是还是有值得注意的地方。首先要知道如何只获取图片的上或下部分，主要是下面这句代码self.topImageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);其中1和0.5分别代表占原本imageView的宽度和高度的百分比。另外，图片大小设置的还是有讲究的，上半部分和下半部分imageView的高要设置成预期高度的一般。因为设置图片的预期高度的一半，才能保证图片拉动后的效果比例协调，主要是是因为图片截取后，imageView的大小不会变，只是内部的图片内容发生了变化。
self.topImageV.bounds = CGRectMake(0, 0, 300, 150);
self.topImageV.center = self.view.center;
self.bottomImageV.bounds = CGRectMake(0, 0, 300, 150);
self.bottomImageV.center = self.view.center;
self.clearView.bounds = CGRectMake(0, 0, 300, 300);
self.clearView.center = self.view.center;
//上部分图片只显示上半部
self.topImageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
self.topImageV.layer.anchorPoint = CGPointMake(0.5, 1);
self.topImageV.userInteractionEnabled = YES;
//下部分图片只显示下半部
self.bottomImageV.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
self.bottomImageV.layer.anchorPoint = CGPointMake(0.5, 0);
self.bottomImageV.userInteractionEnabled = YES;
//UIView实例对象
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
[self.clearView addGestureRecognizer:pan];
2、为下部分的imageView添加渐变层，来看一下阴影效果是如何实现的。gradient.colors是设置渐变颜色由哪几种颜色组成，gradient.opacity是设置渐变颜色的透明度，最初无渐变效果，所以设置透明度为0。要想渐变起到效果必须要将渐变层添加到对应视图的layer层上[self.bottomImageV.layer addSublayer:gradient];。
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
gradient.frame = self.bottomImageV.bounds;
gradient.opacity = 0;
self.gradient = gradient;
[self.bottomImageV.layer addSublayer:gradient];
3、看一下拖动手势代码实现逻辑，注释都显示在代码中。随着垂直拖动距离的增加底部渐变的透明度逐渐增加，同时上半部分的imageView执行相应的旋转。手势结束后，执行一个弹簧动画效果。
- (void)pan:(UIPanGestureRecognizer *)pan{
if (pan.state == UIGestureRecognizerStateChanged) {
//设置立体效果，近大远小
CATransform3D transform = CATransform3DIdentity;
//值越大，距离近的时候图像也越大。具体为什么使用m34不是很懂？？？？
transform.m34 = -1 / 400.0;
//拖动的距离
CGPoint transP = [pan translationInView:self.clearView];
//300是clearView的高度，即可以拉动的范围 -1是为了防止覆盖掉下半部分的图片
CGFloat angle = transP.y * (M_PI-1) / 300.0;
//上半部分图片做旋转
self.topImageV.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);
//设置不透明度 300是clearView的高度，即可以拉动的范围
self.gradient.opacity = transP.y * M_PI / 300.0;
}else if(pan.state == UIGestureRecognizerStateEnded){
self.gradient.opacity = 0;
//手势结束后，执行弹簧动画
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.25 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
//让上部分图片反弹回去
self.topImageV.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
}];
}
}
网友评论