给ViewPager添加一些炫酷的动画

ViewPagerWithAnimations

给viewPager的添加上动画效果,并且使之兼容API11以下的版本

重写ViewPager类

public class MyViewPager extends ViewGroup {
...
      public void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) {
//        if (Build.VERSION.SDK_INT >= 11) {
            final boolean hasTransformer = transformer != null;
            final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
            mPageTransformer = transformer;
            setChildrenDrawingOrderEnabledCompat(hasTransformer);
            if (hasTransformer) {
                mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
            } else {
                mDrawingOrder = DRAW_ORDER_DEFAULT;
            }
            if (needsPopulate) populate();
//        }
    }
...
}
  1. 注释掉判断SDK版本的地方 if (Build.VERSION.SDK_INT >= 11) {
  2. PageTransformer 改为ViewPager.PageTransformer

XML Layout

<com.zhengsonglan.viewpagerwithanimations.UI.MyViewPager
        android:id="@+id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

编写动画

动画1
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int width = view.getWidth();
        int pageWidth = width;
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            ViewHelper.setAlpha(view, 0);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                float result1=horzMargin-vertMargin/2;
                ViewHelper.setTranslationX(view,result1);
            } else {
                float result2=-horzMargin + vertMargin / 2;
                ViewHelper.setTranslationY(view,result2);
            }

            // Scale the page down (between MIN_SCALE and 1)

            ViewHelper.setScaleX(view,scaleFactor);
            ViewHelper.setScaleY(view,scaleFactor);

            ViewHelper.setAlpha(view,MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                            (1 - MIN_SCALE) * (1 - MIN_ALPHA));
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            ViewHelper.setAlpha(view,0);
        }
    }
}
效果

动画2

/**
 * Created by zsl on 2015/2/25.
 * 动画2
 */
public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            ViewHelper.setAlpha(view,0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page

            ViewHelper.setAlpha(view,1);
            ViewHelper.setTranslationX(view,0);
            ViewHelper.setScaleX(view,1);
            ViewHelper.setScaleY(view,1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            ViewHelper.setAlpha(view,1-position);

            // Counteract the default slide transition
            ViewHelper.setTranslationX(view,pageWidth * -position);
            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            ViewHelper.setScaleX(view,scaleFactor);
            ViewHelper.setScaleY(view,scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            ViewHelper.setAlpha(view,0);
        }
    }
}
效果

动画3
/**
 * Created by zsl on 2015/2/25.
 * 动画3
 */
public class Animation3Transformer implements ViewPager.PageTransformer {
    private static final float MAX_ROATE = 20f;

    public void transformPage(View view, float position) {
        int width = view.getWidth();
        int pageWidth = width;
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            ViewHelper.setRotation(view,0);
        } else if (position <= 1) { // [-1,1]
            float result=position*MAX_ROATE;
            ViewHelper.setPivotX(view,pageWidth*0.5f);
            ViewHelper.setPivotY(view,pageHeight);
            ViewHelper.setRotation(view,result);
        } else { // (1,+Infinity]
            ViewHelper.setRotation(view,0);
        }
    }
}
效果

动画4
/**
 * Created by zsl on 2015/2/25.
 * 动画4
 */
public class Animation4Transformer implements ViewPager.PageTransformer {
    private static final float MAX_ROATE = 360f;

    public void transformPage(View view, float position) {
        int width = view.getWidth();
        int pageWidth = width;
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            ViewHelper.setRotation(view,0);
            ViewHelper.setAlpha(view,1);
        } else if (position <= 1) { // [-1,1]
            float result=position*MAX_ROATE;
            //旋转
            ViewHelper.setPivotX(view,pageWidth*0.5f);
            ViewHelper.setPivotY(view, pageHeight*0.5f);
            ViewHelper.setRotation(view,result);
            //透明度
            ViewHelper.setAlpha(view,1-Math.abs(position));
            //缩放
            ViewHelper.setScaleY(view,1-Math.abs(position));
            ViewHelper.setScaleX(view,1-Math.abs(position));

        } else { // (1,+Infinity]
            ViewHelper.setRotation(view,0);
            ViewHelper.setAlpha(view,1);
        }
    }
