android - Android 中的环形发光动画

Question

我正在尝试重现 this animation来自 Android 中的 iOS 应用程序。我被困住了

如果有人知道如何创建它们，将不胜感激。不要介意中间的 Logo ，只要那些环在跳动即可。 (一次可能3个，短暂休息，重复)

这是一个可能的解决方案，但它很丑陋，我相信可以做出更好的东西

3 个 ImageView ，一个在彼此之上

<?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>

关于 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 无法获得相同的结果。 这是使用 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();
    }

}
}}