Question

我希望我的一个观点逐渐出现在屏幕上，我不知道该使用什么。我尝试使用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>

它没有给我预期的结果。我不希望我的观点扩展到最终位置，我希望它逐渐显现。它不应该从小视图开始，然后变得越来越大。它应该是一开始的原始尺寸。

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

这样的事情：

enter image description here

如何实现这一目标？谢谢:)）

Answer 1

您可以编写AsyncTask / ValueAnimator来更新要在动画视图的onDraw（Canvas）中绘制的图形。

在onDraw（Canvas）中，首先绘制圆圈，然后使用PorterDuff.Mode.SRC_IN绘制带有绘画的图像，以便只显示圆圈区域。

我在Github

分享了完整的演示源代码

APK为here

自定义视图的源代码如下：

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();
    }
}

Answer 2

尝试将android插补器添加到xml中 - 它会产生淡入效果（图像会逐渐显示 - 无缩放）：

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

注意：您可以根据需要修改持续时间。

在代码中：

 // using fadein.xml in anim folder in resources
 final Animation animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fadein);
 // using currentImage as the image view
    currentImage.startAnimation(animationFadeIn);

如果你想要fadeout xml：

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

使视图逐渐显示

2 个答案: