原理:
1、创建工程-打开Main.storyboard-拖入两个ImageView
1 ![Uploading 2_500742.png . . .].
调整位置
调整位置
.
设置图片
2、拖线
.
拖线把两个图片重叠在一起,并且bottom ImageV在上面,Top ImageV在下面
效果3、在上面添加一个透明的View,大小和位置与图片一样
效果调整位置大小
- 把图片设置为200 100 并且居中
-
把View设置为200 200并且居中
最后如下:
设置如下效果
.
.
为透明VIew添加手势
添加手势.
.
.
把手势事件添加到VC中
效果下4、处理量ImageVIew,让他们都各自显示一半
self.topImageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
self.topImageV.layer.anchorPoint = CGPointMake(0.5, 1);
self.bottomImageV.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
self.bottomImageV.layer.anchorPoint = CGPointMake(0.5, 0);
5、手势动画
CGPoint curP = [sender locationInView:sender.view];
//angle
CGFloat angle = curP.y * M_PI / 180.0;
self.topImageV.layer.transform = CATransform3DMakeRotation(-angle, 1, 0, 0);
.
.
.
6、添加阴影效果
- 要使用到一个类:CAGradientLayer
基本属性介绍: - colors:颜色数组
- startPoint:开始点
- endPoint:结束点
- locations:颜色开始的位置
- 注意要设置大小,可以通过opacity来设置不透明度
CAGradientLayer * gradientL = [CAGradientLayer layer];
gradientL.frame = self.bottomImageV.bounds;
gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
self.gradientL = gradientL;
self.gradientL.opacity = 0;
[self.bottomImageV.layer addSublayer:gradientL];
.
.
.
最终的手势代码:
- (IBAction)foldImage:(UIPanGestureRecognizer *)sender {
switch (sender.state) {
case UIGestureRecognizerStateEnded:
{
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.25 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
self.gradientL.opacity = 0;
self.topImageV.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
}];
}
break;
case UIGestureRecognizerStateChanged:{
CGPoint curP = [sender locationInView:sender.view];
//angle
CGFloat angle = curP.y * M_PI / 180.0;
//创建阴影效果
self.gradientL.opacity = curP.y * 1 / 256.0;
self.topImageV.layer.transform = CATransform3DMakeRotation(-angle, 1, 0, 0);
}
break;
default:
break;
}
}
最终效果如下:
网友评论