如何在Android中实现围绕图像视图的脉动圆形动画

Question

我希望实现类似于这个的动画效果：

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

并且在圆形中间有一张图片。

我知道需要使用缩放动画，在我的图片视图上我正在使用它：

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

这会导致图像脉动，但如何显示和动画化图像周围的环（类似上面的动画）？有任何提示将会很有帮助。

谢谢！

- Shivam Bhalla

Answer 1

重写onDraw方法，为您的按钮绘制第一个圆形，并创建一个布尔变量来控制您的按钮何时脉动以及何时不脉动。最后，使用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();
}

- Francisco Durdin Garcia

---

在 Util.adjustAlpha(mColor, 0.4f) 中你做了什么？ - esQmo_