android学习属性动画,实现购物车抛物线效果

最近比较闲，学习一下属性动画。做了购物车抛物线动画。这里面主要是用了自定义的TypeEvaluator，里面的运动轨迹是贝塞尔二阶曲线。
参考：http://www.jianshu.com/p/d9a3ae9e806d

效果图：

购物车.gif

public class AnimationActivity extends Activity{

    private RecyclerView mAnim_rv;
    private ImageView mIv_pay_anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_animation);
        mAnim_rv = (RecyclerView) findViewById(R.id.anim_rv);
        mIv_pay_anim = (ImageView) findViewById(R.id.iv_pay_anim);

        mAnim_rv.setLayoutManager(new LinearLayoutManager(this));
        mAnim_rv.setAdapter(new MyAnimationAdapter(this));


    }

    public void playAnimation(int[] position){
        
        final ImageView mImg = new ImageView(this);
        mImg.setImageResource(R.drawable.circle);
        mImg.setScaleType(ImageView.ScaleType.MATRIX);
        ViewGroup rootView = (ViewGroup) this.getWindow().getDecorView();
        rootView.addView(mImg);

        int[] des = new int[2];
        mIv_pay_anim.getLocationInWindow(des);

        /*动画开始位置，也就是物品的位置;动画结束的位置，也就是购物车的位置 */
        Point startPosition = new Point(position[0], position[1]);
        Point endPosition = new Point(des[0]+mIv_pay_anim.getWidth()/2, des[1]+mIv_pay_anim.getHeight()/2);

        int pointX = (startPosition.x + endPosition.x) / 2 - 100;
        int pointY = startPosition.y - 200;
        Point controllPoint = new Point(pointX, pointY);

        /*
        * 属性动画，依靠TypeEvaluator来实现动画效果，其中位移，缩放，渐变，旋转都是可以直接使用
        * 这里是自定义了TypeEvaluator， 我们通过point记录运动的轨迹，然后，物品随着轨迹运动，
        * 一旦轨迹发生变化，就会调用addUpdateListener这个方法，我们不断的获取新的位置，是物品移动
        * */
        ValueAnimator valueAnimator = ValueAnimator.ofObject(new BizierEvaluator2(controllPoint),startPosition, endPosition);
        valueAnimator.start();
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                Point point = (Point) valueAnimator.getAnimatedValue();
                mImg.setX(point.x);
                mImg.setY(point.y);
            }
        });

        /**
         * 动画结束，移除掉小圆圈
         */
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                ViewGroup rootView = (ViewGroup) AnimationActivity.this.getWindow().getDecorView();
                rootView.removeView(mImg);
            }
        });


    }

}

/**
 * 贝塞尔曲线（二阶抛物线）
 * controllPoint 是中间的转折点
 * startValue 是起始的位置
 * endValue 是结束的位置
 */
public class BizierEvaluator2 implements TypeEvaluator<Point> {

    private Point controllPoint;

    public BizierEvaluator2(Point controllPoint) {
        this.controllPoint = controllPoint;
    }

    @Override
    public Point evaluate(float t, Point startValue, Point endValue) {
        int x = (int) ((1 - t) * (1 - t) * startValue.x + 2 * t * (1 - t) * controllPoint.x + t * t * endValue.x);
        int y = (int) ((1 - t) * (1 - t) * startValue.y + 2 * t * (1 - t) * controllPoint.y + t * t * endValue.y);
        return new Point(x, y);
    }
}

/**
recyclerview的简单实现
*/

public class MyAnimationAdapter extends RecyclerView.Adapter<MyAnimationAdapter.ViewHolder> {

    private AnimationActivity mContext;
    public MyAnimationAdapter(AnimationActivity context) {
        this.mContext = context;
    }


    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = View.inflate(mContext, R.layout.item_anim,null);
        ViewHolder viewHolder = new ViewHolder(view);
        viewHolder.iv_anim = (ImageView) view.findViewById(R.id.iv_anim);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int position) {
        holder.iv_anim.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int[] loc = new int[2];
                view.getLocationInWindow(loc);
                mContext.playAnimation(loc);
            }
        });
    }

    @Override
    public int getItemCount() {
        return 30;
    }

    class ViewHolder extends RecyclerView.ViewHolder{
        private ImageView iv_anim;
        public ViewHolder(View itemView) {
            super(itemView);
        }
    }
}

public class Point {
    public int x;
    public int y;
    public Point() {}
    public Point(int x, int y) {
        this.x = x;
        this.y = y;
    }
    public Point(Point src) {
        this.x = src.x;
        this.y = src.y;
    }
    public void set(int x, int y) {
        this.x = x;
        this.y = y;
    }
}

activity布局：

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/anim_rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

    >
    </android.support.v7.widget.RecyclerView>


    <ImageView
        android:id="@+id/iv_pay_anim"
        android:layout_gravity="bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/store_cart_ic"
    />

</FrameLayout>

recyclerview布局

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


    <TextView
        android:id="@+id/tv"
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_gravity="right"
        android:text="好吃的珍珠奶茶"/>

    <ImageView
        android:layout_below="@id/tv"
        android:id="@+id/iv_anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp" android:layout_marginTop="20dp"
        android:src="@drawable/details_store_ic"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#38a7f7"/>

    <size
        android:width="15dp"
        android:height="15dp"/>

</shape>