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; } }
相关文章推荐
- android 阿拉伯语下,图库中编辑运动轨迹图片,动画中会显示绿色的图片
- Android贝塞尔曲线初步学习第三课 Android实现添加至购物车的运动轨迹
- android 阿拉伯语下,图库中编辑运动轨迹图片,动画中会显示绿色的图片
- android 阿拉伯语下,图库中编辑运动轨迹图片,动画中会显示绿色的图片
- Android购物车添加商品动画抛物线ParabolaAnimation
- android添加购物车动画实现
- Android 实现蘑菇街购物车动画效果
- iTween曲线动画(沿着轨迹运动)
- Android中使用动画动态添加商品进购物车
- android可拖动的购物车效果(含点击放入购物车动画代码)
- Android 实现蘑菇街购物车动画效果
- android animation——添加购物车动画(填坑和优化)
- android动画的抖动轨迹及淡入淡出效果
- Android自定义View仿微博运动积分动画效果
- Android动画初探-实现淘宝加入加入购物车的效果
- Android 使用百度鹰眼实现运动轨迹功能
- 【转】Android 实现蘑菇街购物车动画效果
- android实现蘑菇街购物车动画效果
- Android动画之正弦曲线运动
- 光点沿圆角按钮运动轨迹动画