java android 路径动画

Question

所以我快要结束了。 我一整天都在研究如何做到这一点。 绘制一条从一点到另一点生长(动画)的路径。 我已经用 Matrix 尝试过，但这只是以改变我的整个路径而结束。

这是我的项目的图片: my project

My goal is to draw a animated path from one circle to the other.

代码:

 public void init(@Nullable AttributeSet attr) {
        circle = new Paint();
        circle.setColor(Color.GREEN);
        circle.setStyle(Paint.Style.FILL);
        circle.setAntiAlias(true);

        line = new Paint();
        line.setColor(Color.GREEN);
        line.setStyle(Paint.Style.STROKE);
        line.setStrokeWidth(10);
        line.setAntiAlias(true);


        Collections.addAll(height, 100, 20, 50, 40, 70, 10, 50); // in percent
        System.out.println(height.size() + " this is the size");
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float y = getHeight() / 20 * 14;
        float x = getWidth() / 8;
        float radius = (canvas.getWidth() * canvas.getHeight()) / 40940;
        for (int c = 1; c < 8; c++) {
            System.out.println("at " + c);
            canvas.drawCircle(x * c, y - ((getHeight() / 20) * (height.get(c - 1) / 10)), radius, circle);
            points.add(new PointF(x * c, (y - ((getHeight() / 20) * (height.get(c - 1) / 10)))));
        }

    }

请帮忙，

谢谢

Answer 1

您只需要使用 ValueAnimator 为路径添加动画

创建一个路径对象

Path path = new Path();

并创建动画师

ValueAnimator animator = new ValueAnimator();
float startX = // starting circle x co-ordinate
float startY = // starting circle y co-ordinate
float endX = // end circle x co-ordinate
float endY = // end circle y co-ordinate
PropertyValuesHolder propertyX = PropertyValuesHolder.ofFloat("x",startX,endX);
PropertyValuesHolder propertyY = PropertyValuesHolder.ofFloat("y",startY,endY);
valueAnimator.setValues(propertyX,propertyY);
valueAnimator.setDuration(1000); // animation time
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float x = (float) animation.getAnimatedValue("x");
            float y = (float) animation.getAnimatedValue("y");
            path.lineTo(x,y);
            invalidate();
        }
    });
valueAnimator.start();

并在onDraw()中绘制路径

canvas.drawPath(path,paint);