iOS实现翻页效果动画实例代码

大体思路:

在self.view 上放置一个label,label.text从数组中获得,当点击上下页按钮的时候,改变label.text,并且执行翻页效果动画.

效果如图:

主要代码:

#pragma mark - 下一页按钮响应事件
- (void)nextPage:(UIButton *)btn {
  _forwardBtn.enabled = YES;
  if (_count<_arr.count-1) {
    btn.enabled = YES;
    _label.text = [_arr objectAtIndex:_count+1];
    NSString *subtypeString;
    subtypeString = kCATransitionFromRight;
    [self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:self.view];
    _count = _count + 1;
  } else {
    _count = _arr.count - 1;
    btn.enabled = NO;
    [self showAlert:@"已经是最后一页咯,亲(づ ̄ 3 ̄)づ"];
  }
  NSLog(@"%ld", (long)_count);

}

#pragma CATransition动画实现
/**
 * 动画效果实现
 *
 * @param type  动画的类型 在开头的枚举中有列举,比如 CurlDown//下翻页,CurlUp//上翻页
,FlipFromLeft//左翻转,FlipFromRight//右翻转 等...
 * @param subtype 动画执行的起始位置,上下左右
 * @param view  哪个view执行的动画
 */
- (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIView *) view {
  CATransition *animation = [CATransition animation];
  animation.duration = 0.7f;
  animation.type = type;
  if (subtype != nil) {
    animation.subtype = subtype;
  }
  animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;
  [view.layer addAnimation:animation forKey:@"animation"];
}

主要就是熟悉一下简单动画的实现了

本项目gitHub地址:https://github.com/iOSJason/PageBlurDemo.git

2 添加启动页和手势控制的翻页效果实现,添加swipe手势后画面切换更生动.

效果图:

#pragma mark - 手势
- (void)configTapGes {
  _fromRightSwip = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(nextPage:)];
  _fromRightSwip.direction = UISwipeGestureRecognizerDirectionLeft;
  [self.view addGestureRecognizer:_fromRightSwip];

  _fromLeftSwip = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(forwardPage:)];
  _fromLeftSwip.direction = UISwipeGestureRecognizerDirectionRight;
  [self.view addGestureRecognizer:_fromLeftSwip];
}
//判断是否是第一次进入程序
if (![[[NSUserDefaults standardUserDefaults] objectForKey:@"isFirst"] isEqualToString:@"yes"]) {
      //显示提示
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"tishi" message:@"" delegate:self cancelButtonTitle:@"晓得了" otherButtonTitles: nil];
    [alert show];
    [[NSUserDefaults standardUserDefaults]setObject:@"yes" forKey:@"isFirst"];
  }

