图片折叠效果:Layer的contentsRect属性和渐变层

本是做手指点击,这么一个图片动作,找到文章http://www.cocoachina.com/ios/20150722/12622.html

主要用得技术点, 是Layer的一个属性contentsRect,利用它可以控制图层内容的展示,然后还有利用渐变层(CAGradientLayer)做阴影效果。

然后自己写了一遍代码:

#import "ThreeViewController.h"

@interface ThreeViewController ()


@property(nonatomic,weak) UIView *dogView;
@property(nonatomic,weak) UIView *topView;
@property(nonatomic,weak) UIView *bottomView;

@property(nonatomic,strong) UIImageView *dogImageView;


@end

@implementation ThreeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    float rate=0.8; //0~1 之间
    float dogW=200;
    float dogH=200;
    
    float topView_X=0;
    float bottomView_X=topView_X;
    float topView_W=dogW;
    float bottomView_W=topView_W;
    float topView_H=dogH*rate;
    float topView_Y=topView_H*0.5;
    float bottomView_H=dogH-topView_H;
    float bottomView_Y=topView_H-bottomView_H*0.5;
    
    
    CGRect dogRect=CGRectMake(40, 100, dogW, dogH);
    
    UIView *dogView=[[UIView alloc]initWithFrame:dogRect];
    _dogView=dogView;
    UIView *topView=[[UIView alloc]initWithFrame:CGRectMake(topView_X, topView_Y, topView_W, topView_H)];
    _topView=topView;
    UIView *bottomView=[[UIView alloc]initWithFrame:CGRectMake(bottomView_X, bottomView_Y, bottomView_W, bottomView_H)];
    _bottomView=bottomView;
    

    
    UIImage *dogImage=[UIImage imageNamed:@"mydog.jpg"];
    _topView.layer.contents=(__bridge id)(dogImage.CGImage);
    _topView.layer.contentsRect=CGRectMake(0.0, 0, 1.0, rate);
    
    _bottomView.layer.contents=(__bridge id)(dogImage.CGImage);
    _bottomView.layer.contentsRect=CGRectMake(0.0, rate, 1.0, (1-rate));
    
     [self.view addSubview:_dogView];
    [_dogView addSubview:_topView];
    [_dogView addSubview:_bottomView];
    
    _topView.layer.anchorPoint = CGPointMake(0.5, 1);
    _bottomView.layer.anchorPoint = CGPointMake(0.5, 0);
    
//    UITapGestureRecognizer *Tap =[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imagePressed:)];
//    _upView.userInteractionEnabled=YES;
//    _dogView.userInteractionEnabled=YES;
//    [_upView addGestureRecognizer:Tap];
//    [_downView addGestureRecognizer:Tap];
//    [_dogView addGestureRecognizer:Tap];
    
    
    //旋转
    CABasicAnimation *anim=[CABasicAnimation animation];
    anim.keyPath = @"transform.rotation.z";
    anim.toValue = @(-M_PI_4);
    anim.removedOnCompletion=NO;
    anim.fillMode=kCAFillModeForwards;
    [_dogView.layer addAnimation:anim forKey:nil];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    CATransform3D transform3D = CATransform3DIdentity;
    // 设置立体效果
    transform3D.m34 = -1 / 1000.0;
    // 计算折叠角度
    CGFloat angle =6/ 25.0 * M_PI;
    _topView.layer.transform = CATransform3DRotate(transform3D, angle, 1, 0, 0);
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [UIView animateWithDuration:0.4f animations:^{
        _topView.layer.transform = CATransform3DIdentity;
    }];
}


//-(void)imagePressed:(UITapGestureRecognizer *)sender
//{
//    CATransform3D transform3D = CATransform3DIdentity;
//    // 设置立体效果
//    transform3D.m34 = -1 / 1000.0;
//    // 计算折叠角度
//    CGFloat angle =6/ 25.0 * M_PI;
//    _upView.layer.transform = CATransform3DRotate(transform3D, angle, 1, 0, 0);
//    
//    if (sender.state == UIGestureRecognizerStateEnded) { // 手指抬起
//        [UIView animateWithDuration:0.4f animations:^{
//            _upView.layer.transform = CATransform3DIdentity;
//        }];
//    }
//    
//}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end
View Code

 

posted on 2015-08-20 11:05  二狗你变了  阅读(444)  评论(0)    收藏  举报

导航