Question

我希望模仿您在Play音乐应用的播放器界面中看到的ViewPager过渡动画。看起来像这样。

Animation screens

现在，可以使用描述here的自定义PageTransformer轻松完成放大/淡入动画，其中最难的部分就是带有歌曲信息和内容的顶级栏。这个只是像普通的ViewPager一样滑入。

对我来说，因此看起来谷歌以某种方式将两个PageTransformers组合在一起，用于布局的不同部分（1.顶部栏，2。封面艺术）。我不知道怎么做，如果有可能的话。我可以想象开发人员做的另一种方式是拥有两个ViewPagers。一个用于歌曲信息栏，另一个用于隐蔽艺术，然后将共享触摸事件以同时滑动/动画。然而，对我而言，这听起来有点不方便，而且会像使用大量CPU一样。

有什么建议吗？

Answer 1

PageTransformer并不一定影响整个View，毕竟定义发生了什么的是你。请考虑Fragments内ViewPager的布局如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"    
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/top_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        ...

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        ...

    </RelativeLayout>

</LinearLayout>

正如您所看到的，有两个不同的RelativeLayouts他们都有一个id。有了这个，你可以在findViewById()内的View上拨打PageTransformer，然后以不同的方式转换不同的布局部分！

public class ExampleTransformer implements ViewPager.PageTransformer {

    public void transformPage(View view, float position) {

        View topBar = view.findViewById(R.id.top_bar);
        View content = view.findViewById(R.id.content);

        if (position < -1) {
            content.setAlpha(0);    
        } else if (position <= 1) {
            // Now you can fade the content without affecting the topBar
            content.setAlpha(...);

            // And by setting the translation on the root view you 
            // can move everything at the same time
            view.setTranslationX(...);
        } else {
            content.setAlpha(0);
        }
    }
}

我希望我可以帮助您，如果您有任何进一步的问题，请随时提出来！

ViewPager过渡，如Google Play音乐＆＃34;播放器＆＃34;

1 个答案: