Slow Motion in Transition from Android Pager View

Asked

Viewed 160 times

1

I’m developing an application Android, one of the functionalities requires having a Viewpager images, these images will be transitioning from one to the other automatically in a time interval I set. This is already done.
The problem is that when you move from one image to another, the transition is fast, I wanted to know some way to simulate the transition of how you were slowly passing your finger over the screen. Thanks in advance.

Pager Item Transition Animation

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

    } else if (position <= 0) {

        view.setAlpha(1);
        view.setTranslationX(0);
        view.setScaleX(1);
        view.setScaleY(1);

    } else if (position <= 1) {

        view.setAlpha(1 - position);


        view.setTranslationX(pageWidth * -position);

        float scaleFactor = MIN_SCALE
                + (1 - MIN_SCALE) * (1 - Math.abs(position));
        Log.i("SCALE", String.valueOf(scaleFactor));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);

    } else {
        view.setAlpha(0);
    }
}

}

Cyclic Behavior that transitions from Viewpager to Three in Three Seconds

public void controlTimeSlidePageAdvert(){
    Timer timer = new Timer();
    TimerTask timerTask = new TimerTask() {
        @Override
        public void run() {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    if (mPagerAdverts.getCurrentItem() == mPagerAdapterAdverts.getCount() - 1)
                        mPagerAdverts.setCurrentItem(0);
                    else
                        mPagerAdverts.setCurrentItem(mPagerAdverts.getCurrentItem() + 1);
                }
           });
        }
    };
    timer.schedule(timerTask, 1000, 3000);
}
  • Post the code that makes this transition.

  • @ramaral , ready, if you know something, I thank you from now on.

1 answer

1


I think that this should be in line with what you want:

private final static int PAGER_TRANSITION_DURATION_MS = 500;
private void animatePagerTransition(final boolean forward) {

    ValueAnimator animator = ValueAnimator.ofInt(0, mPager.getWidth());
    animator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            if(mPager.isFakeDragging())
                mPager.endFakeDrag();
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            if(mPager.isFakeDragging())
                mPager.endFakeDrag();
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
        }
    });

    animator.setInterpolator(new AccelerateInterpolator());
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        private int oldDragPosition = 0;

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int dragPosition = (Integer) animation.getAnimatedValue();
            int dragOffset = dragPosition - oldDragPosition;
            oldDragPosition = dragPosition;
            //Testar isFakeDragging() garante que fakeDragBy()
            //não lança IllegalStateException
            //se a página for movida manualmente durante a animação 
            if(mPager.isFakeDragging()){
                mPager.fakeDragBy(dragOffset * (forward ? -1 : 1));
            }else{
                animation.cancel();
            }
        }
    });

    animator.setDuration(PAGER_TRANSITION_DURATION_MS);
    mPager.beginFakeDrag();
    animator.start();
}

Adapted from this reply in the Soen

To use it change the method controlTimeSlidePageAdvert() as follows:

public void controlTimeSlidePageAdvert(){
    Timer timer = new Timer();
    TimerTask timerTask = new TimerTask() {
        @Override
        public void run() {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    if (mPager.getCurrentItem() == mPagerAdapter.getCount() - 1)
                        mPager.setCurrentItem(0);
                    else
                        //mPager.setCurrentItem(mPager.getCurrentItem() + 1);
                        animatePagerTransition(true);
                }
           });
        }
    };
    timer.schedule(timerTask, 1000, 3000);
}

Notes:

  • animatePagerTransition(true) advance a page.
  • animatePagerTransition(false) rewind a page.
  • PAGER_TRANSITION_DURATION_MS sets the time in milliseconds that takes the transition.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.