动画效果和上一个是一种效果,具体代码请看我的gibHub,和上一个项目在一个地址里面,这个在 SwipeGesturePageBlurDemo 分支中.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS动画特效之立方体翻转

    先来看看效果: 下面进入正题,是时候展现真正的技术了: 首先在控制器里添加一个scrollView,再在scrollView上的对应位置上添加要展示的imageView(立方体视图组),当然也可以放上其它子控制器的view实现更多功能这个随意不是重点 //*******添加scrollView******* [self createScrollView]; //******创建立方体视图组****** [self createCubicViewArray]; //添加视图到scrollView上

  • iOS图片界面翻页切换效果

    先看效果: 下面贴代码: #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *backgroundView; @property (strong,nonatomic) NSArray *array; @end @implementation ViewController -(NSArray *)array { if (_arra

  • IOS实现微信朋友圈相册评论界面的翻转过渡动画

    先来看看实现的类似效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的背景,一张图片和一个查看评论的按钮: - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor blackColor];// 背景设为黑色 //

  • iOS高仿微信相册界面翻转过渡动画效果

    点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得很有意思,于是自己学着做了一下,其实也很简单,下面是实现的类似的效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的背

  • 利用iOS开发实现翻转扑克牌动画的方法

    前言 本文主要给大家介绍的关于利用iOS开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 动画效果 实现原理 实现原理就是创建三个扑克牌pockerView , 先在扑克牌上添加一个imageview,作为牌的背面.然后实现翻转动画,在翻转的时候将imageview移除,添加另一个imageview作为正面. 核心代码: 方法一: 翻转动画,内部实现还是方法二 + (void)transitionWithView:(UIView *)view dura

  • iOS实现日历翻页动画

    本文我主要描述两方面: 1.日历(简单描述原理) 2.翻页动画(重点) 最终的效果如下图:     图中沿四个对角的翻页动画,代表对应方向手势的滑动 1. 日历 要实现一个日历,其实原理很简单,我们只要知道三个数据: 1.今天是哪一天 2.这个月的第一天是星期几(哪天) 3.这个月总共有多少天 根据这个三个数据,就可以把得到的日期显示在日历上了,至于日历用什么来显示,我个人比较喜欢用UICollectionView,一个cell代表一天,当然也可以用很多个label,button来显示. 1.获

  • iOS动画-定时对UIView进行翻转和抖动的方法

    (翻转)方式一: [NSTimer scheduledTimerWithTimeInterval:3.f repeats:YES block:^(NSTimer * _Nonnull timer) { CABasicAnimation* rotationAnimation = [CABasicAnimation animation];; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.

  • iOS实现翻页效果动画实例代码

    大体思路: 在self.view 上放置一个label,label.text从数组中获得,当点击上下页按钮的时候,改变label.text,并且执行翻页效果动画. 效果如图: 主要代码: #pragma mark - 下一页按钮响应事件 - (void)nextPage:(UIButton *)btn { _forwardBtn.enabled = YES; if (_count<_arr.count-1) { btn.enabled = YES; _label.text = [_arr obj

  • ios电子书翻页效果代码详解

    近实现了一个完整的电子书阅读器,支持txt和epub格式的电子书阅读,其中epub支持图文混排的方式展示.本文主要谈谈其中两种翻页效果的实现,分别为仿真翻页和水平滑动翻页. 仿真翻页 最合适的方案就是使用系统提供的UIPageviewcontroller了,不过默认的UIpageviewcontroller翻页时背面是白色的,而阅读器通常都会有背景色或背景图片,翻页时用户体验就很糟糕,比如就像下面这样 所以接下来主要说说如何修改背面颜色以达到美观的翻页效果. UIpageviewcontroll

  • 使用原生JS实现滚轮翻页效果的示例代码

    一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 "mousewheel" 事件,而 Firefox 3.5+ 中提供了一个等同的事件:"DOMMouseScroll".与mousewheel事件对应的event对象中我们还会用到另一个特殊属性-wheelDelta属性. 1."m

  • unity scrollRect实现按页码翻页效果

    本文实例为大家分享了unity实现按页码翻页效果的具体代码,供大家参考,具体内容如下 用来做背包 商店的按页翻页功能,先上效果图 其中,dragNum 表示的是 如果为3,便是滑动距离超过当前页面宽度的百分之三十位成功 connect表示 scrollRect下connet的大小 然后是函数的初始化方法 这里提供了两个方法  一个是直接提供页数 参数分别代表 总页数,要显示的页数 以及切换到要显示的页数是否播放滑动动画 以及当时用来做背包.商店的方法2 和上面不用的是传入的是物品的数量以及每页显

  • Unity Shader实现3D翻页效果

    本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下 参考文章:UnityShader使用Plane实现翻书效果 效果图: 原理:Shader顶点动画 在顶点着色器进行对顶点Y值的偏移(使用了Sin函数模拟翻页时产生的弯曲),对顶点X值的偏移实现纸张在翻页时的收缩(一般是不用收缩),最后对顶点进行围绕Z轴旋转实现Plane翻页(Z轴是本例的旋转轴,请根据你具体情况修改,上面的两个偏移同理). Shader "Unlit/PaperTurnMilkSha

  • Unity UGUI实现滑动翻页效果

    本文实例为大家分享了Unity UGUI实现滑动翻页效果的具体代码,供大家参考,具体内容如下 这个问题真的是老生常谈的事情了,不过在这里还是要说一下,以便以后之需 首先看一下效果图 最后在Content下面是一些Image using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using

  • unity实现翻页效果

    本文实例为大家分享了unity实现翻页效果的具体代码,供大家参考,具体内容如下 一.示意图 二.步骤 创建物体ToPanel:添加组件ScrollRect, 在下面创建一个空物体用来装需要移动的子物体, 创建一个Scrollbar: 三.代码 下面展示一些 内联代码片. using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; public class

  • Android使用ViewPager实现翻页效果

    本文实例为大家分享了Android使用ViewPager实现翻页效果的具体代码,供大家参考,具体内容如下 效果如图所示: 代码实现: 1.布局代码:activity_view_pager.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xm

  • iOS自带动画效果的实例代码

     1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

  • javaScript+turn.js实现图书翻页效果实例代码

    为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件   

随机推荐