您的位置:首页 > 移动开发 > Android开发

Android购物车运动轨迹动画

2017-01-17 16:29 417 查看
public class PathBezierView extends View implements View.OnClickListener{

private int mStartPointX;
private int mStartPointY;

private int mEndPointX;
private int mEndPointY;

private int mFlagPointX;
private int mFlagPointY;

private int mMovePointX;
private int mMovePointY;

private Path mPath;
private Paint mPaintPath;
private Paint mPaintCircle;

public PathBezierView(Context context) {
super(context);
}

public PathBezierView(Context context, AttributeSet attrs) {
super(context, attrs);
mPath = new Path();
mPaintPath = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintPath.setStyle(Paint.Style.STROKE);
mPaintPath.setStrokeWidth(8);
mPaintCircle = new Paint(Paint.ANTI_ALIAS_FLAG);

mStartPointX = 100;
mStartPointY = 100;

mMovePointX = mStartPointX;
mMovePointY = mStartPointY;

mEndPointX = 600;
mEndPointY = 600;

mFlagPointX = 500;
mFlagPointY = 0;

setOnClickListener(this);
}

public PathBezierView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mStartPointX, mStartPointY, 20, mPaintCircle);
canvas.drawCircle(mEndPointX, mEndPointY, 20, mPaintCircle);

canvas.drawCircle(mMovePointX, mMovePointY, 20, mPaintCircle);

mPath.reset();
mPath.moveTo(mStartPointX, mStartPointY);
mPath.quadTo(mFlagPointX, mFlagPointY, mEndPointX, mEndPointY);
canvas.drawPath(mPath, mPaintPath);
}

@Override
public void onClick(View view) {
BezierEvaluator evaluator = new BezierEvaluator(new PointF(mFlagPointX, mFlagPointY));
ValueAnimator animator = ValueAnimator.ofObject(evaluator,
new PointF(mStartPointX, mStartPointY),
new PointF(mEndPointX, mEndPointY));
animator.setDuration(600);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
PointF pointF = (PointF) valueAnimator.getAnimatedValue();
mMovePointX = (int) pointF.x;
mMovePointY = (int) pointF.y;
invalidate();
}
});
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.start();
}
}


public class BezierEvaluator implements TypeEvaluator<PointF> {

private PointF mFlagPoint;

public BezierEvaluator(PointF flagPoint) {
mFlagPoint = flagPoint;
}

@Override
public PointF evaluate(float v, PointF pointF, PointF t1) {
return BezierUtil.CalculateBezierPointForQuadratic(v, pointF, mFlagPoint, t1);
}
}


public class BezierUtil {

/**
* B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1]
*
* @param t  曲线长度比例
* @param p0 起始点
* @param p1 控制点
* @param p2 终止点
* @return t对应的点
*/
public static PointF CalculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) {
PointF point = new PointF();
float temp = 1 - t;
point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x;
point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y;
return point;
}

/**
* B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
*
* @param t  曲线长度比例
* @param p0 起始点
* @param p1 控制点1
* @param p2 控制点2
* @param p3 终止点
* @return t对应的点
*/
public static PointF CalculateBezierPointForCubic(float t, PointF p0, PointF p1, PointF p2, PointF p3) {
PointF point = new PointF();
float temp = 1 - t;
point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t;
point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t;
return point;
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: