基于 ViewPager 偏移的动画

Question

我有一个 ViewPager，它有 5 页。我还有另一个 TextView tvInstruction，它位于 ViewPager 下方，它根据 ViewPager 的 position 从数组中获取文本。

到目前为止，我已经能够做到这一点：根据 ViewPager 的 positionOffset 为这个 TextView 的 alpha 属性设置动画。因此，当页面来自右侧（向左滑动时）tvInstruction alpha 属性逐渐减小，并且当 ViewPager 的两个页面在屏幕上同样可见时 tvInstruction 的 alpha 属性变成 0f。然后当滑动完成时，它再次逐渐获得 alpha 移动到 1f。

我想要实现的目标：在滑动的中间，当 TextView 的 alpha 属性变为 0f 我希望 tvInstruction 从 mInstructions 数组中获取另一个 String 基于轻扫。即使我几乎滑动到下一页但没有移开手指返回当前页面它也应该工作 - > tvInstruction 应该将其文本更改为数组中的其他文本然后返回当前页面时它应该更改为当前页面的文本。

我注意到 onPageScrolled() 方法的 position 参数在滑动完成不在中间时得到 incremented/decremented。这就是我要你帮我解决的问题。

这是来自我的 MainActivity：

private float alphaVal;
private int mPageNumber;
private mInstructions[] = {"A", "B", "C", "D", "E"};

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    // "diff" to determine the swipe 
    float diff = positionOffset - mLastPositionOffset;
    // "alphaVal" based on the positionOffset
    alphaVal = (1f - positionOffset * 2);
    if (diff > 0) {
        System.out.println("swipe left");
        tvInstruction.setAlpha(Math.abs(alphaVal));

        // This is where the magic happens 
        if (alphaVal < 0 && mPageNumber == position) {
            tvInstruction.setText(mInstructions[mPageNumber + 1]);
            mPageNumber++;
        }
    } else {
        System.out.println("swipe right");
        tvInstruction.setAlpha(Math.abs(alphaVal));

        // This is where the magic happens
        if (alphaVal > 0 && mPageNumber == position) {
            tvInstruction.setText(mInstructions[mPageNumber - 1]);
            mPageNumber--;
        }
    }
    mLastPositionOffset = positionOffset;
}

如果题目中有不明确的地方，欢迎大家指正。

Answer 1

感谢@psking 的建议，我能够用 ViewPager.PageTransformer 实现所需的动画。这是我的做法：

private mInstructions[] = {"A", "B", "C", "D", "E"};
@Override
public void transformPage(@NonNull View page, float position) {
    int pagePosition = Integer.parseInt((String) page.getTag());
    float absPosition = Math.abs(position);
    //------------------------------------------------------------
    if (position <= -1.0f || position >= 1.0f) {
        // page is not visible here - stop running any animations
    } else if (position == 0.0f) {
        // page is selected -- reset any view if necessary
        tvInstruction.setAlpha(1f);
    } else {
        // page is currently being swiped -- perform animations here
        // get the alpha property values based on the `property` value of the swipe
        float alpha = Math.abs(1f - 2 * absPosition);
        // playing with TextView {tvInstruction} and NextButton {btnNextAndDone}
        playWithTextView(pagePosition, position, alpha);
        playWithNextButton(pagePosition, position, alpha);
    }
}

private void playWithTextView(int pagePosition, float position, float alpha) {
    // setting the alpha property of the TextView
    tvInstruction.setAlpha(alpha);
    // Use only odd numbered pages.
    if (pagePosition % 2 == 1) {
        if (position > 0.5f) {
            tvInstruction.setText(mInstructions[pagePosition - 1]);
        } else if (position < 0.5f && position > -0.5f) {
            tvInstruction.setText(mInstructions[pagePosition]);
        } else if (position < -0.5f) {
            tvInstruction.setText(mInstructions[pagePosition + 1]);
        }
    }
}

private void playWithNextButton(int pagePosition, float position, float alpha) {
    if (pagePosition == 3) {
        if (position < 0) {
            btnNextAndDone.setAlpha(alpha);
            if (position < -0.5f) {
                setNextButtonFeatures();
            } else if (position > -0.5f) {
                setDoneButtonFeatures();
            }
        }
    }
}

基于 ViewPager 偏移的动画

Animation based on ViewPager offset

animation

android

android-animation

android-studio