製作水波載入動畫

標籤：水波載入動畫   android   

本來想寫寫有點意思的東西的，哈哈，上篇文章說的，以後再寫吧。今天先介紹一下一個水波載入動畫，如下：

做的比較簡單，真機效果比這個好很多，這個做的gif，有點蛋疼。

說說思路吧：

1. 首先畫正弦曲線，這裡取的是正弦周期的前3/4個周期，這樣看起來比其他的周期變化很好點；

2. 畫了正弦曲線以後，就要讓正弦曲線動起來，怎麼動起來？乍一看覺得很困難的樣子，其實我們想想移動正弦曲線，不過是某個位置的Y軸值變化了，那麼我們只要給sin(x)中添加一個變數就行，即sin(x + offset)，offset的值按時間規律來變化，那麼最後表現出來的效果就有移動的感覺。

3. 關於正弦曲線振幅不能設定的太高，因為我們的螢幕本來就很小，如果振幅很大就表現的很不真實，我這裡取的是30，看起來效果還不錯。

4. 最後就是y軸方向的改變了。要不停的提升，這裡寫死了，如果想用，就直接寫個方法，去設定就行，比如你要設定百分比之類的。

最後上代碼：

package com.zdl.wavedemo;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.View;/** * Created by zhoudailiang on 2015/7/14. */public class WaveView extends View {    private Paint paint;    private Path mPath;    private float offset = 0.0f; // 控制正弦曲線的變化    private MyThread thread;    private final float amplidute = 30; // 振幅    private float gradualY; // Y方向的漸層量    private float gradualX; // X方向的漸層量    private boolean isMoving = true; // 可以移動    public WaveView(Context context) {        super(context);        init();    }    public WaveView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    private void init() {        // 初始化畫筆        paint = new Paint();        paint.setAntiAlias(true);        paint.setColor(Color.BLUE);        paint.setStrokeWidth(2);        // 初始設定變數        gradualX = 0.02f;        // 初始化路徑        mPath = new Path();        // 初始化線程        thread = new MyThread();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        gradualY = getMeasuredHeight();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        int width = getMeasuredWidth();        int height = getMeasuredHeight();        mPath.reset();        for (float i = 0; i < width; i += 0.5) {            float tmp = (float) (1.5 * Math.PI * i / width);            float y = amplidute * (float)Math.sin(tmp + offset) + gradualY;            if (i == 0) {                mPath.moveTo(0f, y);            } else {                mPath.lineTo(i, y);            }        }        mPath.lineTo(width, height);        mPath.lineTo(0, height);        mPath.close();        canvas.drawPath(mPath, paint);        // 啟動線程開始更新        if (!thread.isAlive() && isMoving) {            thread.start();        }    }    class MyThread extends Thread {        public void run() {            while (isMoving) {                offset =  offset + gradualX > 2 * Math.PI ? 0 : offset + gradualX;                gradualY -= 0.5;                if (gradualY < -amplidute) {                    isMoving = false;                    break;                }                try {                    Thread.sleep(10);                } catch (InterruptedException e) {                    e.printStackTrace();                }                postInvalidate();            }        }    }}

代碼如上，很簡單。其實這裡還可以通過另一種方式實現，下篇文章進行介紹。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

製作水波載入動畫