基于ViewPager偏移量的动画

时间:2018-10-28 15:43:19

标签: android android-studio animation android-animation

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

到目前为止,我能够做到这一点:基于ViewPager的positionOffset对TextView的alpha属性进行动画处理。因此,当页面来自右侧时(向左滑动时),tvInstruction的alpha属性逐渐减小,并且当tvInstruction的两页ViewPager在屏幕上均可见时,0f的alpha属性变为0f。再次完成滑动后,它逐渐将alpha移至1f。

我要实现的目标: 在滑动中间,当TextView的alpha属性变为tvInstruction时,我希望String基于滑动从mInstructions数组中获取另一个tvInstruction。即使在我几乎要滑动到下一页但不移开手指回到当前页面的情况下,它也应该起作用-> position应该将其文本从数组更改为其他文本,然后在返回当前页面时更改为当前页面的文本。

我注意到的是,当滑动 complete 不在中间时,onPageScrolled()方法的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; } 自变量会递增/递减。那就是我要你帮助我解决的问题。

这来自我的MainActivity:

| id | value |
--------------
| 1  | 6     |
| 2  | 8     |
| 3  | 5     |
| 4  | 12    |
| 5  | 6     |

如果问题中有任何歧义之处,请随时澄清。

1 个答案:

答案 0 :(得分:0)

由于@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();
            }
        }
    }
}