android - 动画脉动点

Question

我想添加一个具有振荡类型动画的动画点（如果这有什么不同，这实际上将绘制在图像之上）。

这是我的意思的一个示例：

这可以通过两个图像和它们之间的动画以某种方式完成吗？我不太清楚，所以一些示例代码会很好。（或教程链接）。

提前欢呼和感谢。

Answer 1

我不确定您的确切要求，但对我来说，您似乎需要像在圆圈上方扩展“环”一样。我尝试使用自定义 ViewGroup 来实现它，以便将所有功能封装在某个“容器”中。步骤如下：

1）添加值/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）将视图添加到您的布局文件：

<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）将中心和圆的图像添加到您的drawables（以下只是来自互联网的随机示例，注意它应该是透明的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

您在寻找可绘制动画吗？似乎这会做你正在寻找的东西。您可以使用RelativeLayout将其放置在其他视图之上。

此外，如果您需要更复杂的动画，您可以使用SurfaceView并将画布绘制到您的链接。

Answer 3

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

 @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();
}