在 ViewPager 中实现弹性/反弹动画效果的最佳方法是什么？

Question

我想显示一个具有弹跳/弹性滑动效果的ViewPager。我想这可以使用PageTransformer 和BounceInterpolator 的某种组合来实现。

我不知道的是如何。到目前为止，我一直无法做到这一点。

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（任何类型的）带入这里的图片中？ 我们从哪里得到ViewPager的动画的Animation对象，以便为它设置一个Interpolator？

我已经参考了以下帖子：

• android VIewpager How to achieve the bound effect.

• How do disable paging by swiping with finger in ViewPager but still be able to swipe programmatically?

• Add “Rubber Band” effect in android while changing background of application.

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

有谁知道我们如何将BounceInterpolator 与PageTransformer 结合起来？这似乎是解决这个问题的有机和连贯的方法，但它甚至可能吗？还是有其他合乎逻辑的解决方案？

参考资料：

• Customize the ViewPager with PageTransformer。

注意：

应该可以简单地通过组合Interpolator 和PageTransformer 来实现弹性/反弹动画效果，而无需扩展ViewPager。也欢迎其他方法，但请提供带有代码的详细解决方案，而不仅仅是大纲。

Answer 1

你可以使用 fakeDragBy 方法来实现这个效果：

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

或者你可以使用这个方法：

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 类中只使用这个：

animateViewPager(pager, 10, 1000);

Answer 2

看看this library，也许对你有帮助。

Answer 3

我不确定PageTransformer 是实现上述效果的最佳方式。请注意，这样的转换在两个滑动方向上都是相同的，因为接收到的位置不知道我们是否从左到右滑动，反之亦然。并且您可能不希望视图的两个相对侧面弹跳，而只希望其中一个应用拉力。第二个，更重要的是 IMO，PageTransformer 框架由用户的手势驱动，而不是由稳定的系统时钟驱动。结果 - 我们无法控制淡入淡出阶段（用户松开手指的阶段）的持续时间并实现平滑的行为（因为通常滴答声以非单调变化的位置传递，这在很大程度上取决于触摸速度）。

所以，最好使用标准的ValueAnimator API，它会由OnPageChangeListener 触发。当然，在这种情况下，我们还有其他注意事项，但这种方法似乎更有希望。