之前项目要用到图片查看,用的viewPager的基本动画,看了下效果,简直不忍直视,后面就去看了下鸿洋大神的博客,故仿照鸿洋大神博客的两篇文章,总结为一篇,来看看如何实现viewpager的切换动画。话不多说,我们开工。
1、PageTransformer
ViewPager有个方法叫做
setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)
;这个方法实现了viewPager的切换,ViewPager有个方法叫做setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer);这个方法实现了viewPager的切换,官方还给了实例.
- 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);
- }
- }
- }
我们只需要实现transformPage这个方法,我们看到的参数有两个,一个view ,一个position。这个position不是指的view的位置,当我们去观察的时候会发现position的大小是一直变化的,实例也可以看出来,position的值主要分为几个段去判断
[负无穷大,-1] 这个值代表看不见了
[-1,1]
[1,正无穷大] 看不见了
所以最主要的是我们要判断-1,1 我们说个例子,如果从A页滑动到B页,则A的值则是[0,-1],B页的值就是从[0,1],所以我们可以根据这个去自定义动画。
2、自定义viewPager
自定义viewPager去实现切换动画,我们直接拿的鸿神的示范,但是我们也可以实现自己的
最主要的就是实现onPageScroll(int position,float offset,int offsetPixels)
import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; import com.nineoldandroids.view.ViewHelper; import java.util.HashMap; import java.util.Map; /** * Created by yechenglong on 2017/3/13. */ public class MyViewPager extends ViewPager{ private View mleft; private View mRight; private float mTrans; private static final float SCALE_MAX = 0.5f; private Map<Integer,View> viewMap = new HashMap<>(); private float mScale; public MyViewPager(Context context) { super(context); } public MyViewPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onPageScrolled(int position, float offset, int offsetPixels) { float effectoffset = isSmall(offset)?0:offset; mleft =getChlidView(position); mRight = getChlidView(position+1); animateStack(mleft,mRight,effectoffset,offsetPixels); super.onPageScrolled(position, offset, offsetPixels); } private boolean isSmall(float positionOffset) { return Math.abs(positionOffset) < 0.0001; } private View getChlidView(int position){ return viewMap.get(position); } protected void animateStack(View left, View right, float effectOffset, int positionOffsetPixels) { if (right != null) { mScale = (1 - SCALE_MAX) * effectOffset + SCALE_MAX; mTrans = -getWidth() - getPageMargin() + positionOffsetPixels; ViewHelper.setScaleX(right, mScale); ViewHelper.setScaleY(right, mScale); ViewHelper.setTranslationX(right, mTrans); ViewHelper.setAlpha(right,mScale); } if (left != null) { left.bringToFront(); } } public void addChlidView(int position,View view){ viewMap.put(position,view); } }然后我们在自定义adapter中可以添加view到我们的map中,这样就可以获得我们的view
private class MyPageAdapter extends PagerAdapter{ private int[] arr; public MyPageAdapter(int[] arr){ this.arr =arr; } @Override public int getCount() { return arr.length; } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = new ImageView(MainActivity.this); imageView.setImageResource(arr[position]); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); container.addView(imageView); viewPager.addChlidView(position,imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } }说了这么多,贴上地址github地址
https://github.com/FireToYe/ViewPagerDIY
新人希望大家能多多谅解