Android 一个滑动特效

平时见过这个效果，今天实现了下。这个效果要实现随着想上滚动，actionbar位置透明度的变化，图片的缩放及平移。后面小图片的旋转是自己加的。

滑动控件用的是NestedScrollView,可以监听滚动的过程。滚动的这个过程中，进度percent从0到1，完成整个效果。

• 透明度从0-1
• 宽高：从大图片到小图片变化，用的是view.setScaleX,view.setScaleY方法
• 位置：从小图片到小图片变化，用的是view.setTranslationX方法
• 进度完成旋转动画

布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nest_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_margin="50dp"
                android:id="@+id/iv_big"
                android:src="@mipmap/batman"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            
            
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" /><ImageView
            android:src="@mipmap/ic_launcher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />



        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <FrameLayout
        android:id="@+id/fl_bar"
        android:background="@color/colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <ImageView
            android:visibility="invisible"
            android:id="@+id/iv_small"
            android:layout_gravity="center"
            android:src="@mipmap/batman"
            android:layout_width="45dp"
            android:layout_height="45dp" />

    </FrameLayout>
</FrameLayout>

代码：

public class AnimIconActivity extends AppCompatActivity {

    private static final String TAG = "AnimIconActivity";
    private float diatance;
    private float translationY;
    private float translationX;
    private int[] bigLocation;
    private FrameLayout fl;
    private float widthBig;
    private float heightBig;
    private float widthSmall;
    private float heightSmall;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_anim_icon);

        final ImageView ivSmall = (ImageView) findViewById(R.id.iv_small);//大图片
        final ImageView ivBig = (ImageView) findViewById(R.id.iv_big);//小图片

        final NestedScrollView nestScrollView = (NestedScrollView) findViewById(R.id.nest_scroll_view);


        //获取大图片和小图片的位置信息和宽高
        ivBig.post(new Runnable() {

            @Override
            public void run() {

                widthBig = ivBig.getWidth();
                heightBig = ivBig.getHeight();


                widthSmall = ivSmall.getWidth();
                heightSmall = ivSmall.getHeight();

                int[] smallLocaion = new int[2];
                ivSmall.getLocationInWindow(smallLocaion);

                bigLocation = new int[2];
                ivBig.getLocationInWindow(bigLocation);

                diatance = Math.abs(smallLocaion[1]- bigLocation[1]);//y方向需滚动的距离

                translationX = smallLocaion[0] - bigLocation[0];
                translationY = smallLocaion[1] - bigLocation[1];


            }
        });

        ivSmall.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ivBig.setTranslationX(translationX);
                ivBig.setTranslationY(translationY);
            }
        });
        ivBig.setPivotX(0);
        ivBig.setPivotY(0);

        //头像栏
        fl = (FrameLayout) findViewById(R.id.fl_bar);
        fl.setAlpha(0);
        nestScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {

            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

                View child = nestScrollView.getChildAt(0);
                int height = child.getHeight();
                int height1 = nestScrollView.getHeight();

                int top = Math.abs(nestScrollView.getScrollY());
                if (height - height1 >= diatance) {

                    if (top <= diatance) {
                        Log.i(TAG, "onScrollChange: " + scrollY);

                        //滚动的进度
                        float percent = top / diatance;

                        
                        //计算设置缩放比例
                        ivBig.setScaleX(percent * (widthSmall / widthBig - 1) + 1);
                        ivBig.setScaleY(percent * (heightSmall / heightBig - 1) + 1);



                        //设置透明度
                        fl.setAlpha(percent);
                        ivBig.setAlpha(1-percent+0.2f);
                        
                        
                        //x方向朝小图片平移，y方向不用管NestedScrollView会带着它飞
                        float x = (translationX) * percent;
                        ivBig.setTranslationX(x);

                        //滚动未完成隐藏小图片
                        ivSmall.setVisibility(View.INVISIBLE);
                        
                        
                    }else {//滚动已完成

                        if(ivSmall.getVisibility()!=View.VISIBLE){
                            fl.setAlpha(1);
                            ivSmall.setVisibility(View.VISIBLE);
                            
                            ObjectAnimator rotation = ObjectAnimator.ofFloat(ivSmall, "rotation", -60, 60, 0)
                                    .setDuration(400);
                            rotation.setInterpolator(new OvershootInterpolator());
                            rotation.start();

                        }

                    }
                }
            }
        });
    }



}

github 源码