ViewPager切换动画

来源:互联网 发布:2016中日贸易数据 编辑:程序博客网 时间:2024/06/05 03:57
1,不用ABaseTransformer
  • 1,depth
    ezgif.com-video-to-gif.gif
public class DepthPageTransformer implements ViewPager.PageTransformer {    private static final float MIN_SCALE = 0.75f;      public void transformPage(View view, float position) {//        假设现在ViewPager在A页现在滑出B页,则://        A页的position变化就是( 0, -1]//        B页的position变化就是[ 1 , 0 ]        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);          }      }  } 
  • 2,zoomOutPage
    zoomoutpage.gifde
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,depth2
    depth2.gif
public class MyTransformer2 implements ViewPager.PageTransformer {    private static float MIN_SCALE = 0.75f;    @Override    public void transformPage(View view, float position) {//        if (postion > 0 && postion < 1) {//            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - postion);//            view.setScaleX(scaleFactor);//            view.setScaleY(scaleFactor);//            view.setTranslationX(view.getWidth() * -postion);//            view.setAlpha(1 - postion);//        }        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);        }    }}
  • 4,flipy
    flipy.gif
public class MyTransformer4 implements ViewPager.PageTransformer {ViewPager viewPager;@Overridepublic void transformPage(View view, float position) {if (position > -1 && position < 1) {view.setTranslationX(-position * view.getWidth());float scaleFactor;float aPostion = Math.abs(position);if (aPostion < 0.5) {scaleFactor = 1 - aPostion;} else {scaleFactor = aPostion;}view.setScaleX(0.75f + 0.25f * scaleFactor);view.setScaleY(0.7f + 0.3f * scaleFactor);view.setRotationY(180 * position);if (Math.abs(position) < 0.5) {view.setVisibility(View.VISIBLE);} else {view.setVisibility(View.INVISIBLE);}}}}
  • 5,3dflip
    3dflip.gif
public class StereoPagerTransformer implements ViewPager.PageTransformer {    private static final float MAX_ROTATE_Y = 90;    private static final TimeInterpolator sInterpolator = new TimeInterpolator() {        @Override        public float getInterpolation(float input) {            if (input < 0.7) {                return input * (float) pow(0.7, 3) * MAX_ROTATE_Y;            } else {                return (float) pow(input, 4) * MAX_ROTATE_Y;            }        }    };    private final float pageWidth;    public StereoPagerTransformer(float pageWidth) {        this.pageWidth = pageWidth;    }    public void transformPage(View view, float position) {        view.setPivotY(view.getHeight() / 2);        if (position < -1) { // [-Infinity,-1)// This page is way off-screen to the left.            view.setPivotX(0);            view.setRotationY(90);        } else if (position <= 0) { // [-1,0]            view.setPivotX(pageWidth);            view.setRotationY(-sInterpolator.getInterpolation(-position));        } else if (position <= 1) { // (0,1]            view.setPivotX(0);            view.setRotationY(sInterpolator.getInterpolation(position));        } else { // (1,+Infinity]// This page is way off-screen to the right.            view.setPivotX(0);            view.setRotationY(90);        }    }}//获取屏幕的宽public  int getScreenWidth(Context context) {        WindowManager service = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);        DisplayMetrics displayMetrics = new DisplayMetrics();        service.getDefaultDisplay().getMetrics(displayMetrics);        return displayMetrics.widthPixels;    }
  • 6,zoomIn
    zoomin.gif
public class ZoomInTransform implements ViewPager.PageTransformer {    public static final String TAG = "simple_PagerTransform";    @Override    public void transformPage(View page, float position) {        int width = page.getWidth();        int height = page.getHeight();        //這裏只對右邊的view做了操作        if (position > 0 && position <= 1) {//right scorlling            //position是1.0->0,但是沒有等於0            Log.e(TAG, "right----position====" + position);            //設置該view的X軸不動            page.setTranslationX(-width * position);            //設置縮放中心點在該view的正中心            page.setPivotX(width / 2);            page.setPivotY(height / 2);            //設置縮放比例(0.0,1.0]            page.setScaleX(1 - position);            page.setScaleY(1 - position);        } else if (position >= -1 && position < 0) {//left scrolling        } else {//center        }    }}
2,需要ABaseTransformer

ABaseTransformer如下:

public abstract class ABaseTransformer implements ViewPager.PageTransformer {    /**     * Called each {@link #transformPage(android.view.View, float)}.     *      * @param page     *            Apply the transformation to this page     * @param position     *            Position of page relative to the current front-and-center position of the pager. 0 is front and     *            center. 1 is one full page position to the right, and -1 is one page position to the left.     */    protected abstract void onTransform(View page, float position);    /**     * Apply a property transformation to the given page. For most use cases, this method should not be overridden.     * Instead use {@link #transformPage(android.view.View, float)} to perform typical transformations.     *      * @param page     *            Apply the transformation to this page     * @param position     *            Position of page relative to the current front-and-center position of the pager. 0 is front and     *            center. 1 is one full page position to the right, and -1 is one page position to the left.     */    @Override    public void transformPage(View page, float position) {        onPreTransform(page, position);        onTransform(page, position);        onPostTransform(page, position);    }    /**     * If the position offset of a fragment is less than negative one or greater than one, returning true will set the     * fragment alpha to 0f. Otherwise fragment alpha is always defaulted to 1f.     *      * @return     */    protected boolean hideOffscreenPages() {        return true;    }    /**     * Indicates if the default animations of the view pager should be used.     *      * @return     */    protected boolean isPagingEnabled() {        return false;    }    /**     * Called each {@link #transformPage(android.view.View, float)} before {{@link #onTransform(android.view.View, float)}.     * <p>     * The default implementation attempts to reset all view properties. This is useful when toggling transforms that do     * not modify the same page properties. For instance changing from a transformation that applies rotation to a     * transformation that fades can inadvertently leave a fragment stuck with a rotation or with some degree of applied     * alpha.     *      * @param page     *            Apply the transformation to this page     * @param position     *            Position of page relative to the current front-and-center position of the pager. 0 is front and     *            center. 1 is one full page position to the right, and -1 is one page position to the left.     */    protected void onPreTransform(View page, float position) {        final float width = page.getWidth();        page.setRotationX(0);        page.setRotationY(0);        page.setRotation(0);        page.setScaleX(1);        page.setScaleY(1);        page.setPivotX(0);        page.setPivotY(0);        page.setTranslationY(0);        page.setTranslationX(isPagingEnabled() ? 0f : -width * position);        if (hideOffscreenPages()) {            page.setAlpha(position <= -1f || position >= 1f ? 0f : 1f);            page.setEnabled(false);        } else {            page.setEnabled(true);            page.setAlpha(1f);        }    }    /**     * Called each {@link #transformPage(android.view.View, float)} after {@link #onTransform(android.view.View, float)}.     *      * @param page     *            Apply the transformation to this page     * @param position     *            Position of page relative to the current front-and-center position of the pager. 0 is front and     *            center. 1 is one full page position to the right, and -1 is one page position to the left.     */    protected void onPostTransform(View page, float position) {    }    /**     * Same as {@link Math#min(double, double)} without double casting, zero closest to infinity handling, or NaN support.     *      * @param val     * @param min     * @return     */    protected static final float min(float val, float min) {        return val < min ? min : val;    }}
  • 1,alpha
    ezgif.com-video-to-gif.gif
  mVp.setPageTransformer(true, new ABaseTransformer() {            @Override            protected void onTransform(View page, float position) {                Log.e(TAG, "onTransform: "+page+"|||"+position);            }        });
  • 2,翻页
    accors.gif
public class AccordionTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        view.setPivotX(position < 0 ? 0 : view.getWidth());        view.setScaleX(position < 0 ? 1f + position : 1f - position);    }}
  • 3,BackgroundToForegroundTransformer
    image
public class BackgroundToForegroundTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        final float height = view.getHeight();        final float width = view.getWidth();        final float scale = min(position < 0 ? 1f : Math.abs(1f - position), 0.5f);        view.setScaleX(scale);        view.setScaleY(scale);        view.setPivotX(width * 0.5f);        view.setPivotY(height * 0.5f);        view.setTranslationX(position < 0 ? width * position : -width * position * 0.25f);    }}
  • 4,club

clubin.gif

public class CubeInTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        // Rotate the fragment on the left or right edge        view.setPivotX(position > 0 ? 0 : view.getWidth());        view.setPivotY(0);        view.setRotationY(-90f * position);    }    @Override    public boolean isPagingEnabled() {        return true;    }}
  • 5,clubout
    image
public class CubeOutTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        view.setPivotX(position < 0f ? view.getWidth() : 0f);        view.setPivotY(view.getHeight() * 0.5f);        view.setRotationY(90f * position);    }    @Override    public boolean isPagingEnabled() {        return true;    }}
  • 6,其他一些动画效果
类抽屉效果public class DrawerTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        if (position <= 0) {            view.setTranslationX(0);        } else if (position > 0 && position <= 1) {            view.setTranslationX(-view.getWidth() / 2 * position);        }    }}

垂直方向翻转public class FlipVerticalTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        final float rotation = -180f * position;        view.setAlpha(rotation > 90f || rotation < -90f ? 0f : 1f);        view.setPivotX(view.getWidth() * 0.5f);        view.setPivotY(view.getHeight() * 0.5f);        view.setRotationX(rotation);    }    @Override    protected void onPostTransform(View page, float position) {        super.onPostTransform(page, position);        if (position > -0.5f && position < 0.5f) {            page.setVisibility(View.VISIBLE);        } else {            page.setVisibility(View.INVISIBLE);        }    }}
放大缩小public class ForegroundToBackgroundTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        final float height = view.getHeight();        final float width = view.getWidth();        final float scale = min(position > 0 ? 1f : Math.abs(1f + position), 0.5f);        view.setScaleX(scale);        view.setScaleY(scale);        view.setPivotX(width * 0.5f);        view.setPivotY(height * 0.5f);        view.setTranslationX(position > 0 ? width * position : -width * position * 0.25f);    }}
public class RotateDownTransformer extends ABaseTransformer {    private static final float ROT_MOD = -15f;    @Override    protected void onTransform(View view, float position) {        final float width = view.getWidth();        final float height = view.getHeight();        final float rotation = ROT_MOD * position * -1.25f;        view.setPivotX(width * 0.5f);        view.setPivotY(height);        view.setRotation(rotation);    }    @Override    protected boolean isPagingEnabled() {        return true;    }}
public class RotateUpTransformer extends ABaseTransformer {    private static final float ROT_MOD = -15f;    @Override    protected void onTransform(View view, float position) {        final float width = view.getWidth();        final float rotation = ROT_MOD * position;        view.setPivotX(width * 0.5f);        view.setPivotY(0f);        view.setTranslationX(0f);        view.setRotation(rotation);    }    @Override    protected boolean isPagingEnabled() {        return true;    }}
public class ScaleInOutTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        view.setPivotX(position < 0 ? 0 : view.getWidth());        view.setPivotY(view.getHeight() / 2f);        float scale = position < 0 ? 1f + position : 1f - position;        view.setScaleX(scale);        view.setScaleY(scale);    }}
public class StackTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        view.setTranslationX(position < 0 ? 0f : -view.getWidth() * position);    }}
public class TabletTransformer extends ABaseTransformer {    private static final Matrix OFFSET_MATRIX = new Matrix();    private static final Camera OFFSET_CAMERA = new Camera();    private static final float[] OFFSET_TEMP_FLOAT = new float[2];    @Override    protected void onTransform(View view, float position) {        final float rotation = (position < 0 ? 30f : -30f) * Math.abs(position);        view.setTranslationX(getOffsetXForRotation(rotation, view.getWidth(), view.getHeight()));        view.setPivotX(view.getWidth() * 0.5f);        view.setPivotY(0);        view.setRotationY(rotation);    }    protected static final float getOffsetXForRotation(float degrees, int width, int height) {        OFFSET_MATRIX.reset();        OFFSET_CAMERA.save();        OFFSET_CAMERA.rotateY(Math.abs(degrees));        OFFSET_CAMERA.getMatrix(OFFSET_MATRIX);        OFFSET_CAMERA.restore();        OFFSET_MATRIX.preTranslate(-width * 0.5f, -height * 0.5f);        OFFSET_MATRIX.postTranslate(width * 0.5f, height * 0.5f);        OFFSET_TEMP_FLOAT[0] = width;        OFFSET_TEMP_FLOAT[1] = height;        OFFSET_MATRIX.mapPoints(OFFSET_TEMP_FLOAT);        return (width - OFFSET_TEMP_FLOAT[0]) * (degrees > 0.0f ? 1.0f : -1.0f);    }}
public class ZoomOutSlideTransformer extends ABaseTransformer {    private static final float MIN_SCALE = 0.85f;    private static final float MIN_ALPHA = 0.5f;    @Override    protected void onTransform(View view, float position) {        if (position >= -1 || position <= 1) {            // Modify the default slide transition to shrink the page as well            final float height = view.getHeight();            final float width = view.getWidth();            final float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));            final float vertMargin = height * (1 - scaleFactor) / 2;            final float horzMargin = width * (1 - scaleFactor) / 2;            // Center vertically            view.setPivotY(0.5f * height);            view.setPivotX(0.5f * width);            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));        }    }}
public class ZoomOutTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        final float scale = 1f + Math.abs(position);        view.setScaleX(scale);        view.setScaleY(scale);        view.setPivotX(view.getWidth() * 0.5f);        view.setPivotY(view.getHeight() * 0.5f);        view.setAlpha(position < -1f || position > 1f ? 0f : 1f - (scale - 1f));        if(position == -1){            view.setTranslationX(view.getWidth() * -1);        }    }}
public class ZoomInTransformer extends ABaseTransformer {    @Override    protected void onTransform(View view, float position) {        final float scale = position < 0 ? position + 1f : Math.abs(1f - position);        view.setScaleX(scale);        view.setScaleY(scale);        view.setPivotX(view.getWidth() * 0.5f);        view.setPivotY(view.getHeight() * 0.5f);        view.setAlpha(position < -1f || position > 1f ? 0f : 1f - (scale - 1f));    }}

源码下载

原创粉丝点击