Android中的笔刷绘画动画效果

Question

我想在下面创建笔刷绘画效果。我不知道如何做到这一点或从哪里开始。在网上搜索解决方案没有产生可用的结果。任何帮助，将不胜感激！

Answer 1

有很多方法可以做到这一点。最好的方法可能是在第三方工具中渲染动画，然后在设备上播放动画，但也有一些更简单的方法 - 例如使用ValueAnimator和一些可绘制的或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属性以将画笔和笔刷在屏幕上一起移动。油漆被屏幕宽度所抵消，因此它始终从屏幕开始移动并移动到笔刷后面，以在屏幕上创建画笔绘画的错觉。

如果您有任何其他问题随时问！