Android move object along a path

Question

I have created a path and circle and displayed both of them on screen as follows:

public void onDraw(Canvas canvas){
        
        Path sPath = new Path();
        sPath.moveTo(100, 100);
        sPath.lineTo(300, 100);
        sPath.lineTo(300, 300);
        sPath.lineTo(100,300);
        sPath.lineTo(100,100);
        sPath.close();
        
        Paint ballPaint = new Paint();
        ballPaint.setColor(Color.GREEN);
        Paint pathPaint = new Paint();
        pathPaint.setColor(Color.BLUE);
        
        canvas.drawPath(sPath, ballPaint);
        canvas.drawCircle(100,100,20,pathPaint);
    }

i would like to have the circle move along the path, how can i do this?

Dileep P G · Answer 1 · 2015-05-15T08:23:41.200

Here are the animators I use:

Purpose: Move View "view" along Path "path"

v21+:

ValueAnimator pathAnimator = ObjectAnimator.ofFloat(view, "x", "y", path)

v11+:

ValueAnimator pathAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);

pathAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
float[] point = new float[2];

@Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float val = animation.getAnimatedFraction();
        PathMeasure pathMeasure = new PathMeasure(path, true);
        pathMeasure.getPosTan(pathMeasure.getLength() * val, point, null);
        view.setX(point[0]);
        view.setY(point[1]);
    }
});

How can I rotate my view after each contour. I have 4 points. I simply create path using lineto. Now I want to rotate my view on each of these 4 points. How can I do this? — pa1pal, Jun 28 '16 at 12:51

score 17 · Answer 2 · answered Jan 28 '12 at 20:55

Yes, it's possible to move image along path. I will provide simple solution to show the principle. The following code will animate the circle along the path.

int iCurStep = 0;// current animation step

@Override
protected void onDraw(Canvas canvas) {
    PathMeasure pm = new PathMeasure(sPath, false);
    float fSegmentLen = pm.getLength() / 20;//we'll get 20 points from path to animate the circle
    float afP[] = {0f, 0f};

    if (iCurStep <= 20) {
        pm.getPosTan(fSegmentLen * iCurStep, afP, null);
        canvas.drawCircle(afP[0],afP[1],20,pathPaint);
        iCurStep++;
        invalidate();
    } else {
        iCurStep = 0;
    };
};

score 7 · Answer 3 · answered Jan 13 '15 at 20:45

7

v21+: this creates a quadratic bezier curve on a path and animates myView along it.

final Path path = new Path();
path.quadTo(controlX, controlY, finalX, finalY);
ObjectAnimator.ofFloat(myView, View.X, View.Y, path).start();

answered Jan 13 '15 at 20:45

Tom

6,946
2
47
63

score 3 · Accepted Answer · answered May 27 '11 at 15:44

3

You would need to move your circle a little bit each frame towards the next waypoint and detect once it gets there, then start moving toward the next. There is no built in system that I know of.

answered May 27 '11 at 15:44

CaseyB

24,780
14
77
112

score 0 · Answer 5 · answered Jun 24 '20 at 23:10

0

The right way to do this is with ContraintLayout and then add a keyframe between the points on the path you want to animate, as described here: https://medium.com/google-developers/defining-motion-paths-in-motionlayout-6095b874d37.

answered Jun 24 '20 at 23:10

Rob

11,446
7
39
57

Android move object along a path

5 Answers5

Linked