Android如何实现围绕 ImageView 的脉动圆形动画

Question

我希望实现与此类似的动画:

https://dribbble.com/shots/1767235-Rizon-Location-animation

，并在中间的圆圈中显示 ImageView 。

我知道将使用比例动画，我在我的圆形 ImageView 上使用它:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="1"
    android:fromYScale="1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:toXScale="0.5"
    android:toYScale="0.5" />

这会导致图像跳动，但是如何像上面的动画一样显示和动画图像周围的环？任何提示都会有所帮助。

谢谢 !

Answer 1

覆盖 onDraw 方法并为您的按钮绘制第一个圆圈，创建一个 bool 变量来控制您的按钮何时会脉冲，何时不会。最后以 alpha 为背景绘制第二个圆圈。产生脉动效果:

 @Override
protected void onDraw(Canvas canvas) {

    int w = getMeasuredWidth();
    int h = getMeasuredHeight();
    mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mCirclePaint.setColor(mColor);
    mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mBackgroundPaint.setColor(Util.adjustAlpha(mColor, 0.4f));
    //Draw circle
    canvas.drawCircle(w/2, h/2, MIN_RADIUS_VALUE , mCirclePaint);        
    if (mAnimationOn) {
        if (mRadius >= MAX_RADIUS_VALUE)
            mPaintGoBack = true;
        else if(mRadius <= MIN_RADIUS_VALUE)
            mPaintGoBack = false;
        //Draw pulsating shadow
        canvas.drawCircle(w / 2, h / 2, mRadius, mBackgroundPaint);
        mRadius = mPaintGoBack ? (mRadius - 0.5f) : (mRadius + 0.5f);
        invalidate();
    }

    super.onDraw(canvas);
}
 public void animateButton(boolean animate){
    if (!animate)
        mRadius = MIN_RADIUS_VALUE;
    mAnimationOn = animate;
    invalidate();
}