片段之间的渐进式过渡

Question

我最近下载了Google Sheets应用程序，对第一个屏幕介绍应用程序的详细信息非常感兴趣，因此我尝试重新创建它。

经过一些调研，我决定使用ViewPager并进行了实现。

但是，结果并不如我所预期。

在Sheets应用程序中，颜色转换是逐渐而微不足道的，但在我的情况下，转换是明显的（使用的颜色方案与Sheets应用程序相同）。

Sheets应用程序中应用了何种类型的动画，我该如何复制它？

- Nirmal Raj

Answer 1

最简单的方法是：

1. 从 ViewPager 中的 Fragments 中移除背景（我假设您在 ViewPager 的 Adapter 中使用 Fragments... 如果不是，请告诉我）。而“去除背景”的意思是例如将其设置为 "@android:color/transparent"。
2. 从 ViewPager 本身中删除背景（例如通过将其颜色设置为 transparent）。
3. 在您的 ViewPager 下方（z-wise）放置一个作为变化背景的 View。例如像这样（没有参数）：

<FrameLayout>
    <View android:id="@+id/animated_color_view"/>
    <android.support.v4.view.ViewPager/>
</FrameLayout>

4. 创建一种方法来动画显示animated_color_view的背景颜色。您可以使用链接到REG1的评论中所包含的线程中的方法之一，例如像这样（该方法取自此帖子）：

int[] pageColors = new int[]{Color.RED, Color.GREEN};
int currentColor = pageColors[0];
ValueAnimator colorAnimation;

public void animateToColor(int colorTo) {
    if (colorAnimation != null) {
        colorAnimation.cancel();
    }
    colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), currentColor, colorTo);
    colorAnimation.setDuration(250); // milliseconds
    colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animator) {
            currentColor = (int) animator.getAnimatedValue();
            animatedColorView.setBackgroundColor(currentColor);
        }

    });
    colorAnimation.start();
}

5. 添加一个OnPageChangeListener监听器，在每次选中页面时调用这个动画方法。

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        animateToColor(pageColors[position]);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

顺带一提：请记住，pageColors数组的大小必须等于您的ViewPager中页面的数量。

- Bartek Lipinski

---

它起作用了，但你说这是一种简单的方法，还有其他做法吗？请给我一些参考。@Bartek - Nirmal Raj

我对Android动画还很陌生。你有没有什么特别推荐的书籍或网站，可以从零开始学习Android动画？ - Nirmal Raj

就像所有事情一样，你可以用成千上万种方法去做。你肯定需要一个作为变化背景的基础“View”。但是改变它的颜色有多种方法。例如，在“onPageScrolled”回调中自己动态更改颜色（不使用“ValueAnimator”）。你还可以创建一个巨大的渐变，放在你的“ViewPager”下面，并且滚动速度比你的“ViewPager”快得多。这样就可以产生颜色变化的错觉。等等... - Bartek Lipinski

@NirmalRaj 我唯一能给你的建议就是：开始做吧。通过实践来学习。首先使用一些来自SO的示例，并尽可能理解它们。如果你不完全理解它们，不要担心。这是一个过程的一部分。你会逐渐理解更多，在最后你会找到最适合你的方式来做这样的事情。 - Bartek Lipinski

@BartekLipinski 我只是想说，当我看到已经有一个被接受的答案时，我实际上删除了我的评论（过早地）。然后我继续阅读你的答案，只发现你引用了我的评论。所以现在链接断了，我无法撤消我的删除操作。所以你可能需要把链接去掉。幸运的是，我记得“这篇文章”下面链接的线程与我链接的相同 :) - REG1

我更正了链接，感谢提醒 @REG1 ! :) - Bartek Lipinski