一个滑动特效

平时见过这个效果，今天实现了下。这个效果要实现随着想上滚动，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 源码