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屬性以將畫筆和筆刷在屏幕上一起移動。油漆被屏幕寬度所抵消，因此它始終從屏幕開始移動並移動到筆刷後面，以在屏幕上創建畫筆繪畫的錯覺。

如果您有任何其他問題隨時問！