Androidでのブラシペイントアニメーション効果

Question

下記のブラシペイント効果を作成したいと思います。私はこれをどうやってやるべきか、どこから始めるのか分かりません。 Web上でソリューションを検索すると、有用な結果が得られませんでした。どんな助けもありがとう！

Answer 1

これを行うには多くの方法があります。可能な限り最良の方法は、おそらく第三者のツールでアニメーションをレンダリングし、それをデバイス上で再生することですが、さらに簡単な方法がいくつかあります。例えば、ValueAnimatorといくつかのドロワーブルまたはAnimationDrawableを使用するだけです。このようなもの。

この回答ではValueAnimatorバージョンのデモンストレーションを行います。

1. ブラシ
2. 塗料用

背後ブラシ葉：このアニメには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プロパティを更新して、ペイントとブラシを画面全体に移動させます。ペイントは画面の幅によってオフセットされるので、画面からずっと離れて開始し、ブラシの後ろに移動して、ブラシペインティングの錯覚を画面に表示します。

ご不明な点がありましたらお気軽にお問い合わせください。