实现翻页效果
简单翻页:
//
// 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
