android - 使 View 逐渐出现

Question

我希望我的一个 View 逐渐出现在屏幕上，但我不确定该使用什么。我尝试在 XML 中使用动画以及 alpha 和缩放动画的组合，例如:

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="2000"></alpha>
</set>

它没有给我预期的结果。我不希望我的观点缩放到最终位置，我希望它逐渐出现。它不应该从小的 View 开始，然后变得越来越大。一开始应该是原来的大小。

例如，如果显示最后的 3 秒，则一开始的 View 将根本不可见。在 0.1 秒时会开始显示一点点，在 1.5 秒时会显示 50%，3 秒后会显示 100%。

像这样:

如何实现？谢谢:)

Answer 1

你可以写一个AsyncTask/ValueAnimator来更新要在动画 View 的onDraw(Canvas)中绘制的图形。

在 onDraw(Canvas) 中，先画圆，然后用 PorterDuff.Mode.SRC_IN 绘制图像，这样只有圆的区域显示在屏幕上。

我在Github 分享了完整的演示源代码

APK 是 here

自定义view的源码如下:

package hk.patsolution.animationentrydemo;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by patrickchan on 22/1/15.
 */
public class CircleMaskView extends View implements ValueAnimator.AnimatorUpdateListener {
    private int radius;
    private Paint paint;
    private Paint normal,clear;
    private Bitmap bitmap ,foreground;

    public CircleMaskView(Context c){
        super(c);

    }

    public CircleMaskView(Context c, AttributeSet attr){
        super(c, attr);
        paint=new Paint();
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        paint.setColor(Color.WHITE);
        clear=new Paint();
        clear.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        normal=new Paint();
        normal.setFilterBitmap(true);

    }

    public void startAnimation(int duration){
        ValueAnimator v=ValueAnimator.ofInt(0,100);
        v.setStartDelay(0);
        v.setDuration(duration);
        v.addUpdateListener(this);
        v.start();

    }

    public void setBitmap(Bitmap b){
        bitmap= b;
        foreground=Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);

    }



    @Override
    protected void onDraw(Canvas c){
        super.onDraw(c);
        c.drawBitmap(foreground,0,0,normal);
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        radius=(int)animation.getAnimatedValue();
        Canvas c=new Canvas();
        c.setBitmap(foreground);
        c.drawRect(0, 0, foreground.getWidth(), foreground.getHeight(), clear);
        c.drawCircle(this.getMeasuredWidth()/2,this.getMeasuredHeight()/2,radius*this.getMeasuredWidth()/100,normal);

        c.drawBitmap(bitmap, 0, 0, paint);


        invalidate();
    }
}