How to Create own ViewPager Transformations Animation?

0
194

In this post i am gonna show you some ViewPager transformations animation. Animation in view pager is implemented using PageTransformer interface which is called whenever we slide view pager. It is called twice for every slide event, because atmost two pages are visible on the screen.

Recommended articles : 

The position for first page is between (-1,0) and second page is (0,1). In the idle state , 0 being the position of the page we are currenting viewing.

Why use dependencies when you create your own ViewPager Transformations Animation ?

  

 

 

 

 

 

 

By implementing this you can achieve these amazing transformations for Viewpager by your own and also you can create your own transformations and name them as you wish.

Demo Video

Download ViewPager Transformations Animation

List of Transformations

Here is the list of transformations which you can check by clicking them :

1Depth Transformation

Hello guys here i will tell you how you can apply Depth Transformation on Viewpager.

See this : Creative View Pager Android Animation

Depth ViewPager Transformations Animation
Depth ViewPager Transformations Animation

First you have to implement ViewPager.PageTransformer in your class then check for position value, if position < -1 or position > 1 then set Alpha to 0 otherwise for position <= 0 you code for page which is currently visible to you and for position <= 1 you code for the page which is going to be visible to you.

public class DepthTransformation implements ViewPager.PageTransformer{
    @Override
    public void transformPage(View page, float position) {

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

        }
        else if (position <= 0){    // [-1,0]
            page.setAlpha(1);
            page.setTranslationX(0);
            page.setScaleX(1);
            page.setScaleY(1);

        }
        else if (position <= 1){    // (0,1]
            page.setTranslationX(-position*page.getWidth());
            page.setAlpha(1-Math.abs(position));
            page.setScaleX(1-Math.abs(position));
            page.setScaleY(1-Math.abs(position));

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

        }


    }
}

Now creating object of your transformation class

DepthTransformation depthTransformation = new DepthTransformation();

After doing this you just set your transformation to view pager

ViewPager viewPager.setPageTransformer(true, DepthTransformation);

2Zoom Out Transformation

Have you use this : Infinite Cycle ViewPager 

Zoom Out ViewPager Transformations Animation
Zoom Out ViewPager Transformations Animation
public class ZoomOutTransformation implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.65f;
    private static final float MIN_ALPHA = 0.3f;

    @Override
    public void transformPage(View page, float position) {

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

        }
        else if (position <=1){ // [-1,1]

            page.setScaleX(Math.max(MIN_SCALE,1-Math.abs(position)));
            page.setScaleY(Math.max(MIN_SCALE,1-Math.abs(position)));
            page.setAlpha(Math.max(MIN_ALPHA,1-Math.abs(position)));

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

        }


    }
}

3Clock Spin Transformation

Hello guys here i will tell you how you can apply Clock Spin Transformation on Viewpager.

See this too : HollyViewPager – Android Navigation Animation 

Clock Spin ViewPager Transformations Animation
Clock Spin ViewPager Transformations Animation

First you have to implement ViewPager.PageTransformer in your class then check for position value, if position < -1 or position > 1 then set Alpha to 0 otherwise for position <= 0 you code for page which is currently visible to you and for position <= 1 you code for the page which is going to be visible to you.

public class Clock_SpinTransformation implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {

        page.setTranslationX(-position * page.getWidth());

        if (Math.abs(position) <= 0.5) {
            page.setVisibility(View.VISIBLE);
            page.setScaleX(1 - Math.abs(position));
            page.setScaleY(1 - Math.abs(position));
        } else if (Math.abs(position) > 0.5) {
            page.setVisibility(View.GONE);
        }


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

        }
        else if (position <= 0) {   // [-1,0]
            page.setAlpha(1);
            page.setRotation(360 * Math.abs(position));

        }
        else if (position <= 1) {   // (0,1]
            page.setAlpha(1);
            page.setRotation(-360 * Math.abs(position));

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

        }


    }
}

Now creating object of your transformation class

Clock_SpinTransformation clockSpinTransformation = new Clock_SpinTransformation();

After doing this you just set your transformation to view pager

ViewPager viewPager.setPageTransformer(true, clockSpinTransformation);

4AntiClock Spin Transformation

Hello guys here i will tell you how you can apply AntiClock Spin Transformation on Viewpager.

RecommendedParallax ViewPager 

AntiClock ViewPager Transformations Animation
AntiClock ViewPager Transformations Animation

First you have to implement ViewPager.PageTransformer in your class then check for position value, if position < -1 or position > 1 then set Alpha to 0 otherwise for position <= 0 you code for page which is currently visible to you and for position <= 1 you code for the page which is going to be visible to you.

