翻页效果

简介:

翻页效果

 

效果

 

说明

修正以前源码的不妥之处。

 

源码

https://github.com/YouXianMing/Animations


//
//  PageFlipEffectController.m
//  Animations
//
//  Created by YouXianMing on 16/1/6.
//  Copyright © 2016年 YouXianMing. All rights reserved.
//

#import "PageFlipEffectController.h"
#import "Math.h"
#import "WxHxD.h"
#import "CALayer+SetRect.h"
#import "UIView+SetRect.h"

@interface PageFlipEffectController ()

@property (nonatomic, strong) CALayer *layer;
@property (nonatomic, strong) Math    *math;

@end

@implementation PageFlipEffectController

- (void)setup {

    [super setup];
    
    // layer
    _layer               = [CALayer layer];
    _layer.anchorPoint   = CGPointMake(1.f, 0.5f);
    _layer.frame         = CGRectMake(0, 0, Width / 2.f, 300);
    _layer.x             = 0;
    _layer.position      = CGPointMake(Width / 2.f, self.contentView.middleY);
    _layer.contents      = (__bridge id)([UIImage imageNamed:@"pic_1"].CGImage);
    _layer.borderColor   = [UIColor blackColor].CGColor;
    _layer.borderWidth   = 4.f;
    _layer.masksToBounds = YES;
    _layer.transform = CATransform3DMakeRotation([Math radianFromDegree:0], 0.0, 1.0, 0.0);
    [self.contentView.layer addSublayer:_layer];
    
    // 一元一次方程求解
    self.math = [Math mathOnceLinearEquationWithPointA:MATHPointMake(0, 0) PointB:MATHPointMake(Width, 180)];
    
    // 手势
    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, [Math radianFromDegree: x * self.math.k], 0, 1, 0);
    
    [CATransaction setDisableActions:YES];
    _layer.transform = perspectiveTransform;
    
    if (x >= Width / 2.f) {
        
        [CATransaction setDisableActions:YES];
        _layer.contents = (__bridge id)([UIImage imageNamed:@"pic_2"].CGImage);
        
    } else {
        
        [CATransaction setDisableActions:YES];
        _layer.contents = (__bridge id)([UIImage imageNamed:@"pic_1"].CGImage);
    }
}

@end

细节

 


目录
相关文章
|
4月前
|
前端开发
CSS动画(毛玻璃按钮)
CSS动画(毛玻璃按钮)
植物大战僵尸全屏奶油
植物大战僵尸全屏奶油
207 0
|
程序员 开发工具 iOS开发
UIVisualEffectView 毛玻璃效果
UIVisualEffectView 毛玻璃效果
558 0
【Axure教程】鼠标滚动上下翻页效果
【Axure教程】鼠标滚动上下翻页效果
|
移动开发
【笔记】一行代码完成——h5页面上滑图片渐隐
一行代码完成——h5页面上滑图片渐隐
159 0
|
容器
利用CustomScrollView实现更有趣的滑动效果
本篇介绍了 CustomScrollView 的基本用法以及 SliverAppBar 的使用,通过 SliverAppBar 可以让导航栏的滑动更有趣。
804 0
利用CustomScrollView实现更有趣的滑动效果
百叶窗图片切换
在线演示 本地下载
976 0
3d旋转动画焦点图
在线演示 本地下载
677 0
|
Android开发 Kotlin 数据格式
ScrollView滑动—仿微博主页标题栏渐变悬浮及Fragment实现多个内容页面切换
作为一名热爱学习的Android开发工程si,刷微博的时候居然还想着技术呢,觉得自己也是够够了........哈哈哈 image.png 进入今天的正题,微博主页大家肯定是看过的,先看一下微博的效果。
2008 0