java - Android中的毛笔绘画动画效果

Question

我想创建下面的画笔绘画效果。我不知道该怎么做或从哪里开始。在网络上搜索解决方案没有产生可用的结果。任何帮助将不胜感激!

Answer 1

有很多方法可以做到这一点。最好的方法可能是在第三方工具中渲染动画然后在设备上播放它，但也有一些更简单的方法 - 例如只使用 ValueAnimator 和一些drawables 或 AnimationDrawable - 创建这样的东西。

我将在这个答案中演示 ValueAnimator 版本。结果应如下所示:

这个动画有两个部分:

1. 画笔
2. 画笔留下的颜料

对于笔刷，我使用笔刷的透明 png 图像。画笔留下的油漆只是一个带有黑色背景色的 FrameLayout。

使用 FrameLayout 作为容器，我将它们放置在我的布局中，如下所示:

<?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>

执行动画的代码非常简单:

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

ValueAnimator 在此示例中设置为无限重复。在 AnimatorUpdateListener 中，我更新了 translationX 属性以在屏幕上一起移动绘画和画笔。绘画偏移了屏幕的宽度，因此它从屏幕开始一直移动到画笔后面，以在屏幕上创建画笔绘画的错觉。

如果您还有任何问题，请随时提出!