Android鬼點子 又來了一個LoadingBar

設計師在外國的一個網站上挑了一個Loading的效果圖，嘗試實現之後，雖然和原圖有點不太一樣，但是效果還是不錯的。難點就是粘連效果的實現，貝塞爾曲線的點點們簡直要把我折磨死了。 先上效果圖：

然後是原始碼，就是一個簡單VIew，可以直接放在xml中使用。

package top.greendami.greendami;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by GreendaMi on 2017/3/17.
 */

public class PPView extends View {

    String TAG = "PPView";
    //動畫開關
    boolean isLoading = true;
    Context mContext;

    private int mWidth = 100;
    private int mheight = 100;

    public int mColor;
    public Paint mPaint = new Paint();

    float time = 0;

    //小球與中間打球的最遠距離
    float distance = 100;

    public PPView(Context context) {
        super(context);
        mContext = context;
    }

    public PPView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mColor = context.getResources().getColor(R.color.colorPrimary);
        init();
    }

    private void init() {
        mPaint.setAntiAlias(true);
        mPaint.setColor(mColor);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        //寬度至少是高度的4倍
        if (widthSpecSize < 4 * heightSpecSize) {
            widthSpecSize = 4 * heightSpecSize;
        }

        mWidth = widthSpecSize;
        mheight = heightSpecSize;

        distance = 1.2f * mheight;
        setMeasuredDimension(widthSpecSize, heightSpecSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isLoading) {

            //大圓半徑
            float bigR = mheight * 0.32f + mheight * 0.03f * Math.abs((float) Math.sin(Math.toRadians(time)));
            float smallR = mheight * 0.22f + mheight * 0.03f * Math.abs((float) Math.cos(Math.toRadians(time)));
            float bigx = (getWidth()) / 2;
            //畫中間大圓
            canvas.drawCircle(bigx, mheight / 2, bigR, mPaint);

            float smalx = getSmallCenterX();

            //畫小圓
            canvas.drawCircle(smalx, mheight / 2, smallR, mPaint);

            //畫連結

            //小球在右側
            if (smalx > bigx) {

                Path path = new Path();
                //上面的貝塞爾曲線的第一個點，在大圓身上
                float x1 = bigx + bigR * (float) Math.cos(Math.toRadians(time));
                float y1 = mheight / 2 - bigR * (float) Math.sin(Math.toRadians(time));
                if (y1 > mheight / 2 - smallR) {
                    y1 = mheight / 2 - smallR;
                    x1 = bigx + (float) (Math.sqrt(bigR * bigR - smallR * smallR));
                }
                //上面的貝塞爾曲線的第三個點，在小圓身上
                float x2 = smalx - smallR * (float) Math.cos(Math.toRadians(time));
                float y2 = mheight / 2 - smallR * (float) Math.sin(Math.toRadians(time));
                if (y2 > mheight / 2 - smallR * 0.8) {
                    y2 = mheight / 2 - smallR * 0.8f;
                    x2 = smalx - smallR * (float) (Math.sqrt(1-0.64f));
                }
                //下面的貝塞爾曲線的第三個點，在小圓身上
                float x3 = smalx - smallR * (float) Math.cos(Math.toRadians(time));
                float y3 = mheight / 2 + smallR * (float) Math.sin(Math.toRadians(time));
                if (y3 < mheight / 2 + smallR * 0.8) {
                    y3 = mheight / 2 + smallR * 0.8f;
                    x3 = smalx - smallR * (float) (Math.sqrt(1-0.64f));
                }
                //下面的貝塞爾曲線的第一個點，在大圓身上
                float x4 = bigx + bigR * (float) Math.cos(Math.toRadians(time));
                float y4 = mheight / 2 + bigR * (float) Math.sin(Math.toRadians(time));
                if (y4 < mheight / 2 + smallR) {
                    y4 = mheight / 2 + smallR;
                    x4 = bigx + (float) (Math.sqrt(bigR * bigR - smallR * smallR));
                }

                path.moveTo(x1, y1);

                path.quadTo((bigx + smalx) / 2, mheight / 2, x2, y2);
                // 繪製貝賽爾曲線（Path）

                path.lineTo(x3, y3);

                path.quadTo((bigx + smalx) / 2, mheight / 2, x4, y4);
                canvas.drawPath(path, mPaint);
            }

            //小球在左側
            if (smalx < bigx) {
                Path path = new Path();
                float x1 = bigx + bigR * (float) Math.cos(Math.toRadians(time));
                float y1 = mheight / 2 - bigR * (float) Math.sin(Math.toRadians(time));
                if (y1 > mheight / 2 - smallR) {
                    y1 = mheight / 2 - smallR;
                    x1 = bigx - (float) (Math.sqrt(bigR * bigR - smallR * smallR));
                }

                float x2 = smalx - smallR * (float) Math.cos(Math.toRadians(time));
                float y2 = mheight / 2 - smallR * (float) Math.sin(Math.toRadians(time));
                if (y2 > mheight / 2 - smallR * 0.8) {
                    y2 = mheight / 2 - smallR * 0.8f;
                    x2 = smalx + smallR * (float) (Math.sqrt(1-0.64f));
                }

                float x3 = smalx - smallR * (float) Math.cos(Math.toRadians(time));
                float y3 = mheight / 2 + smallR * (float) Math.sin(Math.toRadians(time));
                if (y3 < mheight / 2 + smallR * 0.8) {
                    y3 = mheight / 2 + smallR * 0.8f;
                    x3 = smalx + smallR * (float) (Math.sqrt(1-0.64f));
                }
                float x4 = bigx + bigR * (float) Math.cos(Math.toRadians(time));
                float y4 = mheight / 2 + bigR * (float) Math.sin(Math.toRadians(time));
                if (y4 < mheight / 2 + smallR) {
                    y4 = mheight / 2 + smallR;
                    x4 = bigx - (float) (Math.sqrt(bigR * bigR - smallR * smallR));
                }

                path.moveTo(x1, y1);

                path.quadTo((bigx + smalx) / 2, mheight / 2, x2, y2);
                // 繪製貝賽爾曲線（Path）

                path.lineTo(x3, y3);

                path.quadTo((bigx + smalx) / 2, mheight / 2, x4, y4);
                canvas.drawPath(path, mPaint);
            }

            postInvalidate();
        }
    }

    //計算小球的X座標
    private float getSmallCenterX() {
        //此處控制速度
        time = time + 2.5f;
        return mWidth / 2 + distance * (float) Math.cos(Math.toRadians(time));
    }
}
複製程式碼

“精心”畫了一張圖，對程式碼做了說明。

在程式碼中使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context="top.greendami.greendami.MainActivity">

    <top.greendami.greendami.PPView
        android:layout_centerInParent="true"
        android:layout_width="400dp"
        android:layout_height="80dp" />
</RelativeLayout>
複製程式碼