類似百度雲閃電傳輸的波紋效果 WaveView

  

這個是百度雲的效果

下面是我做的效果，不是很清楚，圖片選的不好，將就着看

我不說廢話了，其實實現很簡單，就是一個繼承了RelativeLayout 的自定義View:

先看佈局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:background="#ffffff"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/wave1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:background="@drawable/timeline_guid_circle3"
        />

    <ImageView
        android:id="@+id/wave2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:background="@drawable/timeline_guid_circle3"/>

    <ImageView
        android:id="@+id/wave3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:background="@drawable/timeline_guid_circle3" />

    <ImageView
        android:id="@+id/btn"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/close_hot_normal"
        android:layout_centerInParent="true"/>

</RelativeLayout>

再看看代碼，不要吐血，其實很簡單！！！

import android.content.Context;
import android.media.Image;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.ScaleAnimation;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;

/**
 * Created by deadline on 2015/2/3.
 */
public class WaveView extends RelativeLayout {

    private static final int SECOND_WAVE = 0x1;

    private static final int THIRD_WAVE = 0x2;

    private ImageView button;

    private ImageView wave1, wave2, wave3;

    private long GapTime = 300;

    private int AnimDuration = 1200;

    private int repeatCount = -1;

    private float fromScale = 0.0f, toScale = 3.0f;

    private float fromAlpha = 1.0f, toAlpha = 0.1f;

    private AnimationSet animationSet1, animationSet2, animationSet3;

    private WaveListener waveListener;

    public interface WaveListener{

        void onStart();

        void onStop();
    }


    public WaveView(Context context) {
        this(context, null);
    }

    public WaveView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initWaveView(context);

    }


    private void initWaveView(Context context){
        animationSet1 = getWaveAnimation();
        animationSet2 = getWaveAnimation();
        animationSet3 = getWaveAnimation();
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.wave_view_layout, this);

        wave1 = (ImageView)findViewById(R.id.wave1);
        wave2 = (ImageView)findViewById(R.id.wave2);
        wave3 = (ImageView)findViewById(R.id.wave3);
        button = (ImageView)findViewById(R.id.btn);
    }

    private Handler handler = new Handler()
    {
        @Override
        public void handleMessage(Message msg)
        {

            if (msg.what == SECOND_WAVE)
            {
                wave2.startAnimation(animationSet2);

            }else if(msg.what == THIRD_WAVE)
            {
                wave3.startAnimation(animationSet3);
            }
            super.handleMessage(msg);
        }
    };

    public void setWaveListener(WaveListener waveListener){
        if(waveListener != null) {
            this.waveListener = waveListener;
        }
    }

    public void setWaveImage(int resId){
        wave1.setBackgroundResource(resId);
        wave2.setBackgroundResource(resId);
        wave3.setBackgroundResource(resId);
    }

    public void setWaveViewImage(int resId){
        button.setImageResource(resId);
    }

    public void showWave() {
        if(waveListener != null){
            waveListener.onStart();
        }
        clearAnim();
        wave1.startAnimation(animationSet1);
        handler.sendEmptyMessageDelayed(SECOND_WAVE, GapTime);
        handler.sendEmptyMessageDelayed(THIRD_WAVE, 2*GapTime);
    }

    public void cancelWave()
    {
        if(waveListener != null)
        {
            waveListener.onStop();
        }
        clearAnim();
    }

    private void clearAnim()
    {
        wave1.clearAnimation();
        wave2.clearAnimation();
        wave3.clearAnimation();
    }

    public AnimationSet getWaveAnimation(){
        AnimationSet animationSet = new AnimationSet(true);
        Animation scaleAnim = new ScaleAnimation(fromScale, toScale, fromScale, toScale,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        Animation alphaAnim = new AlphaAnimation(fromAlpha, toAlpha);
        scaleAnim.setRepeatCount(repeatCount);
        alphaAnim.setRepeatCount(repeatCount);
        animationSet.addAnimation(scaleAnim);
        animationSet.addAnimation(alphaAnim);
        animationSet.setDuration(AnimDuration);
        return animationSet;

    }


    public int getAnimDuration() {
        return AnimDuration;
    }

    public void setAnimDuration(int animDuration) {
        if(animDuration>= 0) {
            AnimDuration = animDuration;
        }
    }

    public int getRepeatCount() {
        return repeatCount;
    }

    public void setRepeatCount(int repeatCount) {
        this.repeatCount = repeatCount;
    }

    public float getFromScale() {
        return fromScale;
    }

    public void setFromScale(float fromScale) {
        if(fromScale >= 0.0f) {
            this.fromScale = fromScale;
        }
    }

    public float getToScale() {
        return toScale;
    }

    public void setToScale(float toScale) {
        if(toScale >= 0.0f) {
            this.toScale = toScale;
        }
    }

    public float getFromAlpha() {
        return fromAlpha;
    }

    public void setFromAlpha(float fromAlpha) {
        if(fromAlpha >= 0.0f) {
            this.fromAlpha = fromAlpha;
        }
    }

    public float getToAlpha() {
        return toAlpha;
    }

    public void setToAlpha(float toAlpha) {
        if(toAlpha >= 0.0f){
            this.toAlpha = toAlpha;
        }
    }
}

不過有點問題，每次按Home之後再進入動畫就有點問題，不過可以在onResume();設置waveView.showWave();這個問題可以解決