4

私はこれに似たアニメーションを実現しようとしています:

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

これにより画像が脈動しますが、上記のアニメーションのように画像の周りのリングを表示してアニメーション化するにはどうすればよいですか? どんなヒントも役に立ちます。

ありがとう ！

4

1 に答える 1

1

onDraw メソッドをオーバーライドし、ボタンの最初の円を描画して、ボタンがパルスするタイミングとパルスしないタイミングを制御するブール変数を作成します。最後に、背景としてアルファを使用して 2 番目の円を描画します。脈動効果を作る:

 @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();
}
于 2016-05-26T16:04:43.500 に答える