最近发现网易美学app启动页动画特效挺好玩的，于是自己也模仿写了一个。

welcome.gif

其实写起来比不复杂，仅仅是对各imageview进行重绘。话不多说，就是撸。

<FrameLayout
    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/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_gravity="center">


        <View
            android:id="@+id/viewVertivcal"
            android:layout_width="1px"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"/>

        <View
            android:id="@+id/viewHorizontal"
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_centerVertical="true"/>

        <ImageView
            android:id="@+id/iv6"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignRight="@id/viewVertivcal"
            android:layout_alignBottom="@id/viewHorizontal"/>

        <ImageView
            android:id="@+id/iv5"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@mipmap/welcome_3_r_b"
            android:layout_alignLeft="@id/viewVertivcal"
            android:layout_alignTop="@id/viewHorizontal"
            android:visibility="invisible"/>

        <ImageView
            android:id="@+id/iv51"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@mipmap/welcome_4_0"
            android:layout_alignLeft="@id/viewVertivcal"
            android:layout_alignTop="@id/viewHorizontal"
            android:visibility="invisible"/>

        <ImageView
            android:id="@+id/iv4"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:visibility="invisible"
            android:background="@mipmap/welcome_2_2"/>

        <ImageView
            android:id="@+id/iv3"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:visibility="invisible"
            android:background="@mipmap/welcome_2_1"/>

        <ImageView
            android:id="@+id/iv21"
            android:layout_width="200dp"
            android:layout_height="250dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp"
            android:background="@mipmap/welcome_2_0"
            android:visibility="invisible"/>

        <ImageView
            android:id="@+id/iv2"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:background="@mipmap/welcome_1_0"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp"/>

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="200dp"
            android:layout_height="250dp"
            android:layout_centerInParent="true"
            android:background="@mipmap/welcome_1_1"/>

    </RelativeLayout>


</FrameLayout>

就是先把所要操作的imageview先布局出来，然后根据viewpager的滑动监听OnPageChangeListener()对相应的imageview进行位置、大小及透明度设置。

