用ViewPage实现不同的滑动效果

最新推荐文章于 2022-05-19 16:19:58 发布
最新推荐文章于 2022-05-19 16:19:58 发布
阅读量534 收藏
点赞数
分类专栏： Android基础 文章标签： Android 动画 viewpager java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbyh632/article/details/78134523
版权

给ViewPager滑动加一个动画.

在我之前的博客模仿知乎安卓客户端的banner广告条以及一些思考中有写到利用viewPager的PageTransformer来实现各种不同的viewPager的滑动效果,这次我就写了9种不同的效果来练习一下.
代码在我的 github
这里面用的知识点也不是很多,主要是和view变换有关的
0.View.setAlpha()设置透明度

1. View.setPivotX()设置锚点的X坐标值
2. View.setPivotY()设置锚点的Y坐标值
3. View.setScaleX()设置x轴的缩放系数
4. View.setScaleY()设置Y轴的缩放系数
5. View.setTranslationX()设置在X轴的平移值
6. View.setTranslationY()设置在Y轴的平移值
7. View.setTranslationZ()设置在Z轴的平移值
8. View.setRotationX()设置绕X轴旋转中心的的旋转角度,旋转轴位置可以由View.setPivotY()设置Y轴的旋转中心
9. View.setRotationY()设置绕Y轴旋转中心的的旋转角度,旋转轴位置可以由View.setPivotX()设置X轴的旋转中心
10. View.setRotationZ()设置绕Z轴旋转中心的旋转角度,旋转中心由以上两个设置.

View.setCameraDistance()设置相机距离View的距离,避免产生在绕Y轴或者X轴的旋转时产生画面糊脸的效果,一般要设置大一点.

书籍翻页渐隐


public class BookFlippageFadePageTransormer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position <= -1) {
            /*页面已经在屏幕左侧且不可视*/
            page.setAlpha(position);
        } else if (position <= 0) {
            /*页面从左侧进入或者向左侧滑出的状态*/
            page.setAlpha(1 + position);
            page.setPivotY(page.getHeight() / 2);
            page.setPivotX(0);
            page.setCameraDistance(60000);/*调整摄像机的位置，避免出现糊脸的感觉*/
            page.setRotationY((position * 180));
            page.setTranslationX(position * -page.getWidth());
        } else if (position <= 1) {
            /*页面从右侧进入或者向右侧滑出的状态*/
            page.setTranslationX(position * -page.getWidth());
        } else if (position > 1) {
            /*页面已经在屏幕右侧且不可视*/
            page.setTranslationX(position * -page.getWidth());
        }
    }
}

翻页旋转


public class FilpPageRotationPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position < -1) { /* [-Infinity,-1)*/
            /*页面已经在屏幕左侧且不可视*/
        } else if (position <= 0) { /* [-1,0]*/
            /*页面从左侧进入或者向左侧滑出的状态*/
            page.setCameraDistance(60000);
            page.setAlpha(1 + position);
            page.setTranslationX(page.getWidth() * -position);
            page.setPivotX(0);
            page.setRotationY(position * 90);
        } else if (position <= 1) {/* (0,1]*/
            /*页面从右侧进入或者向右侧滑出的状态*/
            page.setCameraDistance(60000);
            page.setTranslationX(page.getWidth() * -position);
            page.setPivotX(0);
            page.setRotationY(position * 90);
            page.setAlpha(1 - position);
        } else if (position > 1) {
        /*页面已经在屏幕右侧且不可视*/
        }
    }
}

卡片绕中心旋转


public class CardFlipoverPageTransormer implements PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position <= -1) {
            /*页面已经在屏幕左侧且不可视*/
            /*设置离开的page不可点击,不可见*/
            page.setClickable(false);
            page.setAlpha(0);
        } else if (position <= 0) {
            page.setClickable(false);
            /*页面从左侧进入或者向左侧滑出的状态*/
            /*把旋转中心改为中间*/
            page.setAlpha(1);
            if (position <= -0.5)
                /*旋转到中间时该页page隐藏掉*/
                page.setAlpha(0);
            page.setPivotX(page.getWidth() / 2);
            page.setPivotY(page.getHeight() / 2);
            page.setTranslationX(position * -page.getWidth());
            page.setCameraDistance(10000);
            page.setRotationY(position * 180);
        } else if (position <= 1) {
            /*页面从右侧进入或者向右侧滑出的状态*/
            /*初始状态要是隐藏状态*/
            page.setAlpha(0);
            if (position <= 0.5)
                /*旋转到中间时该页page显示出来*/
                page.setAlpha(1);
            page.setPivotX(page.getWidth() / 2);
            page.setPivotY(page.getHeight() / 2);
            page.setTranslationX(position * -page.getWidth());
            page.setCameraDistance(10000);
            page.setRotationY(-180 - (1 - position) * 180);
        } else if (position >= 1) {
                        /*页面已经在屏幕右侧且不可视*/
        }
    }
}

