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;
@Override
public 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));
}
}
