zoukankan      html  css  js  c++  java
  • ViewPager页面切换特效

    ViewPager页面切换特效如下效果

    看效果:

    效果1:效果1

    效果2:效果2

    下面就开始讲解如何实现这两个页面翻转效果

    1.首先你得会ViewPager控件的使用(废话!现在还有人不会使用吗???!!)

    2.你得了解ViewPager的一个回调函数ViewPager.PageTransformer(用于设置ViewPager切换时的动画效果),我们页面切换特效基本就靠他了。

    3.你得了解属性动画(这一部分我会在以后的博文中讲到,读者也可以去读其他的文章,百度一下一大推)

    当上面的都掌握了,你基本写出任何页面转换特效出来了!我只是拿两个做案列

    代码实现

    一.页面布局+初始化ViewPager(这边我直接上代码了,不细说了!太简单了)

    简单布局:简单布局

    初始化ViewPager:初始化ViewPager

    ViewPager的适配器代码:

    至此,我们的准备工作都已经OK! 下面就是真正的干货了!!!

    二.了解ViewPager.PageTransformer(用于设置ViewPager切换时的动画效果)这个这个回调函数

    1.首先我们看一下这个函数ViewPager.PageTransformer:
    函数
    这个函数有两个参数一个是View 还有一个是position。我先解释下这个position,首先呢他的有效取值范围在[-1,1]
    我们就是根据这个值的变化来不停的改变view的相应的属性,以此达到相应的页面转换效果!下面 我就以一张图的形式来解释下view和position之间的关系 大家看一下图解就明白了!
    图解

    说白了就是我在[0,-1)的时候操作A页面 在[1,0)操作B页面 此时页面对应这个函数中的view变量 当[0.-1)时view是A页面 当[1,0)时view是B页面

    2.下面就是开始分析第一个效果,我们可以到的是 A页面沿着X轴缩小 B页面沿X轴放大
    看代码:
    代码

    接着我们再来分析第二个效果,我们看出是沿着Y旋转180度

    看代码
    代码

    该段代码中我们设置View的旋转中心是:

    page.setPivotY(page.getMeasuredHeight() / 2);

    page.setPivotX(page.getMeasuredWidth() / 2);

    A页面Y轴旋转:[0,-180)

    B页面Y轴旋转:[180,0)

    至此,已经讲解完成了!!

    总结

    读者只要了解了ViewPager.PageTransformer这个回调函数基本上页面切换特效已经掌握了!关于这个函数要了解的就是view和position之间的关系。了解两者之间的关系 该函数你就已经了解!其次就是属性动画的功底(不在本篇文章之内)!
    我还在强调一次就是:position可以用变化范围[-1,1] 他与View的对应的关系是:将设ViewPager中的一二两业分别对应A页,B页。那么AB两页对应的position变化就是:A[ 0, -1) B[ 1 , 0 ).读者了解这个关系之后一切问题就迎刃而解了!!!

  • 相关阅读:
    Linux配置YUM源(2020最新最详细)
    Linux系统安装Tomcat9(2020最新最详细)
    Linux系统安装JDK1.8(2020最新最详细)
    框架集项目-登录账户过期,如何回到登录主页!
    C# 以管理员方式运行程序
    C#/STM32 WAV转byte WAV数据格式
    C# base64 转 byte[]
    C# 截取屏幕图像
    emWin 学习笔记 —— 用VS2017打开emWin仿真包
    STM32 时钟配置的坑
  • 原文地址:https://www.cnblogs.com/likeandroid/p/4449023.html
Copyright © 2011-2022 走看看