时间戳

首页 > 解决方案 > 基于 ViewPager 偏移的动画

android - 基于 ViewPager 偏移的动画

问题描述

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

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

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

我注意到的是，当滑动完成而不是在中间时position，该方法的参数会增加/减少。这就是我要求你帮助我解决的问题。onPageScrolled()

这是来自我的 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;
}

如果问题中有任何模棱两可的地方，请随时要求澄清。

标签： androidandroid-studioanimationandroid-animation

解决方案

感谢@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();
            }
        }
    }
}

推荐阅读