立方体旋转


public class CubesPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position <=-1) { /* [-Infinity,-1)*/
        /*页面已经在屏幕左侧且不可视*/
        } else if (position <= 0) { /* [-1,0]*/
            /*页面从左侧进入或者向左侧滑出的状态*/
            page.setCameraDistance(100000);
            page.setPivotX(page.getMeasuredWidth());
            page.setPivotY(page.getMeasuredHeight()*0.5f);
            page.setRotationY(90*position);
        } else if (position <= 1) {/* (0,1]*/
            /*页面从右侧进入或者向右侧滑出的状态*/
            page.setCameraDistance(100000);
            page.setPivotX(0);
            page.setPivotY( page.getWidth()*(0.5f));
            page.setRotationY(90*position);
        }else if (position >1){
        /*页面已经在屏幕右侧且不可视*/
        }
    }
}

转盘旋转


public class TurntablePageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position < -1) { /* [-Infinity,-1)*/
        /*页面已经在屏幕左侧且不可视*/
        } else if (position <= 0) { /* [-1,0]*/
            /*页面从左侧进入或者向左侧滑出的状态*/
            page.setPivotX(page.getWidth() / 2);
            page.setPivotY(page.getHeight());
            page.setRotation(90*position);
        } else if (position <= 1) {/* (0,1]*/
            /*页面从右侧进入或者向右侧滑出的状态*/
            page.setPivotX(page.getWidth() / 2);
            page.setPivotY(page.getHeight());
            page.setRotation(90*position);
        } else if (position > 1) {
        /*页面已经在屏幕右侧且不可视*/
        }
    }
}

层叠缩放


public class CascadeZoomPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position < -1) { /* [-Infinity,-1)*/
        /*页面已经在屏幕左侧且不可视*/
        } else if (position <= 0) { /* [-1,0]*/
            /*页面从左侧进入或者向左侧滑出的状态*/
            page.setAlpha(1 + position);
        } else if (position <= 1) {/* (0,1]*/
            /*页面从右侧进入或者向右侧滑出的状态*/
            page.setTranslationX(page.getWidth() * -position);
            page.setScaleX(1-position*0.5f);
            page.setScaleY(1-position*0.5f);
            page.setAlpha(1 - position);
        }else if (position >1){
        /*页面已经在屏幕右侧且不可视*/
        }
    }
}

折叠向上


/**
 * Created by M on 2017/9/21.
 * 这个要配和在ViewPager里设置android:clipChildren="false"
 * android:margin="xxdp"
 * 在ViewPager的外层里设置android:clipChildren="false"
 */
public class  DepthCardTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position < -1) { /* [-Infinity,-1)*/
        /*页面已经在屏幕左侧第一个*/
            page.setCameraDistance(10000);
            page.setPivotX(page.getWidth()/2);
            page.setPivotY(page.getWidth());
            page.setRotationY(20);
        } else if (position <= 0) { /* [-1,0]*/
            /*页面从左侧进入或者向左侧滑出的状态*/
            page.setCameraDistance(10000);
            page.setPivotX(page.getWidth()/2);
            page.setPivotY(page.getWidth());
            page.setRotationY(-20+(1-position)*20);
        } else if (position <= 1) {/* (0,1]*/
            /*页面从右侧进入或者向右侧滑出的状态*/
            page.setCameraDistance(10000);
            page.setPivotX(page.getWidth()/2);
            page.setPivotY(page.getWidth());
            page.setRotationY(-20+(1-position)*20);
        } else if (position<=2) {
        /*页面已经在屏幕右侧第一个*/
            page.setCameraDistance(10000);
            page.setPivotX(page.getWidth()/2);
            page.setPivotY(page.getWidth());
            page.setRotationY(-20);
        }
    }
}

