How to animate a path on canvas - android

Question

Is possible to attach an animator to a path?

Is there any other way to draw animated lines on the Canvas?

I searched this before I posted but I couldn’t find anything. In two other posts Draw a path as animation on Canvas in Android and How to draw a path on an Android Canvas with animation there are workaround solutions which does not work for me.

I post my code inside the onDraw method to specify what exactly I want.

paint.setStyle(Paint.Style.STROKE);     paint.setStrokeWidth(2);     paint.setColor(Color.BLACK);      Path path = new Path();     path.moveTo(10, 50);   // THIS TRANSFORMATIONS TO BE ANIMATED!!!!!!!!     path.lineTo(40, 50);     path.moveTo(40, 50);     path.lineTo(50, 40);     // and so on...      canvas.drawPath(path, paint); 

Answer 1

You can transform your canvas by time, i.e:

class MyView extends View {      int framesPerSecond = 60;     long animationDuration = 10000; // 10 seconds      Matrix matrix = new Matrix(); // transformation matrix      Path path = new Path();       // your path     Paint paint = new Paint();    // your paint      long startTime;      public MyView(Context context) {         super(context);          // start the animation:         this.startTime = System.currentTimeMillis();         this.postInvalidate();      }      @Override     protected void onDraw(Canvas canvas) {          long elapsedTime = System.currentTimeMillis() - startTime;          matrix.postRotate(30 * elapsedTime/1000);        // rotate 30° every second         matrix.postTranslate(100 * elapsedTime/1000, 0); // move 100 pixels to the right         // other transformations...          canvas.concat(matrix);        // call this before drawing on the canvas!!          canvas.drawPath(path, paint); // draw on canvas          if(elapsedTime < animationDuration)             this.postInvalidateDelayed( 1000 / framesPerSecond);     }  } 

Answer 2

try this:

class PathDrawable extends Drawable implements AnimatorUpdateListener  {     private Path mPath;     private Paint mPaint;     private ValueAnimator mAnimator;      public PathDrawable() {         mPath = new Path();         mPaint = new Paint();         mPaint.setColor(0xffffffff);         mPaint.setStrokeWidth(5);         mPaint.setStyle(Style.STROKE);     }      public void startAnimating() {         Rect b = getBounds();         mAnimator = ValueAnimator.ofInt(-b.bottom, b.bottom);         mAnimator.setDuration(1000);         mAnimator.addUpdateListener(this);         mAnimator.start();     }      @Override     public void draw(Canvas canvas) {         canvas.drawPath(mPath, mPaint);     }      @Override     public void setAlpha(int alpha) {     }      @Override     public void setColorFilter(ColorFilter cf) {     }      @Override     public int getOpacity() {         return PixelFormat.TRANSLUCENT;     }      @Override     public void onAnimationUpdate(ValueAnimator animator) {         mPath.reset();         Rect b = getBounds();         mPath.moveTo(b.left, b.bottom);         mPath.quadTo((b.right-b.left)/2, (Integer) animator.getAnimatedValue(), b.right, b.bottom);         invalidateSelf();     } } 

to test it add in your onCreate method:

TextView view = new TextView(this); view.setText("click me"); view.setTextColor(0xffcccccc); view.setGravity(Gravity.CENTER); view.setTextSize(48); final PathDrawable d = new PathDrawable(); view.setBackgroundDrawable(d); OnClickListener l = new OnClickListener() {     @Override     public void onClick(View v) {         d.startAnimating();     } }; view.setOnClickListener(l); setContentView(view);