Android中的画笔绘画动画效果

Question

I want to create the brush painting effect below. I have no idea how to do this or where to start. Searching for solutions on the web yielded no useable results. Any help would be appreciated!

Answer 1

There are many ways to do this. The best possible way would probably be to render the animation in a third party tool and then just play it back on the device, but there are also a few simpler ways - for example just using a ValueAnimator and some drawables or an AnimationDrawable - to create something like this.

I'm going to demonstrate the ValueAnimator version in this answer. The result should look something like this:

There are two parts to this animation:

1. The brush
2. The paint the brush leaves behind

For the brush I use a transparent png image of a brush. The paint the brush leaves behind is just a FrameLayout with a black background color.

Using a FrameLayout as container I place them in my layout like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <FrameLayout
            android:id="@+id/paint"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:background="@android:color/black"/>

        <ImageView
            android:id="@+id/brush"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/paint_brush"/>

    </FrameLayout>

</FrameLayout>

The code to perform the animation is quite simple:

final View brush = findViewById(R.id.brush);
final View paint = findViewById(R.id.paint);

final ValueAnimator animator = ValueAnimator.ofFloat(0.0f, 1.0f);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setDuration(6000L);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        final float progress = (float) valueAnimator.getAnimatedValue();
        paint.setTranslationX(-paint.getWidth() * (1.0f - progress));
        brush.setTranslationX(paint.getWidth() * progress);
    }
});
animator.start();

The ValueAnimator is set to repeat infinitely in this example. In the AnimatorUpdateListener I update the translationX property to move the paint and the brush together across the screen. The paint is offset by the width of the screen so it starts of all the way off screen and moves in behind the brush to create the illusion of the brush painting on the screen.

If you have any further questions feel free to ask!