滑动缩放


/**
 * Created by M on 2017/9/21.
 * 这个要配和在ViewPager里设置android:clipChildren="false"
 * android:margin="xxdp"
 * 在ViewPager的外层里设置android:clipChildren="false"
 */
public class ZoominPagerTransFormer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position < -1) { /* [-Infinity,-1)*/
        /*页面已经在屏幕左侧且不可视*/
            page.setScaleX((float) (1 + position * 0.1));
            page.setScaleY((float) (1 + position * 0.1));
        } else if (position <= 0) { /* [-1,0]*/
            /*页面从左侧进入或者向左侧滑出的状态*/
            page.setScaleX((float) (1 + position * 0.1));
            page.setScaleY((float) (1 + position * 0.1));
        } else if (position <= 1) {/* (0,1]*/
            /*页面从右侧进入或者向右侧滑出的状态*/
            page.setScaleX((float) (1-  position * 0.1));
            page.setScaleY((float) (1 - position * 0.1));
        } else if (position > 1) {
        /*页面已经在屏幕右侧且不可视*/
            page.setScaleX((float) (1-  position * 0.1));
            page.setScaleY((float) (1 - position * 0.1));
        }
    }
}

卡片堆叠


public class CardStackPaegTransformer implements ViewPager.PageTransformer {
    public void transformPage(View page, float position) {
        if (position <= -1) {
         /*页面已经在屏幕左侧且不可视*/
        } else if (position <= 0) {
        /*页面从左侧进入或者向左侧滑出的状态*/
        } else if (position < 1) {
            /*页面从右侧进入或者向右侧滑出的状态*/
            page.setAlpha((float) (1 - position * 0.1));
            page.setPivotX(page.getWidth() / 2f);
            page.setPivotY(page.getHeight() / 2f);
            page.setScaleX((float) Math.pow(0.9f, position));    /*0.9f为缩放系数*/
            page.setScaleY((float) Math.pow(0.9f, position));
            page.setTranslationX(position * -page.getWidth());
            page.setTranslationY(-position * 70);/*70每层card的Y轴间隔*/
        } else if (position >= 1) {
            /*页面已经在屏幕右侧且不可视*/
            page.setAlpha((float) (1 - position * 0.1));
            page.setPivotX(page.getWidth() / 2f);
            page.setPivotY(page.getHeight() / 2f);
            page.setScaleX((float) Math.pow(0.9f, position));
            page.setScaleY((float) Math.pow(0.9f, position));
            page.setTranslationX(position * -page.getWidth());
            page.setTranslationY(-position * 70);
        }
    }
}

卡片堆叠 进阶版


这个进阶版可以看到是在滑动结束后有一个弹跳的类似于果冻动画,这个实际上我是对Viewpage设置了滑动监听,在滑动状态改变时对当前的page设置一个缩放动画,这样就好了
下面是果冻动画的代码,这里安利一个网站inloop.github.io/interpolato…,这个网站可以直观看到不同插值器的曲线变化情况,我的这个插值器也是在这里经过调整之后得到的.

/*配合以下代码可以实现滑动结束后的果冻效果*/
int mCurrentPosition=0;
float mFactor = 0.5f;
mAnimation = new ScaleAnimation(0.9f, 1.0f, 0.9f, 1.0f, 150, 450);
        mAnimation.setDuration(500);
        mAnimation.setFillAfter(true);
        mAnimation.setInterpolator(new Interpolator() {
            @Override
            public float getInterpolation(float input) {
                return (float) (Math.pow(2, -10 * input) * Math.sin((input - mFactor / 4) * (2 * Math.PI) / mFactor) + 0.9);
            }
        });
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                Log.d("MainActivity", "onPageScrolled: position" + position + " positionOffset" + positionOffset + " positionOffsetPixels" + positionOffsetPixels);
            }
            @Override
            public void onPageSelected(int position) {
                Log.d("MainActivity", "onPageSelected: position" + position);
                 mImageViewList.get(mCurrentPosition ).clearAnimation();/*//把上一个page的动画取消掉*/
                mCurrentPosition = position;/*更新当前的page位置*/
                mImageViewList.get(mCurrentPosition).startAnimation(mAnimation);/*开始动画*/
            }
            @Override
            public void onPageScrollStateChanged(int state) {
                Log.d("MainActivity", "onPageScrollStateChanged: state" + state);
            }
        });


