Come animare un percorso su tela - android

Question

È possibile allegare un animatore a un percorso? C'è un altro modo per disegnare su linee animate di tela? Ho cercato questo prima di postare, ma non c'è nulla al riguardo. In altri due post, here e here, ci sono soluzioni per i walk around e non mi vanno bene. Grazie!

Inserisco il mio codice nel metodo onDraw per specificare cosa esattamente voglio.

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

Qualche idea ????

Answer 1

È possibile trasformare la vostra tela di tempo, vale a dire:

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

provare questo:

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

di testarlo aggiungere nel metodo 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); 

Answer 3

È possibile creare a PathMeasure per il percorso e determinare la lunghezza di esso:

private PathMeasure pathMeasure; // field 

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

È quindi possibile ottenere ottenere un punto specifico il percorso utilizzando getPosTan() all'interno, per esempio, di un ValueAnimator aggiornamento ascoltatore:

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

È quindi possibile fare uso della posizione in OnDraw (o qualsiasi altra cosa).

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

I vantaggi di questo approccio è che è semplice, non richiede la matematica grosso, e funziona su tutte le API.

Se si utilizza l'API 21+, è possibile utilizzare un ValueAnimator e passare un percorso per utilizzare le sue posizioni, che è più semplice. Example SO question.