Android - 只有 2 个图像和蒙版的动画

Question

我正在尝试使用仅 2 张图片 并使用 mask 制作动画。但是我不知道怎么做。 我不能使用动画列表。我需要帮助才能这样做。谢谢。

动画效果是这样的:

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

我会为此创建一个自定义 View ，以使用 onDraw 方法，尤其是 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.setPercentage(float);

根据您调用它的线程，然后使用myRevealView.invalidate()//主线程 或myRevealView.postInvalidate()//后台线程