在ViewPager中实现弹性/反弹动画效果的最佳方法是什么? [英] What is the best way to achieve an elastic / bounce animation effect in ViewPager?

问题描述

我想显示一个 ViewPager 具有弹跳/弹性滑动效果.我想使用 PageTransformer 和 BounceInterpolator .

I want to display a ViewPager with a bounce / elastic sliding effect. I suppose that this is possible using some combination of a PageTransformer and a BounceInterpolator.

我不知道的是 方法 .到目前为止，我还无法实现这一目标.

What I do not know is how. Thus far I have been unable to achieve this.

PageTransformer的典型示例如下:

public class TypicalPageTransformer implements ViewPager.PageTransformer {

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

        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);
        }
    }
}

问题是，我们如何带来 Interpolator (任何形式)插入此处的图片? 我们在哪里获得 Animation 对象ViewPager的动画，以便为其设置Interpolator?

The question is, how do we bring an Interpolator (of any kind) into the picture here? Where do we get the Animation object for the ViewPager's animation from, so as to set an Interpolator to it?

我已经提到了以下帖子:

I have already referred to the following posts:

• android VIewpager如何实现绑定效果 .

如何通过在ViewPager中用手指轻扫来禁用分页，但仍然能够以编程方式轻扫?

在更改应用程序背景的同时在android中添加橡皮筋"效果 .

第三篇文章的答案提到了这种方法，但未提供有关方法的任何细节.

The third post has an answer that mentions this very approach, but does not provide any detail as to how.

有人知道如何将BounceInterpolator与PageTransformer结合在一起吗?这个 似乎 是解决此问题的有机且连贯的方法，但是有可能吗?还是对此有另一种合乎逻辑的解决方案?

Does anyone know exactly how do we go about combining a BounceInterpolator with a PageTransformer? This seems to be an organic and coherent approach to this problem, but is it even possible at all? Or is there another logical solution for this?

参考:

• 用PageTransformer 自定义ViewPager

N.B:

只需将Interpolator和PageTransformer组合在一起，而不必扩展ViewPager，则应该可以实现弹性/弹跳动画效果.也欢迎使用其他方法，但是请提供带有代码的详细解决方案，而不仅仅是大纲.

It should be possible to achieve an elastic / bounce animation effect simply by combining an Interpolator and a PageTransformer, and without having to extend the ViewPager. Other approaches are also welcome, but please provide a detailed solution with code, not just an outline.

推荐答案

您可以使用fakeDragBy方法来实现此效果:

You can use fakeDragBy method to achieve this effect:

 viewPager.beginFakeDrag();
viewPager.fakeDragBy(offset); //offset in pixels. 
viewPager.endFakeDrag();

或者您可以使用此方法:

Or you can Use this method:

private int animFactor;
private ValueAnimator animator = new ValueAnimator();

private void animateViewPager(final ViewPager pager, final int offset, final int delay) {
    if (!animator.isRunning()) {
        animator.removeAllUpdateListeners();
        animator.removeAllListeners();
        //Set animation
        animator.setIntValues(0, -offset);
        animator.setDuration(delay);
        animator.setRepeatCount(1);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = animFactor * (Integer) animation.getAnimatedValue();
                if (!pager.isFakeDragging()) {
                    pager.beginFakeDrag();
                }
                pager.fakeDragBy(value);
            }
        });
        animator.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationStart(Animator animation) {
                animFactor = 1;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                pager.endFakeDrag();
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                animFactor = -1;
            }
        });
        animator.start();
    }
}

在Java类中，仅使用此:

In Java Class Use only this :

animateViewPager(pager, 10, 1000);

这篇关于在ViewPager中实现弹性/反弹动画效果的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！