购物车动画
2019-05-08 本文已影响0人
思倦ai
使用贝塞尔曲线实现购物车抛物线动画
关键步骤
- 使用path 构建贝塞尔曲线
- 使用PathMeasure计算曲线上每个对应的坐标点
- 使用ValueAnimator执行动画
- 使用path构建贝塞尔曲线
int startLocation=new int[2]
view.getLocationInWindow(startLocation);//获取起点坐标
Path path = new Path();
path.moveTo(startLocation[0],startLocation[1]);
path.quadTo(500,90,600,700);
- 构建ValueAnimator
mPathMeasure = new PathMeasure(mPath, false);
//计算贝塞尔曲线的总长度
float length = mPathMeasure.getLength();
Log.e(TAG, "onClick: " + length);
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, length);
valueAnimator.setDuration(1000);
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
valueAnimator.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
Log.e(TAG, "value -->> : " + value);
//超级关键的方法 通过PathMeasure计算每个坐标点
mPathMeasure.getPosTan(value, mCurrentPosition, null);
Log.e(TAG, mCurrentPosition[0] + " @@ " + mCurrentPosition[1]);
mTextView.setTranslationX(mCurrentPosition[0]);
mTextView.setTranslationY(mCurrentPosition[1]);
}
});
valueAnimator.start();
坚持写博客的人 真的是超级牛掰
努力吧 细粉儿
