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>

活动中：

    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不能达到相同的结果。这实际上是使用canvas的大致代码（从字面上看需要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();
    }

}
}}