iOS开发核心动画之图片折叠/渐变层

1. 显示效果

 

2. 代码实现

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *topV;

@property (weak, nonatomic) IBOutlet UIImageView *bottomV;

@property (weak, nonatomic) IBOutlet UIView *touchView;

/** 渐变层 */

@property (nonatomic, weak) CAGradientLayer *gradient;

@end

@implementation ViewController

- (void)viewDidLoad {

    

    [super viewDidLoad];

    

    // 显示上半部分

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

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

    

    // 只显示下半部分

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

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

    

    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];

    [self.touchView addGestureRecognizer:pan];

    

    // 渐变层

    CAGradientLayer *gradient = [CAGradientLayer layer];

    gradient.frame = self.bottomV.bounds;

    // 设置渐变颜色

    gradient.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

    

    // 设置图层的不透明度

    gradient.opacity = 0;

    self.gradient = gradient;

    [self.bottomV.layer addSublayer:gradient];

    

}

- (void)pan:(UIPanGestureRecognizer *)pan

{

    CGPoint offset = [pan translationInView:self.touchView];

    

    CGFloat angle = offset.y * M_PI / 200.0;

    

    CATransform3D transform = CATransform3DIdentity;

    transform.m34 = -1 / 300.0;

    

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

    

//    [pan setTranslation:CGPointZero inView:self.touchView];

    

    // 修改渐变层的不透明度

    self.gradient.opacity = offset.y / 200.0;

    

    // 判断手指松开上面的图片复位

    if (pan.state == UIGestureRecognizerStateEnded) {

        self.gradient.opacity = 0;

        

        //Duration:动画的执行时长

        //delay:动画延迟执行的时间

        //SpringWithDamping:弹性系数.

        //SpringVelocity:弹性的初始速度.

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

            self.topV.layer.transform = CATransform3DIdentity;

        } completion:^(BOOL finished) {

            

        }];

    }

    

}

//渐变层

- (void)gradientLayer{

    CAGradientLayer *gradient = [CAGradientLayer layer];

    gradient.frame = self.bottomV.bounds;

    //设置渐变的颜色

    gradient.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor];

    

    //修改渐变的方向

    gradient.startPoint = CGPointMake(0, 0);

    gradient.endPoint = CGPointMake(1, 0);

    //设置渐变的起始位置(从哪点开始渐变到下一个颜色)

    gradient.locations = @[@0.3,@0.7];

    [self.bottomV.layer addSublayer:gradient];

}