AI 助理
备案控制台
开发者社区 云计算 文章 正文

实现翻页效果

2016-04-18 1423
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

实现翻页效果

 

简单翻页:

//
//  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

游贤明
目录
相关文章
掘金防诈骗集团CEO
|
前端开发
CSS实现漂浮的气球
CSS实现漂浮的气球
掘金防诈骗集团CEO
151 0
疯狂的猿
|
8月前
超简单的html+css魔幻霓虹灯文字特效
超简单的html+css魔幻霓虹灯文字特效
疯狂的猿
70 3
超简单的html+css魔幻霓虹灯文字特效
宁在春
|
8月前
|
数据采集 前端开发 JavaScript
💗中秋💗CSS动画 | 嫦娥奔月
💗中秋💗CSS动画 | 嫦娥奔月
宁在春
80 2
北海屿鹿
|
8月前
|
前端开发 索引 容器
CSS 实现七彩圆环loading动画
CSS 实现七彩圆环loading动画
北海屿鹿
119 0
和你一起去月球
图片滚动 marquee
图片滚动 marquee
和你一起去月球
96 0
winx_19970108018
|
前端开发
css创意罗盘表盘
css创意罗盘表盘
winx_19970108018
101 0
anny_4243
|
程序员 开发工具 iOS开发
UIVisualEffectView 毛玻璃效果
UIVisualEffectView 毛玻璃效果
anny_4243
608 0
岛上码农
|
容器
利用CustomScrollView实现更有趣的滑动效果
本篇介绍了 CustomScrollView 的基本用法以及 SliverAppBar 的使用，通过 SliverAppBar 可以让导航栏的滑动更有趣。
岛上码农
850 0
利用CustomScrollView实现更有趣的滑动效果
韩俊强
高仿Tumblr点赞心破碎动画 
上一篇：高仿Tumblr点赞心破碎动画  最近Tumblr轻博客无论是web端还是移动端，都非常受欢迎，简单调研了一下，此篇是关于滚动热点条数的动画； JQScrollNumberLabel 简介： JQScrollNumberLabel 仿tumblr热度滚动数字条数，一个显示数字的控件，当你改变其数字时，能够有滚动的动画，同时动画和位数可以限制，动态创建和实例化可选，字体样式自定义等等。
韩俊强
675 0
天隆金
百叶窗图片切换
在线演示 本地下载
天隆金
987 0