美文网首页
购物车动画

购物车动画

作者: 思倦ai | 来源:发表于2019-05-08 20:22 被阅读0次

    使用贝塞尔曲线实现购物车抛物线动画
    关键步骤

    • 使用path 构建贝塞尔曲线
    • 使用PathMeasure计算曲线上每个对应的坐标点
    • 使用ValueAnimator执行动画
    1. 使用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);
    
    1. 构建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();
    

    坚持写博客的人 真的是超级牛掰
    努力吧 细粉儿

    参考地址 https://www.cnblogs.com/ldq2016/p/7010427.html

    相关文章

      网友评论

          本文标题:购物车动画

          本文链接:https://www.haomeiwen.com/subject/qsgvoqtx.html