效果

Thanks for

1.JakeWharton : NineOldAndroids

2.Google : Using ViewPager for Screen Slides

Developed By

  • zsl - <[email protected]>

源码地址

ViewPagerWithAnimations

欢迎Star

时间: 2024-10-05 04:27:53

给ViewPager添加一些炫酷的动画的相关文章

Android实现炫酷SVG动画效果

svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器(如火狐浏览器)来观看.使用svg格式可让你设计激动人心的.高分辨率的Web图形页面. svg格式具备目前网络流行的jpg和png等格式无法具备的优势:可以任意放大图形显示,但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲,s

为你的WordPress博客添加CSS3炫酷读者墙

为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码 1 2 3 4 5 < ?php /* Template Name: Reader wall */ ?> 2.接着改文件下面找到 1 < ?php the_content('');?> 在它的前面添加下面的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 1

一款炫酷Loading动画--载入失败

简单介绍 上一篇文章一款炫酷Loading动画–载入成功.给大家介绍了成功动画的绘制过程,这篇文章将接着介绍载入失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比較简单了. 动画结构分析 首先我们来看失败动画的一张图: 失败动画的状态转移描写叙述例如以下: 1.载入过程,画蓝色圆环,当进度为100%时.圆环完毕 2.从右側抛出蓝色小方块.小方块沿着曲线到达圆环正上方 3.小方块突然消失.红色感叹号逐渐出现 4.感叹号完整出现以后.圆环变红色.感叹号发生震动 因为前两个过程,和

一款炫酷Loading动画--加载失败

简介 上一篇文章一款炫酷Loading动画–加载成功,给大家介绍了成功动画的绘制过程,这篇文章将接着介绍加载失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比较简单了. 动画结构分析 首先我们来看失败动画的一张图: 失败动画的状态转移描述如下: 1.加载过程,画蓝色圆环,当进度为100%时,圆环完成 2.从右侧抛出蓝色小方块,小方块沿着曲线到达圆环正上方 3.小方块突然消失,红色感叹号逐渐出现 4.感叹号完整出现以后,圆环变红色,感叹号发生震动 由于前两个过程,和加载成功是一

uwp - 做一个相对炫酷的动画按钮/按钮动画

看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心放大(1)并同时渐隐(2),外圆从中心放大(3)并同时渐隐(4),按钮整体从中心缩小放大(5),非常简单对吧,代码也是. 为了方便调用,我用一个自定义用户控件来做,图标是用iconfont,这样可以在任何地方使用,首先新建[AnimationButton.xaml]用户控件,前台代码将自动生成的部分替换: <UserControl.Resources>

unity 3D炫酷开场动画

////////////////////2015/07/07////////// ///////////////////by xbw//////////////// /////////////////环境 unity 4.6.1/// 游戏之前播放一段炫酷的动画是不是很能增加吸引力: unity支持的视频格式有mov. mpg. mpeg. mp4. avi. asf. 我们把需要的视频直接拖进Project中, 接下来就是代码了: using UnityEngine; using System

一款炫酷Loading动画--加载成功

简介 昨天在简书上看到一篇文章,介绍了一个加载动画的实现过程 一款Loading动画的实现思路(一) 只可惜原动画是IOS上制作的,而看了一下,作者的实现思路比较复杂,于是趁着空闲写了一个Android版本,这篇文章将给大家介绍一下实现过程. 首先让我们来看一下动画效果 动画结构分析 从上面的gif图中可以看到,这个加载动画有成功,失败两种状态,由于Gif速度比较快,我们再来分别看一张慢图 1.成功状态加载动画 成功动画的状态转移描述如下: 1.加载过程,画蓝色圆环,当进度为100%时,圆环完成

28种CSS3炫酷载入动画特效

这是一组效果很炫酷的纯CSS3 Loading载入动画特效.这组loading动画共同拥有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完毕的,每个载入动画都构思新颖.效果很的酷. 效果演示:http://www.htmleaf.com/Demo/201503301597.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201503301596.html

[Android] BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen