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

来源:互联网 发布:截图台词拼接软件 编辑:程序博客网 时间:2024/04/29 20:35

首先需要准备素材,一张图片,如下:
素材
然后就是打开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

效果图:
不折叠的时候显示
折叠的时候显示

0 0
原创粉丝点击