实现翻页效果

实现翻页效果

 

简单翻页:

//
//  RootViewController.m
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"

@interface RootViewController ()

@property (nonatomic, strong) CALayer *layer;

@end

@implementation RootViewController

// 将角度转换为弧度
#define DEGREES__TO__RADIANS(d)  ((d) * M_PI / 180.f)

- (void)viewDidLoad
{
    [super viewDidLoad];

    // layer
    _layer = [CALayer layer];
    _layer.frame = (CGRect){CGPointMake(80, 100), CGSizeMake(160, 300)};
    _layer.backgroundColor = [UIColor redColor].CGColor;
    _layer.anchorPoint = CGPointMake(1.f, 0.5f);
    _layer.contents = (__bridge id)([UIImage imageNamed:@"pic1"].CGImage);
    [self.view.layer addSublayer:_layer];
    _layer.borderColor = [UIColor blackColor].CGColor;
    _layer.borderWidth = 2.f;
    _layer.cornerRadius = 4.f;
    _layer.transform = CATransform3DMakeRotation(DEGREES__TO__RADIANS(0), 0.0, 1.0, 0.0);
    
    // 手势
    UIPanGestureRecognizer *pan = \
        [[UIPanGestureRecognizer alloc] initWithTarget:self
                                                action:@selector(handlePan:)];
    [self.view addGestureRecognizer:pan];
}

- (void)handlePan:(UIPanGestureRecognizer *)sender
{
    CGPoint curPoint = [sender locationInView:self.view];
    NSLog(@"%f", curPoint.x * calculateSlope(0, 0, 320, 180));
    
    CGFloat x = curPoint.x;
    
    // 初始化3D变换,获取默认值
    CATransform3D perspectiveTransform = CATransform3DIdentity;
    
    // 透视
    perspectiveTransform.m34 = -1.0/2000.0;
    
    // 空间旋转
    perspectiveTransform = \
        CATransform3DRotate(perspectiveTransform,
                            DEGREES__TO__RADIANS(x*calculateSlope(0, 0, 320, 180)), 0, 1, 0);
    [CATransaction setDisableActions:YES];
    _layer.transform = perspectiveTransform;
    
    if (x >= 160)
    {
        [CATransaction setDisableActions:YES];
        _layer.contents = (__bridge id)([UIImage imageNamed:@"pic2"].CGImage);
    }
    else
    {
        [CATransaction setDisableActions:YES];
        _layer.contents = (__bridge id)([UIImage imageNamed:@"pic1"].CGImage);
    }
}

#pragma mark - 计算斜率 k
CGFloat calculateSlope(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y2 - y1) / (x2 - x1);
}

#pragma mark - 计算常数 b
CGFloat calculateConstant(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y1*(x2 - x1) - x1*(y2 - y1)) / (x2 - x1);
}

@end

翻页停止后的动画:

//
//  RootViewController.m
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "POP.h"

@interface RootViewController ()

@property (nonatomic, strong) CALayer *layer;

@end

@implementation RootViewController

// 将角度转换为弧度
#define DEGREES__TO__RADIANS(d)  ((d) * M_PI / 180.f)

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // layer
    _layer = [CALayer layer];
    _layer.frame = (CGRect){CGPointMake(80, 100), CGSizeMake(160, 300)};
    _layer.backgroundColor = [UIColor redColor].CGColor;
    _layer.anchorPoint = CGPointMake(1.f, 0.5f);
    _layer.contents = (__bridge id)([UIImage imageNamed:@"pic1"].CGImage);
    [self.view.layer addSublayer:_layer];
    _layer.borderColor = [UIColor blackColor].CGColor;
    _layer.borderWidth = 2.f;
    _layer.cornerRadius = 4.f;
    _layer.transform = CATransform3DMakeRotation(DEGREES__TO__RADIANS(0), 0.0, 1.0, 0.0);
    
    // 手势
    UIPanGestureRecognizer *pan = \
    [[UIPanGestureRecognizer alloc] initWithTarget:self
                                            action:@selector(handlePan:)];
    [self.view addGestureRecognizer:pan];
}

