翻页效果

简介:

翻页效果

 

效果

 

说明

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

 

源码

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

细节

 


目录
相关文章
|
5月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
|
7月前
|
前端开发
CSS动画(毛玻璃按钮)
CSS动画(毛玻璃按钮)
|
前端开发 JavaScript
2023跨年代码(烟花+背景音乐)
2023跨年代码(烟花+背景音乐)
396 0
|
小程序
樱花飘落模拟器-请你看樱花静静的飘落
今天是一个美好的日子,所以小蚂蚁决定教大家用微信小游戏制作工具做一个温暖而美好的“樱花飘落模拟器”小程序,然后把它送给所爱的人。 先看一下最终的效果图。
138 0
|
前端开发 开发工具
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
588 0
教你用HTML+CSS实现百叶窗动画效果
|
容器
利用CustomScrollView实现更有趣的滑动效果
本篇介绍了 CustomScrollView 的基本用法以及 SliverAppBar 的使用,通过 SliverAppBar 可以让导航栏的滑动更有趣。
841 0
利用CustomScrollView实现更有趣的滑动效果
百叶窗图片切换
在线演示 本地下载
983 0
3d旋转动画焦点图
在线演示 本地下载
688 0
3D文字特效
在线演示 本地下载
868 0

热门文章

最新文章