ViewPager动画效果(一)

ViewPager~起飞!

viewpager的简单使用我就不说了,网上多得是。这篇文章是ViewPager系列的第一篇,主要将一些ViewPager的高级应用。

  • 项目结构
  • 开始改造

项目开始之前的结构

这里写图片描述
跟这篇文章相关的就是我红色标注的3个.
其他的没用,是我干别的时候用的,因为我懒所以没有新建demo(~_~)!。结构很简单,一个简单的viewpager演示demo。
ViewpagerAdapter : 一个viewpager的适配器。
TranslateFragmentpter : 仅仅是一个fragment。
ViewPagerActivity : 一个activity。

开始改造

Viewpager提供了一个方法,用于动画效果。
setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)

 Mviewpager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {

            }
        });

现在主要的就是写transformPage(View page, float position)这个方法了。
首先有几点你需要了解:
1.此方法是滑动的时候每一个页面View都会调用该方法
2.view:指当前的页面
3.position:指当前滑动的位置
view好理解,咱们只要解释一下position。
这里写图片描述
大家都知道,viewpager会默认预加载。
如图所示,position=0是可见的。
假设我想从第一个界面翻页到第二界面
第一界面的position是由 0 慢慢变到 -1,
第二界面的position是由 1 慢慢变到 0.
谷歌提供了示例代码两个。DepthPageTransformer和ZoomOutPageTransformer
DepthPageTransformer

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.  
            view.setAlpha(0);  

        } else if (position <= 0) { // [-1,0]  
            // Use the default slide transition when moving to the left page  
            view.setAlpha(1);  
            view.setTranslationX(0);  
            view.setScaleX(1);  
            view.setScaleY(1);  

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

            // Counteract the default slide transition  
            view.setTranslationX(pageWidth * -position);  

            // Scale the page down (between MIN_SCALE and 1)  
            float scaleFactor = MIN_SCALE  
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));  
            view.setScaleX(scaleFactor);  
            view.setScaleY(scaleFactor);  

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

这里写图片描述
ZoomOutPageTransformer

package com.zhy.view;  

import android.annotation.SuppressLint;  
import android.support.v4.view.ViewPager;  
import android.util.Log;  
import android.view.View;  

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

    @SuppressLint("NewApi")  
    public void transformPage(View view, float position)  
    {  
        int pageWidth = view.getWidth();  
        int pageHeight = view.getHeight();  

        Log.e("TAG", view + " , " + position + "");  

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

        } else if (position <= 1) //a页滑动至b页 ; a页从 0.0 -1 ;b页从1 ~ 0.0  
        { // [-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)  
            {  
                view.setTranslationX(horzMargin - vertMargin / 2);  
            } else  
            {  
                view.setTranslationX(-horzMargin + vertMargin / 2);  
            }  

            // Scale the page down (between MIN_SCALE and 1)  
            view.setScaleX(scaleFactor);  
            view.setScaleY(scaleFactor);  

            // Fade the page relative to its size.  
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)  
                    / (1 - MIN_SCALE) * (1 - MIN_ALPHA));  

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

这里写图片描述

注意:不兼容3.0以下的版本的,该方法的注释上写到
如果你想向下兼容到3.0以下你可以修改源码,建议参考鸿洋大神的博客
[http://blog.csdn.net/lmj623565791/article/details/40411921]

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值