- (void)handlePan:(UIPanGestureRecognizer *)sender
{
    CGPoint curPoint = [sender locationInView:self.view];
    NSLog(@"%f", curPoint.x * calculateSlope(0, 0, 320, 180));
    
    CGFloat x = curPoint.x;
    
    // 初始化3D变换,获取默认值
    CATransform3D perspectiveTransform = CATransform3DIdentity;
    
    // 透视
    perspectiveTransform.m34 = -1.0/2000.0;
    
    // 空间旋转
    perspectiveTransform = \
    CATransform3DRotate(perspectiveTransform,
                        DEGREES__TO__RADIANS(x*calculateSlope(0, 0, 320, 180)), 0, 1, 0);
    [CATransaction setDisableActions:YES];
    _layer.transform = perspectiveTransform;
    
    if (x >= 160)
    {
        [CATransaction setDisableActions:YES];
        _layer.contents = (__bridge id)([UIImage imageNamed:@"pic2"].CGImage);
    }
    else
    {
        [CATransaction setDisableActions:YES];
        _layer.contents = (__bridge id)([UIImage imageNamed:@"pic1"].CGImage);
    }
    
    if (sender.state == UIGestureRecognizerStateEnded)
    {
        if (x >= 160)
        {
            // 初始化3D变换,获取默认值
            CATransform3D perspectiveTransform = CATransform3DIdentity;
            
            // 透视
            perspectiveTransform.m34 = -1.0/2000.0;
            
            // 空间旋转
            perspectiveTransform = \
            CATransform3DRotate(perspectiveTransform,
                                DEGREES__TO__RADIANS(180), 0, 1, 0);
            
            [CATransaction setDisableActions:NO];
            _layer.transform = perspectiveTransform;
        }
        else
        {
            // 初始化3D变换,获取默认值
            CATransform3D perspectiveTransform = CATransform3DIdentity;
            
            // 透视
            perspectiveTransform.m34 = -1.0/2000.0;
            
            // 空间旋转
            perspectiveTransform = \
            CATransform3DRotate(perspectiveTransform,
                                DEGREES__TO__RADIANS(0), 0, 1, 0);
            
            [CATransaction setDisableActions:NO];
            _layer.transform = perspectiveTransform;
        }
    }
}

#pragma mark - 计算斜率 k
CGFloat calculateSlope(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y2 - y1) / (x2 - x1);
}

#pragma mark - 计算常数 b
CGFloat calculateConstant(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y1*(x2 - x1) - x1*(y2 - y1)) / (x2 - x1);
}

@end

本来想用POP库来实现复杂的动画的,结果发现实现不了......

无语的bug:

//
//  RootViewController.m
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "POP.h"

@interface RootViewController ()

@property (nonatomic, strong) CALayer *layer;

@end

@implementation RootViewController

// 将角度转换为弧度
#define DEGREES__TO__RADIANS(d)  ((d) * M_PI / 180.f)

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // layer
    _layer = [CALayer layer];
    _layer.frame = (CGRect){CGPointMake(80, 100), CGSizeMake(160, 300)};
    _layer.backgroundColor = [UIColor redColor].CGColor;
    _layer.anchorPoint = CGPointMake(1.f, 0.5f);
    _layer.contents = (__bridge id)([UIImage imageNamed:@"pic1"].CGImage);
    [self.view.layer addSublayer:_layer];
    _layer.borderColor = [UIColor blackColor].CGColor;
    _layer.borderWidth = 2.f;
    _layer.cornerRadius = 4.f;
    _layer.transform = CATransform3DMakeRotation(DEGREES__TO__RADIANS(0), 0.0, 1.0, 0.0);
    
    // 手势
    UIPanGestureRecognizer *pan = \
    [[UIPanGestureRecognizer alloc] initWithTarget:self
                                            action:@selector(handlePan:)];
    [self.view addGestureRecognizer:pan];
}

- (void)handlePan:(UIPanGestureRecognizer *)sender
{
    CGPoint curPoint = [sender locationInView:self.view];
    
    CGFloat x = curPoint.x;
    
    // 初始化3D变换,获取默认值
    CATransform3D perspectiveTransform = CATransform3DIdentity;
    
    // 透视
    perspectiveTransform.m34 = -1.0/2000.0;
    
    // 空间旋转
    perspectiveTransform = \
    CATransform3DRotate(perspectiveTransform,
                        DEGREES__TO__RADIANS(x*calculateSlope(0, 0, 320, 180)), 0, 1, 0);
    [CATransaction setDisableActions:YES];
    _layer.transform = perspectiveTransform;
    
    if (x >= 160)
    {
        [CATransaction setDisableActions:YES];
        _layer.contents = (__bridge id)([UIImage imageNamed:@"pic2"].CGImage);
    }
    else
    {
        [CATransaction setDisableActions:YES];
        _layer.contents = (__bridge id)([UIImage imageNamed:@"pic1"].CGImage);
    }
    
    if (sender.state == UIGestureRecognizerStateEnded)
    {
        if (x >= 160)
        {
            POPSpringAnimation *rotationY = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotationY];
            rotationY.toValue = @(DEGREES__TO__RADIANS(180));
            rotationY.springBounciness = 12.f;
            [_layer pop_addAnimation:rotationY
                              forKey:@"layerStrokeAnimation"];
        }
        else
        {
            POPSpringAnimation *rotationY = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotationY];
            rotationY.toValue = @(DEGREES__TO__RADIANS(0));
            rotationY.springBounciness = 12.f;
            [_layer pop_addAnimation:rotationY
                              forKey:@"layerStrokeAnimation"];
        }
    }
}

#pragma mark - 计算斜率 k
CGFloat calculateSlope(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y2 - y1) / (x2 - x1);
}

#pragma mark - 计算常数 b
CGFloat calculateConstant(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y1*(x2 - x1) - x1*(y2 - y1)) / (x2 - x1);
}

@end