当ViewPager位置偏移量改变时如何将视图动画化

Question

我们希望创建一个应用程序介绍动画，用户可以通过滚动页面，当用户滚动时，一个视图会被动画化并穿过所有幻灯片。该动画视图应随用户滚动而移动，因此如果用户滚动得更快，则动画视图应移动得更快，如果用户向后滚动到以前的页面，则动画视图应向后移动。

在iOS中使用https://github.com/IFTTT/JazzHands非常容易，但我找不到在Android中实现此功能的方法。

我遇到的问题：

• 动画以实时方式运行；您不能让时间成为ViewPager偏移量。
• 在FragmentPagerAdapter中，无法将一个片段的视图移动到另一个片段。

有什么建议吗？谢谢。

- Ferran Maylinch

---

看一下这个。http://developer.android.com/training/animation/screen-slide.html - Atul O Holic

我理解的是否正确，您想让一个视图“懒惰地”跟随滚动，是这样吗？ - cYrixmorten

是的，有点像这样。在下面的答案中，我使用onPageScrolled将position + positionOffset用作“插值点”。 - Ferran Maylinch

我并没有想出一个答案，但我认为你需要将ViewPager放在FrameLayout中，然后将你想要动画的视图放在ViewPager的顶部。从那时起，您可以继续使用onPageScrolled方法，相应地移动视图。 - cYrixmorten

需要在页面更改时移到不同的位置。有没有可用的库？ - RAHULRSANNIDHI

Answer 1

这是一个部分回答，针对第一个问题。

• 动画以实时方式运行；您不能将时间设置为ViewPager偏移量。

我可以在ViewPager的OnPageChangeListener的onPageScrolled方法中更改动画视图的属性。

这是一个简单的示例，它更改了动画视图的左边距，使其向右移动。

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);

            LayoutParams params = (LayoutParams) animatedView.getLayoutParams();
            params.setMargins((int) ((position + positionOffset) * 500), 0, 0, 0);
            animatedView.setLayoutParams(params);
        }

第二个问题还没有解决。当视图到达所在页面的右侧时，它就消失了。换句话说，视图无法移动到下一页（片段）。

- Ferran Maylinch

---

如果我们想要将视图向上或向下移动怎么办？ - mohitum

最好使用animatedView.setTranslationX(positionOffsetPixels * -1f);，这是一行代码。 - Taufik Nur Rahmanda

Answer 2

对于第二个问题：

viewPagerAdapter将在不再需要时销毁视图，因此要在所有页面上保持一个视图可见，您需要将其添加到包含ViewPager的布局中。

可以像这样实现：

```java viewPager.addView(yourView, 0); ```

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white_transparent"
        />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text out of view pager"
        android:textSize="25sp"
        />
</RelativeLayout>

- PedroDuran

---

+1 @pedro，很好用，但是如果我想把textview翻译到第二页而不是第三页，该怎么停止我的视图将其翻译到其他页面呢？ - farhan patel