Bing_Hui
关注
专栏目录
Android动画全篇系列（十二）——ViewPager滑动动画
01-03
文章目录一、前言二、实现1、参数的介绍2、实现三、ViewPager2四、小结 一、前言 ViewPager的作用很多，一般会结合Fragment来构成能左右滑动的视图结构。ViewPager还能够撸成一个Banner轮播图，只需要自定义一个PageAdapter即可。 当我们将ViewPager与Fragment相结合，我们不需要太多花里胡哨的滑动效果，简单的左右滑动就能够满足我们的要求。 而ViewPager运用于轮播图，或者其他类似的滑动展示的效果时，我们不拘泥于普通的滑动效果，非得实现一些卓尔不群的效果。 二、实现 1、参数的介绍 我们只需简单的调用viewPager.setPage
（转）android中利用 ViewPage 实现滑动屏
weixin_30300523的博客
07-14 74
最近实现了这样的一个效果：滑动界面出现拖拽效果，可翻动3屏，也可点击按钮翻动页面。 主要利用android.support.v4.view.ViewPager控件来实现。 第一个界面： 滑动屏幕： 换到下一屏： 布局文件： 主界面 main.xml <?xml version="1.0" encoding="utf-8"?&g...
ViewPager滑动动画
~~代码中的南城故事，南城故事里的中分女王。
05-19 496
ViewPager在项目中用的地方很多，有默认的滑动动画，下面介绍一下怎么自定义动画 public void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) { boolean hasTransformer = transformer != null; boolean needsPopulate = hasTransformer != (thi
Android 的滑动分析以及各种实现
weixin_33730836的博客
04-22 123
一、滑动效果的产生 滑动一个View，本质区别就是移动一个View。改变当前View所在的坐标，原理和动画相似不断改变坐标位置实现。实现View的滑动就必须监听滑动的事件，并且根据事件传入的坐标，动态且不断改变View的坐标，从而实现View跟随用户触摸的滑动而滑动。（1）、Android的坐标系 Android中将屏幕最左上角的顶点作为Android坐标系的原点，从这个点向右...
设计各种ViewPager页面的滑动动画
Android_jiang的博客
03-21 767
有的时候产品会要求Banner的各种滑动动画，比如 一般都是用viewpager来做这种效果，那要是达到这种效果就需要自己实现ViewPager.PageTransformer接口。ViewPager.PageTransformer它只有一个需要重写的方法transformPage(View view,float position); view就是页面我们可以通过设置各种平移旋转等达到动画...
Android viewpage实现禁止滑动的功能
09-01
在Android开发中，`ViewPager` 是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面，通常用于实现Tab切换或轮播图等效果。然而，在某些特定场景下，我们可能需要禁止用户滑动`ViewPager`，比如当某个页面...
Android的Viewpage2+fragment实现微信滑动界面的效果
10-16
为了实现微信滑动界面的平滑过渡效果，我们可以使用TabLayout与ViewPager2的联动。TabLayout提供了一个方便的扩展，叫做TabLayoutMediator，可以轻松地将Tab与ViewPager2的页面关联起来： ```java TabLayout ...
ViewPage实现手势滑动
04-02
5. **自定义滑动效果**：如果你需要自定义滑动过渡效果，可以使用`ViewPager.PageTransformer`接口。实现`transformPage(View page, float position)`方法，根据页面位置来调整页面的缩放、旋转等效果。 6. **禁止...
Android viewpage实现可控制的禁止滑动
08-28
在Android开发中，ViewPager是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面，通常与Fragment一起使用，提供流畅的页面切换效果。然而，有些场景下我们可能需要根据某些条件来禁止用户滑动ViewPager，...
Tabhost底部选项卡+Fragment和viewPage实现滑动效果
06-02
`TabHost`是Android SDK中用于创建多标签界面的组件，而`Fragment`和`ViewPager`则可以实现平滑的页面滑动效果。 首先，我们需要了解`TabHost`。`TabHost`是一个容器，它允许我们在同一个活动中展示多个`Tab`，每个...
viewpage+滑动的时候标题有悬浮的效果
10-21
本项目当页面滑动到一定位置的时候可以将标题栏悬浮起来，还可以放多少个fragment实现左右滑动。
常见的滑动显示不同的界面
03-08
最常见的一个选择不同按钮或滑动显示不同的界面的东西
ViewPage循环滑动（解决2页图片不显示问题）
09-23
相信大家做ViewPage循环滑动只有2页的时候都会出现页面不显示的问题。这个demo解决了2页图片不显示问题；有两个demo；第一个ViewPagerDemo（2张图片循环显示 通过Bitmap和PhotoView来解决，图片可捏合放大缩小）；第二个ViewPagerDemo（3张图片循环显示不会有问题,而2张图片循环则有BUG）
ViewPage翻页效果
05-04
ViewPage翻页效果实现,简单易懂,利于初学者
Android-各种方向的ViewPager层叠卡片
08-12
各种方向的ViewPager层叠卡片
ViewPage-图片滑动
scong123的博客
12-07 286
//主页面——MainActivity.java package com.example.testviewpage; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.app.Activity; import android.support.v4.vie
android 使用viewpage+fragment 打造顶部导航界面+滑动效果
迟到的微笑
08-27 8139
今天给大家分享一篇简单使用viewpage+fragment打造属于自己的顶部导航。 老规矩先上截图 效果大致上就是上图展示的，各位童鞋可以根据自己的需求更改导航标题，以及加图片之类的 废话不说多，上工程截图 工程是不是很简单。使用androidstudio的童鞋直接拷贝java文件进工程就可以了 首先看我们的布局文件activity_main &lt;LinearLay...
解决viewpage滑动冲突问题
bian_xingkongjinghao的博客
10-09 968
最近做了一个项目，遇到一个界面需要用到两个viewpage，一个大的viewpage套了一个小的viewpage,在滑动小的viewpage时，滑到最后一页，大的viewpage也会跟着滑动，会冲突，解决办法如下： 先写一个类继承ViewPage //让viewpage不滑动 public class NoScrowViewPage extends ViewPager{ publi
ViewPager使用及加入动画
catface
02-29 919
一、ViewPager的基本使用 public class MainActivity extends AppCompatActivity { private ViewPager vp; private int[] imgs = {R.mipmap.welcome1, R.mipmap.welcome2, R.mipmap.welcome3, R.mipmap.welcome...
androidstudio使用Viewpage和tablayout实现滑动效果
最新发布
06-09
好的，下面是使用ViewPager和TabLayout实现滑动效果的步骤： 1.在布局文件中添加ViewPager和TabLayout组件 ```xml <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabMode="scrollable" app:tabTextColor="@android:color/white" app:tabSelectedTextColor="@android:color/white" app:tabIndicatorColor="@android:color/white" app:tabIndicatorHeight="3dp" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2.在Java代码中初始化ViewPager和TabLayout组件 ```java ViewPager viewPager = findViewById(R.id.viewPager); TabLayout tabLayout = findViewById(R.id.tabLayout); MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); ``` 3.实现FragmentPagerAdapter类，用于管理ViewPager中的Fragment ```java public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private String[] titles = {"Tab 1", "Tab 2", "Tab 3"}; public MyFragmentPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch (position) { case 0: return new Fragment1(); case 1: return new Fragment2(); case 2: return new Fragment3(); default: return null; } } @Override public int getCount() { return titles.length; } @Nullable @Override public CharSequence getPageTitle(int position) { return titles[position]; } } ``` 4.实现三个Fragment类，用于显示在ViewPager中的内容 ```java public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment1_layout, container, false); return view; } } public class Fragment2 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment2_layout, container, false); return view; } } public class Fragment3 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment3_layout, container, false); return view; } } ``` 5.创建三个布局文件fragment1_layout.xml、fragment2_layout.xml、fragment3_layout.xml，用于显示在ViewPager中的内容 ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 1" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 2" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 3" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` 以上就是使用ViewPager和TabLayout实现滑动效果的步骤，希望对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值