アンドロイド - 唯一の2画像をアニメーションと私は<strong>のみ2画像</strong>と<strong>アニメーション</strong>をしようと<strong>マスク</strong>を使用してい

Question

をマスクします。しかし、私は方法がわかりません。 アニメーションリストは使用できません。私はそうする助けが必要です。ありがとうございました。

アニメーションの効果は次のようになります。私はonDrawで動作するように、そのためのカスタムビューを作成します

public void makeMaskImage(ImageView mImageView, int mContent) { 

    Bitmap original = BitmapFactory.decodeResource(getResources(), mContent); 
    Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask); 
    Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888); 
    Canvas mCanvas = new Canvas(result); 
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 
    mCanvas.drawBitmap(original, 0, 0, null); 
    mCanvas.drawBitmap(mask, 0, 0, paint); 
    paint.setXfermode(null); 
    mImageView.setImageBitmap(result); 
    mImageView.setScaleType(ImageView.ScaleType.CENTER); 
    mImageView.setBackgroundResource(R.drawable.img_b); 
} 

アニメーション

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:fillAfter="true" 
android:fillEnabled="true" 
android:interpolator="@android:anim/linear_interpolator"> 

<translate 
    android:duration="3000" 
    android:fromXDelta="-100%p" 
    android:toXDelta="0%p" /> 

</set> 

Answer 1

私はニコラス・サイモンのクラスを変更し、コードは完全に動作します

public class RevealView extends ImageView { 

private Bitmap secondBitmap; 
private float mAnimationPercentage; 
private Path mPath; 
private Paint mPaint; 

public RevealView(Context context) { 
    super(context); 
    init(); 
} 

public RevealView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    init(); 
} 

public RevealView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    init(); 
} 

private void init() { 
    setPercentage(0); 

    mPaint = new Paint(); 
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER)); 
    mPath = new Path(); 
} 

public void setPercentage(int p) { 
    if(p > 100) { 
     p = 100; 
    } 
    mAnimationPercentage = p/100f; 
    invalidate(); 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    Bitmap mRegularBitmap = ((BitmapDrawable) getDrawable()).getBitmap(); 
    if (mRegularBitmap != null && secondBitmap != null) { 
     //First draw your regular image 
     canvas.drawBitmap(mRegularBitmap, 0, 0, null); 

     //Then clip the canvas depending on the animation percentage, using a Path 
     mPath.reset(); 
     mPath.moveTo((float) canvas.getWidth() * mAnimationPercentage, 0.0f); 
     mPath.lineTo((float) canvas.getWidth() * mAnimationPercentage, canvas.getHeight()); 
     mPath.lineTo(canvas.getWidth(), canvas.getHeight()); 
     mPath.lineTo(canvas.getWidth(), 0.0f); 
     mPath.close(); 

     canvas.drawPath(mPath, mPaint); 
     canvas.clipPath(mPath); 

     //Then draw the gray bitmap on top 
     canvas.drawBitmap(secondBitmap, 0.0f, 0.0f, null); 
    } 
} 

public void setSecondBitmap(Bitmap secondBitmap) { 
    this.secondBitmap = secondBitmap; 
} 
} 

MainActivity

@Override 
public void onResume() { 
    super.onResume(); 

    revealView.setSecondBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.img_1)); 

    percentage = 0; 
    timer.schedule(new TimerTask() { 
     @Override 
     public void run() { 
      runOnUiThread(new Runnable() { 
       @Override 
       public void run() { 
        if (percentage <= 100) { 
         revealView.setPercentage(percentage); 
         percentage++; 
        } else { 
         cancel(); 
        } 
       } 
      }); 
     } 
    }, 0, 120); 
} 

activity_main.xml

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

<com.example.animation.RevealView 
    android:id="@+id/image" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:src="@drawable/img_2" /> 

</RelativeLayout> 

Answer 2

方法、特にclip機能です。 このクラスは私のために働いていますが、あなたの側では非常に変更されたままです。 実装は以下のようになります：

public class RevealView extends View { 
private Bitmap     mRegularBitmap; 
private Bitmap     mGrayScaleBitmap; 
private float     mAnimationPercentage; 
private Path     mPath; 
private Paint     mPaint; 

public RevealView(Context context) { 
    super(context); 
    init(); 
} 

public RevealView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    init(); 
} 

public RevealView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    init(); 
} 

private void init() { 
    mRegularBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sign_in_up_icon); 
    mGrayScaleBitmap = toGrayScale(mRegularBitmap); 
    mAnimationPercentage = 0.0f; 

    mPaint = new Paint(); 
    mPath = new Path(); 
} 

public void reset() { 
    mAnimationPercentage = 0.0f; 
} 

public void setPercentage(float p) { 
    mAnimationPercentage = p; 
} 

private Bitmap toGrayScale(Bitmap origin) { 
    int width, height; 
    height = origin.getHeight(); 
    width = origin.getWidth(); 

    Bitmap bmpGrayscale = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); 
    Canvas c = new Canvas(bmpGrayscale); 
    Paint paint = new Paint(); 
    ColorMatrix cm = new ColorMatrix(); 
    cm.setSaturation(0); 
    ColorMatrixColorFilter f = new ColorMatrixColorFilter(cm); 
    paint.setColorFilter(f); 
    c.drawBitmap(origin, 0, 0, paint); 
    return (bmpGrayscale); 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    //First draw your regular image 
    canvas.drawBitmap(mRegularBitmap, 0, 0, null); 

    //Then clip the canvas depending on the animation percentage, using a Path 
    mPath.reset(); 
    mPath.moveTo((float)canvas.getWidth() * mAnimationPercentage, 0.0f); 
    mPath.lineTo((float)canvas.getWidth() * mAnimationPercentage, canvas.getHeight()); 
    mPath.lineTo(canvas.getWidth(), canvas.getHeight()); 
    mPath.lineTo(canvas.getWidth(), 0.0f); 
    mPath.close(); 

    canvas.drawPath(mPath, mPaint); 
    canvas.clipPath(mPath); 

    //Then draw the gray bitmap on top 
    canvas.drawBitmap(mGrayScaleBitmap, 0.0f, 0.0f, null); 
} 

その後、 myRevealView.invalidate()//main threadまたは myRevealView.postInvalidate()//background thread

を使用するか、そして、あなた自身のアニメーションを定義し、単にあなたがそれを呼び出しているスレッドによって myRevealView.setPercentage(float);

を呼び出します