Question

我尝试使用只有2张图片并使用掩码制作动画。但是我不知道怎么做。 我无法使用动画列表。我需要帮助才能这样做。谢谢。

动画效果如下：

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

我会为此创建一个自定义视图，以使用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()//main thread或 myRevealView.postInvalidate()//background thread

Answer 2

我修改了 Nicolas Simon 的类，代码完美无缺

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>

Android - 只有2个图像和掩码的动画

2 个答案: