高仿网易美学app启动页动画特效

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

welcome.gif

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

就是先把所要操作的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。