Android中的Ring Glow动画

Question

我试图从Android中的iOS应用重现以下动画。而且我被点燃了

https://raw.githubusercontent.com/AndreiD/Kraken/master/ring_glow_animation.gif

如果有人知道如何创建它们将深表感激。别担心中心的标志，只是那些环形脉动。 （一次可能3次，短暂休息，重复）

这是一个可能的解决方案，但它非常难看，我确信可以做得更好

3个图像视图一个在彼此顶部

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


  <ImageView
      android:id="@+id/imageView_circle1"
      android:layout_width="20dp"
      android:layout_height="20dp"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      app:srcCompat="@drawable/circle"
      />

  <ImageView
      android:id="@+id/imageView_circle2"
      android:layout_width="20dp"
      android:layout_height="20dp"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      app:srcCompat="@drawable/circle"
      />

  <ImageView
      android:id="@+id/imageView_circle3"
      android:layout_width="20dp"
      android:layout_height="20dp"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      app:srcCompat="@drawable/circle"
      />


  <ImageView
      android:id="@+id/imageView_logo"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:scaleType="fitCenter"

      app:srcCompat="@drawable/logo"
      />

</RelativeLayout>

一个可绘制的circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

  <solid android:color="#DDDDDD"/>

</shape>

动画zoom_and_fade.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"  android:fillAfter="false">


  <alpha
      android:duration="3500"
      android:fromAlpha="1.0"
      android:toAlpha="0.0" />


  <scale
      android:duration="3500"
      android:fromXScale="0"
      android:fromYScale="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:toXScale="50"
      android:toYScale="50" />

</set>

on Activity：

    imageView_circle1 = (ImageView) findViewById(R.id.imageView_circle1);
    imageView_circle2 = (ImageView) findViewById(R.id.imageView_circle2);
    imageView_circle3 = (ImageView) findViewById(R.id.imageView_circle3);

    anim1 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
    anim2 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
    anim3 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
    anim2.setStartOffset(800);
    anim3.setStartOffset(1600);

    imageView_circle1.startAnimation(anim1);
    imageView_circle2.startAnimation(anim2);
    imageView_circle3.startAnimation(anim3);

    anim2.setAnimationListener(new Animation.AnimationListener() {
      @Override public void onAnimationStart(Animation animation) {

      }

      @Override public void onAnimationEnd(Animation animation) {

        imageView_circle1.startAnimation(anim1);
        imageView_circle2.startAnimation(anim2);
        imageView_circle3.startAnimation(anim3);
      }

      @Override public void onAnimationRepeat(Animation animation) {

      }
    });

Answer 1

我认为只有XML才能达到相同的效果。 这是使用画布的粗略代码（字面上5分钟）。但我认为通过一些小的改动你可以得到非常好的动画。 看看视频。 https://www.youtube.com/watch?v=378Jjc4amD8。 如果你愿意，我会改进。

public class CircleAnimationView extends View {

private Paint[] paints = new Paint[3];
private int[] colors = new int[3];

private float[] circleRadius = new float[3];

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

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

private void init() {

    colors[0] = ContextCompat.getColor(getContext(), R.color.gray1);
    colors[1] = ContextCompat.getColor(getContext(), R.color.gray2);
    colors[2] = ContextCompat.getColor(getContext(), R.color.gray3);

    for (int i = 0; i < paints.length; i++) {
        paints[i] = new Paint();
        paints[i].setAntiAlias(true);
        paints[i].setStyle(Paint.Style.FILL);
        paints[i].setColor(colors[i]);
    }


}

public void startCircleAnimation() {
    CircleRadiusAnimation animation = new CircleRadiusAnimation();
    animation.setDuration(1500);
    animation.setRepeatCount(Animation.INFINITE);
    startAnimation(animation);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[0], paints[0]);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[1], paints[1]);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[2], paints[2]);
}

private class CircleRadiusAnimation extends Animation {

    public CircleRadiusAnimation() {
        setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                reset();
            }
        });
    }

    public void reset() {
        circleRadius[0] = 0;
        circleRadius[1] = 0;
        circleRadius[2] = 0;
        CircleAnimationView.this.requestLayout();
        CircleAnimationView.this.invalidate();
    }


    @Override
    protected void applyTransformation(float interpolatedTime, Transformation transformation) {
        circleRadius[0] += 10;

        if (interpolatedTime > 0.3) {
            circleRadius[1] += 10;
            Log.d("animate", "2nd circle");
        }

        if (interpolatedTime > 0.6) {
            circleRadius[2] += 10;
            Log.d("animate", "3nd circle");
        }

        CircleAnimationView.this.requestLayout();
        CircleAnimationView.this.invalidate();
    }

}
}}