public class AntiClockSpinTransformation implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {

        page.setTranslationX(-position * page.getWidth());

        if (Math.abs(position) < 0.5){
            page.setVisibility(View.VISIBLE);
            page.setScaleX(1-Math.abs(position));
            page.setScaleY(1-Math.abs(position));
        }
        else if (Math.abs(position) > 0.5){
            page.setVisibility(View.GONE);
        }

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

        }
        else if (position <= 0){    // [-1,0]
            page.setAlpha(1);
            page.setRotation(360*(1-Math.abs(position)));

        }
        else if (position <= 1){    // (0,1]
            page.setAlpha(1);
            page.setRotation(-360*(1-Math.abs(position)));

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

        }


    }
}

Now creating object of your transformation class

AntiClockSpinTransformation antiClockSpinTransformation = new AntiClockSpinTransformation();

After doing this you just set your transformation to view pager

ViewPager viewPager.setPageTransformer(true, antiClockSpinTransformation);

5Fidget Spin Transformation

Card layout : ViewPager cards animation 

Fidget Spin ViewPager Transformations Animation
Fidget Spin ViewPager Transformations Animation
public class FidgetSpinTransformation implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {

        page.setTranslationX(-position * page.getWidth());

        if (Math.abs(position) < 0.5) {
            page.setVisibility(View.VISIBLE);
            page.setScaleX(1 - Math.abs(position));
            page.setScaleY(1 - Math.abs(position));
        } else if (Math.abs(position) > 0.5) {
            page.setVisibility(View.GONE);
        }



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

        }
        else if (position <= 0) {    // [-1,0]
            page.setAlpha(1);
            page.setRotation(36000*(Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)));

        }else if (position <= 1){    // (0,1]
            page.setAlpha(1);
            page.setRotation(-36000 *(Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)));

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

        }


    }
}

6Vertical Flip Transformation

Vertical Flip ViewPager Transformations Animation
Vertical Flip ViewPager Transformations Animation
public class VerticalFlipTransformation implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {

        page.setTranslationX(-position * page.getWidth());
        page.setCameraDistance(12000);

        if (position < 0.5 && position > -0.5) {
            page.setVisibility(View.VISIBLE);
        } else {
            page.setVisibility(View.INVISIBLE);
        }



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

        }
        else if (position <= 0) {    // [-1,0]
            page.setAlpha(1);
            page.setRotationY(180 *(1-Math.abs(position)+1));

        }
        else if (position <= 1) {    // (0,1]
            page.setAlpha(1);
            page.setRotationY(-180 *(1-Math.abs(position)+1));

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

        }


    }
}

7Horizontal Flip Transformation

Horizontal Flip ViewPager Transformations Animation
Horizontal Flip ViewPager Transformations Animation
public class HorizontalFlipTransformation implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {

        page.setTranslationX(-position*page.getWidth());
        page.setCameraDistance(20000);

        if (position < 0.5 && position > -0.5){
            page.setVisibility(View.VISIBLE);
        }
        else {
            page.setVisibility(View.INVISIBLE);
        }



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

        }
        else if (position <= 0 ){    // [-1,0]
            page.setAlpha(1);
            page.setRotationX(180*(1-Math.abs(position)+1));

        }
        else if (position <= 1){    // (0,1]
            page.setAlpha(1);
            page.setRotationX(-180*(1-Math.abs(position)+1));
            
        }
        else {    // (1,+Infinity]
            // This page is way off-screen to the right.
            page.setAlpha(0);

        }


    }
}

8Pop Transformation

Pop ViewPager Transformations Animation
Pop ViewPager Transformations Animation
public class PopTransformation implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {

        page.setTranslationX(-position * page.getWidth());

        if (Math.abs(position) < 0.5) {
            page.setVisibility(View.VISIBLE);
            page.setScaleX(1 - Math.abs(position));
            page.setScaleY(1 - Math.abs(position));
        } else if (Math.abs(position) > 0.5) {
            page.setVisibility(View.GONE);
        }


    }
}

9Fade Out Transformation

Fade Out ViewPager Transformations Animation
Fade Out ViewPager Transformations Animation
public class FadeOutTransformation implements ViewPager.PageTransformer{
    @Override
    public void transformPage(View page, float position) {

        page.setTranslationX(-position*page.getWidth());

        page.setAlpha(1-Math.abs(position));


    }
}

List is not end here. I’ll come with next part. Hope you enjoy this tutorial.

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...