其中对各imageview操作的关键代码如下：

    private void alphaAnimationIv1(float positionOffset) {
        iv1.setAlpha(1.0f * (1.0f - positionOffset));
    }

    private void translationIv1(float positionOffset) {
        int transY = (iv1Top - iv2Top) / 2;
        iv1.setTop(iv1Top - ((int) (transY * positionOffset + 0.5f)));
        iv1.setBottom(iv1Top + iv1Height - ((int) (transY * positionOffset + 0.5f)));
    }

    private void translationYIv2(float positionOffset) {
        int transTop = (iv1Top - iv2Top) / 2;
        int transBottom = iv1Top + iv1Height - iv2Top - iv2Height - transTop;
        iv2.setTop(iv2Top + ((int) (transTop * positionOffset + 0.5f)));
        iv2.setBottom(iv2Top + iv2Height + ((int) (transBottom * positionOffset + 0.5f)));
    }

    private void scaleIv2(float positionOffset) {
        int scaleLeft = iv2Left - iv1Left;
        int scaleRight = iv1Left + iv1Width - iv2Left - iv2Width;
        iv2.setLeft(iv2Left - ((int) (scaleLeft * positionOffset + 0.5f)));
        iv2.setRight(iv2Left + iv2Width + ((int) (scaleRight * positionOffset + 0.5)));
    }

    private void translationYIv21(float positionOffset){
        int transTop = (iv1Top - iv21Top) / 2;
        int transBottom = iv1Top + iv1Height - iv21Top - iv21Height - transTop;
        iv21.setTop(iv21Top + ((int) (transTop * positionOffset + 0.5f)));
        iv21.setBottom(iv21Top + iv21Height + ((int) (transBottom * positionOffset + 0.5f)));
    }

    private void translationIv3AndIv4(float positionOffset) {
        int transLeft3 = (int) (iv3Width * (positionOffset - 0.7f) + 0.5f);
        iv3.setLeft(iv3Left - transLeft3);
        iv3.setRight(iv3Left + iv3Width - transLeft3);

        int trasRight4 = (int) (iv4Width * (positionOffset - 0.7f) + 0.5f);
        iv4.setLeft(iv4Left + trasRight4);
        iv4.setRight(iv4Left + iv4Width + trasRight4);
    }

    private void translationXIv2AndI21AndIv3(float positionOffsetPixels) {
        iv2.setLeft(iv1Left - ((int) (positionOffsetPixels + 0.5f)));
        iv2.setRight(iv1Left + iv1Width - ((int) (positionOffsetPixels + 0.5f)));

        iv21.setLeft(iv1Left - ((int) (positionOffsetPixels + 0.5f)));
        iv21.setRight(iv1Left + iv1Width - ((int) (positionOffsetPixels + 0.5f)));

        iv3.setLeft(iv3Left - ((int) (iv3Width * 0.3f + positionOffsetPixels + 0.5f)));
        iv3.setRight(iv3Left + iv3Width - ((int) (iv3Width * 0.3f + positionOffsetPixels + 0.5f)));
    }

    private void translationIv4ToIv6(float positionOffset) {
        int transTop = (int) ((iv4Top - iv6Top) * positionOffset + 0.5f);
        int transLeft = (int) ((iv4Left + iv4Width * 0.3f - iv6Left) * positionOffset + 0.5f);
        int transBottom = (int) ((iv4Top + iv4Height - (iv6Top + iv6Height)) * positionOffset + 0.5f);
        int transRight = (int) ((iv4Left + iv4Width * 0.3f + iv4Width - (iv6Left + iv6Width)) * positionOffset + 0.5f);
        iv4.setTop(iv4Top - transTop);
        iv4.setLeft((int) (iv4Left + iv4Width * 0.3f - transLeft));
        iv4.setBottom(iv4Top + iv4Height - transBottom);
        iv4.setRight((int) (iv4Left + iv4Width + iv4Width * 0.3f - transRight));
    }

    private void translationIv4X(float positionOffsetPixels){
        iv4.setTop(iv6Top);
        iv4.setLeft((int) (iv6Left - positionOffsetPixels));
        iv4.setRight((int) (iv6Left + iv6Width - positionOffsetPixels));
        iv4.setBottom(iv6Top + iv6Height);
    }

    private void translationIv5(float positionOffset){
        int transTop = (int) ((iv5Top - iv1Top) * positionOffset);
        int transLeft = (int) ((iv5Left - iv1Left) * positionOffset);
        int transBottom = (int) ((iv1Top + iv1Height - (iv5Top + iv5Height)) * positionOffset);
        int transRight = (int) ((iv5Left + iv5Width - (iv1Left + iv1Width)) * positionOffset);
        iv5.setTop(iv5Top - transTop);
        iv5.setLeft(iv5Left - transLeft);
        iv5.setBottom(iv5Top + iv5Height + transBottom);
        iv5.setRight(iv5Left + iv5Width - transRight);
    }

    private void translationIv51(float positionOffset){
        int transTop = (int) ((iv51Top - iv1Top) * positionOffset);
        int transLeft = (int) ((iv51Left - iv1Left) * positionOffset);
        int transBottom = (int) ((iv1Top + iv1Height - (iv51Top + iv51Height)) * positionOffset);
        int transRight = (int) ((iv51Left + iv51Width - (iv1Left + iv1Width)) * positionOffset);
        iv51.setTop(iv51Top - transTop);
        iv51.setLeft(iv51Left - transLeft);
        iv51.setBottom(iv51Top + iv51Height + transBottom);
        iv51.setRight(iv51Left + iv51Width - transRight);
        iv51.setAlpha(1.0f * positionOffset);
    }

其中positionOffset、positionOffsetPixels分别对应OnPageChangeListener()中onPageScrolled()的个参数。若要查看源码可访问我的仓库。欢迎Star、Fork。