CODEWITHSUNDEEP
androidandroid-animation
Mangesh Kadam
Mangesh Kadam

Reputation: 587

how to animate view drawn using Canvas in android?

I am drawing vertical stepper view using Canvas in onDraw method. This view is drawn dynamically depending upon the number of steps. My view looks like below enter image description here So if my current step is 2, I want to draw animation from circle 1 to cirle 2 with the color in step1 circle. and then glow the second circle continuously so that user will give attention. How I can achieve this animation effect?

Upvotes: 1

Views: 1202

Answers (1)

Nutriz
Nutriz

Reputation: 187

To complet my comment, here is a solution for moving a circle step by step in onDraw(), using a ValueAnimator.

class CircleWithMotion extends View implements ValueAnimator.AnimatorUpdateListener {

    private final int CIRCLE_RADIUS = 30;
    private final int STEP_Y = 200;
    private final PointF circlePosition = new PointF(100, 100);

    private ValueAnimator animator;
    private Paint paint;

    public CircleWithMotion(Context context) {
        super(context);
        paint = new Paint();
        paint.setColor(Color.BLUE);

        // HERE you can change the type and duration of the animation
        animator = new ValueAnimator();
        animator.setDuration(1000);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.addUpdateListener(this);
    }

    // Call this to start the animation
    public void movingToNextStep() {
        // Sets the START and END values for the animation (FROM current y position TO next position)
        animator.setFloatValues(circlePosition.y, circlePosition.y + STEP_Y);
        animator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawCircle(circlePosition.x, circlePosition.y, CIRCLE_RADIUS, paint);
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        // Update the Y circle position with the calculated value from animator
        circlePosition.y = (float) animator.getAnimatedValue();
        // say the view must be redraw
        this.invalidate();
    }
}

Upvotes: 2

Related Questions