Jak animować ścieżkę na płótnie - android

Question

Czy można dołączyć animatora do ścieżki? Czy istnieje inny sposób rysowania animowanych linii na płótnie? Przeszukałem to zanim opublikuję, ale nic na ten temat nie ma. W dwóch innych postach here i here istnieje wiele rozwiązań i nie pasuje do mnie. Dziękujemy!

Umieszczę mój kod wewnątrz metody onDraw, aby określić, co dokładnie chcę.

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

Wszelkie pomysły ????

Answer 1

można przekształcić swoje płótna przez czas, czyli:

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

spróbuj tego:

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

przetestować go dodać w swoim onCreate metody:

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

Można tworzyć PathMeasure dla twojej ścieżki i określ jej długość:

private PathMeasure pathMeasure; // field 

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

Następnie można dostać się do konkretnego punktu na ścieżce przy użyciu getPosTan() wewnątrz, powiedzmy, zmiana słuchaczowi ValueAnimator za:

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

Można wtedy skorzystać z pozycji w OnDraw (lub cokolwiek).

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

Zaletą tego podejścia jest to, że jest proste, nie wymaga grube matematyki, i działa na wszystkich interfejsów API.

Jeśli używasz API 21+, możesz użyć ValueAnimatora i przekazać ścieżkę, aby użyć jego pozycji, co jest prostsze. Example SO question.