图片折叠效果

最终的效果,图片来自网络,

OC代码

#import"ViewController.h"

@interfaceViewController()

@property(weak,nonatomic)IBOutletUIImageView*topView;

@property(weak,nonatomic)IBOutletUIImageView*bottomView;

@property(weak,nonatomic)IBOutletUIView*dragView;

@property(nonatomic,weak)CAGradientLayer*layer;

@end

@implementationViewController

- (void)viewDidLoad {

[superviewDidLoad];

//先让上部分View显示图片上部分内容

// 0~1

_topView.layer.contentsRect=CGRectMake(0,0,1,0.5);

//设置锚点

_topView.layer.anchorPoint=CGPointMake(0.5,1);

//设置下部分显示内容

_bottomView.layer.contentsRect=CGRectMake(0,0.5,1,0.5);

_bottomView.layer.anchorPoint=CGPointMake(0.5,0);

//添加拖动手势

UIPanGestureRecognizer*pan = [[UIPanGestureRecognizeralloc]initWithTarget:selfaction:@selector(pan:)];

[_dragViewaddGestureRecognizer:pan];

//阴影效果,添加到底部

CAGradientLayer*layer = [CAGradientLayerlayer];

_layer= layer;

layer.frame=_bottomView.bounds;

//设置渐变颜色

layer.colors=@[(id)[UIColorclearColor].CGColor,(id)[UIColorblackColor].CGColor];

layer.opacity=0;

//    //设置渐变的方向

//

layer.startPoint = CGPointMake(0, 0);

//

layer.endPoint = CGPointMake(1, 0);

//

//    //设置颜色渐变的开始位置

//

layer.locations = @[@0.5];

[_bottomView.layeraddSublayer:layer];

}

//只要手指在拖动的View移动的时候就会调用

- (void)pan:(UIPanGestureRecognizer*)pan

{

//获取手势偏移量

CGPointtransP =  [pantranslationInView:_dragView];

//计算旋转角度

CGFloatangle = -transP.y/200.0*M_PI;

//增加立体感

CATransform3Dtransform =CATransform3DIdentity;

//

d:人的眼睛和屏幕的垂直距离

CGFloatd =300;

//设置形变的m34就可以增加立体感,立体感(近大远小)

transform.m34= -1/ d;

//秒速形变的旋转的度数

transform =CATransform3DRotate(transform,angle,1,0,0);

//开始旋转

_topView.layer.transform= transform;

//设置阴影的透明度

CGFloatopacity = transP.y/200;

_layer.opacity= opacity;

if(pan.state==UIGestureRecognizerStateEnded) {

//还原

// Damping:值越小,弹簧效果越明显

// options:秒速动画执行过程,匀速,快入快出

[UIViewanimateWithDuration:1delay:0usingSpringWithDamping:0.2initialSpringVelocity:1options:UIViewAnimationOptionCurveEaseInOutanimations:^{

_topView.layer.transform=CATransform3DIdentity;

}completion:^(BOOLfinished) {

}];

//弹簧效果

//上部分形变清空

//阴影透明

_layer.opacity=0;

}

}

@end

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 此次文章,讲述的是Layer的一个属性contentsRect,利用它可以控制图层内容的展示,然后还有利用渐...
    袁峥阅读 7,804评论 18 70
  • 绕着x轴转动 上半部分旋转,下半部分不动 一张图片旋转的效果.layer.transform MakeRotati...
    彼岸的黑色曼陀罗阅读 412评论 0 0
  • 图片折叠效果 1.如何制作图片折叠效果? 把一张图片分成两部分显示,上面一部分,下面一部分,折叠上面部分的内容。 ...
    SoManyDumb阅读 1,158评论 0 0
  • 原理: 1、创建工程-打开Main.storyboard-拖入两个ImageView . 调整位置 .设置图片 2...
    Codepgq阅读 1,198评论 1 5
  • VLC的集成和使用 VLC介绍 VLC Media Player (VideoLAN) 为 Windows、Lin...
    Pocket阅读 19,938评论 75 66