美文网首页
iOS图片折叠

iOS图片折叠

作者: 会写bug的程序媛 | 来源:发表于2018-12-14 10:31 被阅读0次

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) IBOutlet UIImageView *topImageView;

@property (strong, nonatomic) IBOutlet UIImageView *bottomImageView;

@property (nonatomic, weak) CAGradientLayer *gradientLayer;

@end

@implementation ViewController

- (IBAction)pan:(UIPanGestureRecognizer *)sender {

    //获取移动偏移量

     CGPointtransP = [sendertranslationInView:sender.view];

    //让上部分图片开始旋转

    CGFloatangle = transP.y*M_PI/360;

    NSLog(@"%f",transP.y*1/360.0);

    //self.gradientLayer.opacity = transP.y * 1 / 360;

    //近大远小效果

    CATransform3D transform = CATransform3DIdentity;

    //  眼睛离屏幕的距离

    transform.m34= -1/300.0;

//    self.topImageView.layer.transform = CATransform3DMakeRotation(-angle, 1, 0, 0);

    self.topImageView.layer.transform=CATransform3DRotate(transform, -angle,1,0,0);

    if (sender.state == UIGestureRecognizerStateEnded) {

        self.gradientLayer.opacity=NO;

        //上面的图片复位

        //usingSpringWithDamping:弹性系数,越小弹性越大

        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseOut animations:^{

            self.topImageView.layer.transform = CATransform3DIdentity;

        }completion:nil];

    }

}

- (void)viewDidLoad {

    [super viewDidLoad];

    //1、让上半部分图片只显示上半部分

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

    //2、让下半部分图片只显示下半部分

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

    self.topImageView.layer.anchorPoint = CGPointMake(0.5, 1);

    self.bottomImageView.layer.anchorPoint = CGPointMake(0.5, 0);

    //渐变层

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];

    gradientLayer.frame=self.bottomImageView.bounds;

    //设置渐变颜色

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

    //开始设置渐变为透明

    gradientLayer.opacity=0;

    self.gradientLayer= gradientLayer;

    [self.bottomImageView.layeraddSublayer:gradientLayer];

}

//渐变层

-(void)gradientLayer{

    //渐变层

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];

    gradientLayer.frame=self.bottomImageView.bounds;

    //设置渐变颜色

    gradientLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor yellowColor].CGColor];

    //设置渐变方向

    gradientLayer.startPoint=CGPointMake(0,0);

    gradientLayer.endPoint=CGPointMake(1,0);

    //设置一个渐变到另一个渐变的起始位置

    gradientLayer.locations=@[@0.2,@0.6];

    [self.bottomImageView.layeraddSublayer:gradientLayer];

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

相关文章

  • iOS - 图片实现多层折叠效果

    iOS - 图片实现多层折叠效果 iOS - 图片实现多层折叠效果

  • iOS图片折叠

    #import "ViewController.h" @interface ViewController () @...

  • iOS 图片折叠效果

    原理: 1、创建工程-打开Main.storyboard-拖入两个ImageView . 调整位置 .设置图片 2...

  • iOS实现折叠图片

    然后是Github链接:Github下面是简单的讲解,完全可以忽略。 图片折叠 CALayer的contentsR...

  • 如何实现图片折叠动画-iOS

    源代码下载链接:https://github.com/ZhengYaWei1992/ZWFoldImageA...

  • iOS - 图片实现多层折叠效果

    序 在网上能找到挺多图片折叠效果的教程,但大多数是一层折叠,在他们的教程的基础上,我试着实现了一下多层折叠的效果。...

  • 图片折叠效果

    OC代码 #import"ViewController.h" @interfaceViewController()...

  • 图片折叠效果

    绕着x轴转动 上半部分旋转,下半部分不动 一张图片旋转的效果.layer.transform MakeRotati...

  • 图片折叠效果

    图片折叠效果 1.如何制作图片折叠效果? 把一张图片分成两部分显示,上面一部分,下面一部分,折叠上面部分的内容。 ...

  • 核心绘图实战笔记

    图片折叠效果 1.如何制作图片折叠效果? `把一张图片分成两部分显示,上面一部分,下面一部分,折叠上面部分的内容。...

网友评论

      本文标题:iOS图片折叠

      本文链接:https://www.haomeiwen.com/subject/cwkbhqtx.html