动画脉动点

Question

我想添加一个具有振荡类型动画的动画点（如果这会产生任何影响，它实际上会绘制在图像顶​​部）。

这里是我的意思样本：

莫非这在某种程度上与两个图像来完成它们之间的动画？我不太清楚，所以一些示例代码会很好。 （或指向教程的链接）。

欢呼声，并提前致谢。

Answer 1

您是否在寻找一个Drawable Animation？看起来像那样会做你想要的。您可以使用RelativeLayout将其放置在其他视图的顶部。另外，如果您需要更复杂的动画，则可以使用SurfaceView并将画布绘制到链接上。

Answer 2

我不确定你的具体要求，但对我来说，它看起来像你需要像在圈子上方延伸'戒指'那样的水手。我试图使用自定义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(); 
     } 

请注意，它不是发行版本和它很可能可以在很多方面得到改善。

你也可以玩interpolators或创建你自己的，以期有预期的动画。

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