Анимация на основе смещения ViewPager - PullRequest
Новая
       10

Анимация на основе смещения ViewPager

0 голосов
/ 28 октября 2018

У меня есть ViewPager, который имеет 5 страниц.И у меня есть другой TextView tvInstruction, который находится ниже ViewPager, и он получает тексты из массива на основе ViewPager position.

Мне удалось достичь этого до сих пор: для анимации альфа-свойства этого TextView на основе positionOffset ViewPager.Таким образом, когда страница появляется справа (при пролистывании влево), свойство tvInstruction alpha постепенно уменьшается, и когда две страницы ViewPager одинаково видны на экране, свойство альфа tvInstruction становится 0f.И затем он снова получает альфа, перемещаясь к 1f, когда проведите пальцем.

Чего я хочу достичь : в середине пролистывания, когда альфа-свойство TextView становится 0f Я хочу, чтобы tvInstruction получил другое String из mInstructions массив на основе свайпа.И это должно работать, даже когда я пролистываю почти до следующей страницы, но не убирая палец, возвращаясь к текущей странице -> tvInstruction должен изменить свой текст на другой текст из массива, а затем при возвращении на текущую страницу. Он должен измениться натекст текущей страницы.

Что я заметил, так это то, что аргумент position метода onPageScrolled() увеличивается / уменьшается, когда пролистывание complete не в середине.Это проблема, которую я прошу вас помочь мне решить.

Это из моей основной деятельности: 

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;
}

Если в вопросах есть какое-то двусмысленное место, не стесняйтесь просить разъяснений.

1 Ответ

0 голосов
/ 04 ноября 2018

Благодаря совету @ 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();
            }
        }
    }
}
...