All Projects → leifu1107 → Viewpagertransformer

leifu1107 / Viewpagertransformer

Viewpager动画,包括渐变,旋转,缩放,3D,立方体等多种酷炫效果动画,实现原理是自定义ViewpagerTransformer,当然你也可以自定义多种动画

Programming Languages

java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to Viewpagertransformer

Viewpagertransition
viewpager with parallax pages, together with vertical sliding (or click) and activity transition
Stars: ✭ 3,017 (+4766.13%)
Mutual labels:  transformer, viewpager, parallax
Parallaxscrollingview
Parallax scrolling either by offset or automatically.
Stars: ✭ 91 (+46.77%)
Mutual labels:  viewpager, parallax
Materialviewpager
A Material Design ViewPager easy to use library
Stars: ✭ 8,224 (+13164.52%)
Mutual labels:  viewpager, parallax
Android Viewpager Transformers
A collection of view pager transformers
Stars: ✭ 546 (+780.65%)
Mutual labels:  transformer, viewpager
Cardslideview
一行代码实现ViewPager卡片效果,比ViewPager2更强大,底层同样是RecyclerView
Stars: ✭ 301 (+385.48%)
Mutual labels:  3d, viewpager
Transformer page view
PageTransformer for flutter
Stars: ✭ 341 (+450%)
Mutual labels:  transformer, parallax
Easyflipviewpager
📖 The library for creating book and card flip animations in ViewPager in Android
Stars: ✭ 698 (+1025.81%)
Mutual labels:  transformer, viewpager
Machine Translation
Stars: ✭ 51 (-17.74%)
Mutual labels:  transformer
Spherelayout
a layout which supports 3d rotate and enable its childview has z-depth for android
Stars: ✭ 55 (-11.29%)
Mutual labels:  3d
React Native Step Indicator
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
Stars: ✭ 1,054 (+1600%)
Mutual labels:  viewpager
Sophus
C++ implementation of Lie Groups using Eigen.
Stars: ✭ 1,048 (+1590.32%)
Mutual labels:  3d
Navmeshscene
based on recastnavigation, a 3d scene
Stars: ✭ 53 (-14.52%)
Mutual labels:  3d
Ueviewer
Viewer and exporter for Unreal Engine 1-4 assets (UE Viewer).
Stars: ✭ 1,083 (+1646.77%)
Mutual labels:  3d
Lax.js
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
Stars: ✭ 8,274 (+13245.16%)
Mutual labels:  parallax
Gatsby Starter Portfolio Cara
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Stars: ✭ 1,101 (+1675.81%)
Mutual labels:  parallax
Helix Toolkit
Helix Toolkit is a collection of 3D components for .NET.
Stars: ✭ 1,050 (+1593.55%)
Mutual labels:  3d
Dgel
A WebGPU engine.
Stars: ✭ 60 (-3.23%)
Mutual labels:  3d
Palmgenerator
Three.js module to generate palms procedurally.
Stars: ✭ 58 (-6.45%)
Mutual labels:  3d
Vietnamese Electra
Electra pre-trained model using Vietnamese corpus
Stars: ✭ 55 (-11.29%)
Mutual labels:  transformer
Simpleparallax.js
Simple and tiny JavaScript library that adds parallax animations on any images
Stars: ✭ 1,075 (+1633.87%)
Mutual labels:  parallax

Viewpager各种效果

效果图

自定义的ViewpagerTransformer说明

动画
基类 BasePageTransformer
渐变 AlphaPageTransformer
旋转 RotatePageTransformer
立方体 CubePageTransformer
可折叠的 AccordionPageTransformer
急速 FlipPageTransformer
前背景和后背景渐变,后背景有个放大缩小效果 DepthPageTransformer
前背景和后背景渐变 ZoomFadePageTransformer
前背景和后背景直接缩放 ZoomCenterPageTransformer
左右滑动缩放 ZoomPageTransformer
画廊展示效果 ZoomOutPagerTransformer

使用步骤

Step 1.添加依赖

项目的 build.gradle 添加

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

/app/build.gradle

	dependencies {
          compile 'com.github.leifu1107:ViewpagerTransformer:V1.0'
  }

Step 2.在布局文件中添加ViewPager

<android.support.v4.view.ViewPager
            android:id="@+id/banner_main_cube"
            android:layout_width="match_parent"
            android:layout_height="120dp"/>

Step 3.在Activity中直接调用setPageTransformer方法即可(一屏显示多个子页面\画廊效果不适合,还需要增加代码)

  //立方体效果
  banner_main_cube.setPageTransformer(false, new CubePageTransformer());//也可自定义动画范围大小new CubePageTransformer(90f)
  banner_main_cube.setAdapter(new ViewPagerAdpter(getData()));

Step 4.一屏显示多个子页面和画廊效果需要额外配置

布局文件(ViewPager和父布局都需要添加clipChildren="false")

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:clipChildren="false">

            <android.support.v4.view.ViewPager
                android:id="@+id/banner_main_ZoomOut"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:layout_marginLeft="80dp"
                android:layout_marginRight="80dp"
                android:clipChildren="false"
                />
        </LinearLayout>

Activity中代码(setPageMargin设置负值边距才能调整合适)

 //画廊展示效果
        banner_main_ZoomOut.setPageMargin(-DensityUtil.dip2px(getApplicationContext(), 10));//设置viewpage两个页面间距,要使间距变小请设置负值或者在Adpter中重写getPageWidth
        banner_main_ZoomOut.setOffscreenPageLimit(3);//提前预加载3个,数量最好大于3个
        banner_main_ZoomOut.setPageTransformer(false, new ZoomOutPagerTransformer(0.7f));
        banner_main_ZoomOut.setAdapter(new ViewPagerAdpter(getData()));
一屏显示3个页面后,viewpager滚动活动中间的页面才能左右滑动,滑动左右两边的页面没有效果(可通过事件分发处理)
ll_Multiple为ViewPager的父布局,不要忘记父布局添加clickable="true"
//处理只能点击中间范围viewpage才能滑动,点击左右两边的viewpage也可以滑动,注意要设置LinearLayout的clickable="true"
        findViewById(R.id.ll_Multiple).setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                banner_main_Multiple.onTouchEvent(event);
                return false;
            }
        });

APK文件

扫描二维码 或者 点击二维码 下载

ViewpagerTransformer

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].