android - アニメーションの脈動ドット

Question

振動タイプのアニメーションを持つアニメーション化されたドットを追加したい (違いがあれば、これは実際には画像の上に描画されます)。

ここに私が意味するもののサンプルがあります：

これは、2 つの画像とそれらの間のアニメーションでどうにかして行うことができますか? 私はそれについてあまり明確ではないので、いくつかのサンプルコードがいいでしょう。(またはチュートリアルへのリンク)。

乾杯と前もって感謝します。

Answer 1

あなたの正確な要件についてはわかりませんが、私にとっては、円の上に「リング」を拡張するようなものが必要なようです。すべての機能を「コンテナ」にカプセル化するために、カスタム ViewGroup を使用して実装しようとしました。手順は次のとおりです。

1) values/attrs.xml を追加します。

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <declare-styleable name="OscillatorAnimatedView">
        <attr name="centerImage" format="reference" />
        <attr name="oscillatorImage" format="reference" />
        <attr name="oscillatorInterval" format="integer" />
        <attr name="oscillatorMaxExtend" format="float" />
    </declare-styleable>
</resources>

2) You レイアウト ファイルにビューを追加します。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:custom="http://schemas.android.com/apk/res/com.alexstarc.tests"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <com.alexstarc.tests.views.OscillatorAnimatedView
            android:id="@+id/oscillator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            custom:centerImage="@drawable/center"
            custom:oscillatorImage="@drawable/circle" />
</RelativeLayout>

3) 中央と円の画像をドローアブルに追加します (以下はインターネットからのランダムな例です。透明な png にする必要があることに注意してください): drawable
/center drawable/circle

4) ビューを作成します (私の場合はcom.alexstarc.tests.views.OscillatorAnimatedView):

    package com.ruinalst.performance.tests.views;

    import android.animation.AnimatorSet;
    import android.animation.ObjectAnimator;
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.drawable.Drawable;
    import android.util.AttributeSet;
    import android.view.ViewGroup;
    import android.view.animation.BounceInterpolator;
    import android.widget.ImageView;
    import android.widget.RelativeLayout;
    import com.ruinalst.performance.tests.R;

    /**
     * Specific view to provide 'oscilllator' kind of animation using two input views
     */
    public final class OscillatorAnimatedView extends RelativeLayout {

        /* Internal constants, mostly for default values */
        /** default oscillator interval */
        private static final int DEFAULT_INTERVAL = 700;
        /** default oscillator extend */
        private  static final float DEFAULT_EXTEND = 1.5f;

        /** Image to be displayed at the center */
        private ImageView mCenterImage = null;
        /** Image to oscillate */
        private ImageView mOscillatorImage = null;
        /** Oscillator animation */
        private AnimatorSet mAnimatorSet = null;

        public OscillatorAnimatedView(final Context context, final AttributeSet attrs) {
            super(context, attrs);
            initAndCompose(attrs);
        }

        public OscillatorAnimatedView(final Context context, final AttributeSet attrs, final int defStyle) {
            super(context, attrs, defStyle);
            initAndCompose(attrs);
        }

        /**
         * Internal init function to init all additional data
         * and compose child for this ViewGroup
         *
         * @param attrs {@link AttributeSet} with data from xml attributes
         */
        private void initAndCompose(final AttributeSet attrs) {

            if (null == attrs) {
                throw new IllegalArgumentException("Attributes should be provided to this view," +
                        " at least centerImage and oscillatorImage should be specified");
            }

            final TypedArray a = getContext().obtainStyledAttributes(attrs,
                    R.styleable.OscillatorAnimatedView, 0, 0);
            final Drawable centerDrawable = a.getDrawable(R.styleable.OscillatorAnimatedView_centerImage);
            final Drawable oscillatorDrawable = a.getDrawable(R.styleable.OscillatorAnimatedView_oscillatorImage);

            if (null == centerDrawable || null == oscillatorDrawable) {
                throw new IllegalArgumentException("Attributes should be provided to this view," +
                        " at least centerImage and oscillatorImage should be specified");
            }

            final int oscillatorInterval = a.getInt(R.styleable.OscillatorAnimatedView_oscillatorInterval, DEFAULT_INTERVAL);
            final float maxOscillatorExtend = a.getFloat(R.styleable.OscillatorAnimatedView_oscillatorMaxExtend, DEFAULT_EXTEND);

            a.recycle();

            // Create child and add them into this view group
            mCenterImage = new ImageView(getContext());
            mCenterImage.setImageDrawable(centerDrawable);
            addInternalChild(mCenterImage);

            mOscillatorImage = new ImageView(getContext());
            mOscillatorImage.setImageDrawable(oscillatorDrawable);
            addInternalChild(mOscillatorImage);

            // Init animation
            mAnimatorSet = new AnimatorSet();

            mAnimatorSet.setDuration(oscillatorInterval);

            final ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(mOscillatorImage, "ScaleX", 1.0f, maxOscillatorExtend);

            scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE);
            scaleXAnimator.setRepeatMode(ObjectAnimator.INFINITE);

            final ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(mOscillatorImage, "ScaleY", 1.0f, maxOscillatorExtend);

            scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE);
            scaleYAnimator.setRepeatMode(ObjectAnimator.INFINITE);

            mAnimatorSet.playTogether(scaleXAnimator, scaleYAnimator);
            mAnimatorSet.setInterpolator(new BounceInterpolator());
        }

        /**
         * Internal helper to add child view to this ViewGroup.
         * Used currently only for two internal ImageViews
         *
         * @param child {@link ImageView} to be added
         */
        private void addInternalChild(final ImageView child) {
            final LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);

            params.addRule(CENTER_IN_PARENT, 1);
            addView(child, params);
        }

        /**
         * Starts animation for this view
         */
        public void start() {
            mAnimatorSet.start();
        }

        /**
         * Stops animation for this view
         */
        public void stop() {
            mAnimatorSet.end();
        }
    }

5) あなたのアクティビティでは、次のようにします。

        @Override
        protected void onResume() {
            super.onResume();

            mOscillatorView.start();
        }

        @Override
        protected void onPause() {
            super.onPause();

            mOscillatorView.stop();
        }

これはリリース版ではなく、おそらく多くの点で改善される可能性があることに注意してください。

アニメーションを期待するために、補間器で遊んだり、独自のものを作成したりすることもできます。

Answer 2

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

 @Override
protected void onDraw(Canvas canvas) {

    int w = getMeasuredWidth();
    int h = getMeasuredHeight();
    //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();
}

Answer 3

Drawable Animationをお探しですか? それはあなたが探していることをするようです。RelativeLayoutを使用して、他のビューの上に配置できます。

また、より複雑なアニメーションが必要な場合は、SurfaceViewを使用してキャンバスをリンクにペイントできます。