您的位置:首页 > 其它

属性动画 模拟美团外卖购物车曲线动画

2017-10-12 19:04 876 查看

效果图

就是点击右上角的按钮,会有一个小圆点从该按钮位置曲线移动到左下角的按钮的位置



MainActivity.java

package com.qunar.yuzhiyun.propertyanimation;

import android.animation.ObjectAnimator;
import android.graphics.Point;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

Button btnStart;
Button btnEnd;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
btnStart= (Button) findViewById(R.id.btnStart);
btnEnd= (Button) findViewById(R.id.btnEnd);
btnStart.setOnClickListener(this);
}

@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.btnStart:
int start[] = new int[2];
btnStart.getLocationInWindow(start);
int end[] = new int[2];
btnEnd.getLocationInWindow(end);
Point startPoint=new Point(start[0],start[1]);
Point endPoint=new Point(end[0],end[1]);
BallView ballView=new BallView(MainActivity.this);
ballView.startAnimation(startPoint,endPoint);
ViewGroup rootView = (ViewGroup) this.getWindow().getDecorView();
rootView.addView(ballView);
}
}
}


BezierEvaluator.java

(自定义一个TypeEvaluator ,用于计算物体移动的中间位置 )

public class BezierEvaluator implements  TypeEvaluator<Point> {

private Point controllPoint;

public BezierEvaluator(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);
}

}


BallView.java (小红点视图)

package com.qunar.yuzhiyun.propertyanimation;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.TextView;

/**
* Created by yuzhiyun on 17/10/12.
*/

public class BallView extends AppCompatTextView implements  ValueAnimator.AnimatorUpdateListener{
Paint paint;
int radius=30;

public BallView(Context context) {
super(context);
paint = new Paint();
paint.setColor(Color.RED);
paint.setAntiAlias(true);
setGravity(Gravity.CENTER);
setText("1");
setTextColor(Color.WHITE);
setTextSize(12);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(radius*2,radius*2);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(getMeasuredWidth()/2,getMeasuredHeight()/2,radius,paint);
}
public  void  startAnimation(Point startPoint, Point endPoint){
//控制点,二阶贝塞尔曲线需要三个点,目前只有两个,所以需要新增一个
int pointX = (startPoint.x + endPoint.x) / 2;
int pointY = (int) (startPoint.y );
Point controllPoint = new Point(pointX, pointY);
BezierEvaluator bezierEvaluator=new BezierEvaluator(controllPoint);
ValueAnimator anim= ValueAnimator.ofObject(bezierEvaluator,startPoint,endPoint);
anim.addUpdateListener(this);
anim.setDuration(2000);
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
ViewGroup viewGroup = (ViewGroup) getParent();
viewGroup.removeView(BallView.this);
}
});
anim.setInterpolator(new AccelerateDecelerateInterpolator());
anim.start();
}

@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
Point point = (Point) valueAnimator.getAnimatedValue();
setX(point.x);
setY(point.y);
invalidate();
}
}


参考自 http://www.jianshu.com/p/d9a3ae9e806d

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: