ios学习之核心动画-图片折叠

首先需要准备素材，一张图片，如下：

然后就是打开xcode创建项目,连线：

然后，写代码:

//
//  ViewController.m
//  图片折叠
//
//  Created by apple on 16/7/28.
//  Copyright © 2016年 XinHuoYuan. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *topView;
@property (weak, nonatomic) IBOutlet UIImageView *buttomView;
@property (weak, nonatomic) IBOutlet UIView *outView;
@property (weak, nonatomic) CAGradientLayer *gradient;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

//    self.view.translatesAutoresizingMaskIntoConstraints = NO;


    //让上部分图片只显示上半部分
    self.topView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
    //让下半部分图片只显示下半部分
    self.buttomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
    self.topView.layer.anchorPoint = CGPointMake(0.5, 1);
    self.buttomView.layer.anchorPoint = CGPointMake(0.5, 0);

    //添加手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
    [self.outView addGestureRecognizer:pan];

    //渐变层
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.buttomView.bounds;
    gradient.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

    //设置不透明度
    gradient.opacity = 0;
    self.gradient = gradient;
    [self.buttomView.layer addSublayer:gradient];
}


- (void)pan:(UIPanGestureRecognizer *)pan
{
    CGPoint transP = [pan translationInView:self.outView];
    CATransform3D transform = CATransform3DIdentity;

    //立体效果，近大远小
    transform.m34 = -1/550.0;

    //设置不透明度
    CGFloat opcity = transP.y * 1/ 256;

    self.gradient.opacity = opcity;

    CGFloat angle= transP.y * M_PI / 256.0;
    //让上半部分图片做旋转
    self.topView.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);

    if (pan.state == UIGestureRecognizerStateEnded) {
        self.gradient.opacity = 0;
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.25 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
            //让图片反弹回去
            self.topView.layer.transform = CATransform3DIdentity;
        } completion:^(BOOL finished) {

        }];
    }
}

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

@end

效果图：