Cómo animar un camino en el canvas – Android

¿Es posible unir un animador a un camino? ¿Hay alguna otra manera de dibujar en líneas animadas de canvas? Busqué esto antes de publicar, pero no hay nada sobre esto. En otros dos mensajes aquí y aquí hay soluciones para caminar y no me quedan. ¡Gracias!

Publiqué mi código dentro del método onDraw para especificar exactamente lo que quiero.

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); 

¿¿¿¿Algunas ideas????

Puede transformar su canvas por tiempo, es decir:

 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); } } 

prueba esto:

 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(); } } 

para probarlo, agregue en su método onCreate:

 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); 

Puede crear una PathMeasure para su ruta y determinar la longitud de la misma:

 private PathMeasure pathMeasure; // field // After you've created your path pathMeasure = new PathMeasure(path, false); pathLength = pathMeasure.getLength(); 

Luego puede obtener un punto específico en la ruta usando getPosTan () dentro, por ejemplo, un oyente de actualización de ValueAnimator:

 final float[] position = new float[2]; // field // Inside your animation's update method, where dt is your 0..1 animated fraction final float distance = dt * pathLength; pathMeasure.getPosTan(distance, position, null); // If using onDraw you'll need to tell the view to redraw using the new position invalidate(); 

A continuación, puede hacer uso de la posición en onDraw (o lo que sea).

 canvas.drawCircle(position[0], position[1], radius, paint); 

Las ventajas de este enfoque es que es sencillo, no requiere cálculos gruesos y funciona en todas las API.

Si usa la API 21+, puede usar un ValueAnimator y pasar una ruta para usar sus posiciones, lo cual es más simple. Ejemplo de pregunta SO .