Android 基于OpenGL ES2.0 的CircleProgressBar

之前想在播放器上加一个那种卡顿的转转提示：

类似：

https://github.com/lsjwzh/MaterialLoadingProgressBar

这种效果的

由于当时没想到怎么在opengl es上实现，所以就没有做这个效果，后来有时间又去

研究了一下，好像这种效果会有一个加速减速的过程，我这里是匀速的，需要的话也可以再改改

下面上代码：

最主要的绘制代码是这个Ring

package com.example.zhongchangwen.openglescircleprogressbar;

import android.opengl.GLES20;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

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

public class Ring {
    private FloatBuffer vertexBuffer;

    private final String vertexShaderCode =
            "uniform mat4 uMVPMatrix;" +
                    "attribute vec4 vPosition;" +
                    "void main() {" +
                    "  gl_Position =  uMVPMatrix * vPosition;" +
                    "}";

    private final String fragmentShaderCode =
            "precision mediump float;" +
                    "uniform vec4 vColor;" +
                    "void main() {" +
                    "  gl_FragColor = vColor;" +
                    "}";
    private final int mProgram;

    private int mPositionHandle;
    private int mColorHandle;
    private int mMVPMatrixHandle;

    private int vertexCount = 360 * 2;
    private float radius = 1.0f;
    // Outer vertices of the circle
    private int outerVertexCount = vertexCount / 2 - 1;

    static final int COORDS_PER_VERTEX = 3;
    private float ringCoords[] = new float[vertexCount * COORDS_PER_VERTEX]; // (x,y,z) for each vertex
    private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex

    ByteBuffer bb = ByteBuffer.allocateDirect(ringCoords.length * 4);
    private float mProgressArc = 1 / 6.0f;
    private boolean positive = true;
    private float position = 0.0f;
    private int mRepeat = 0;//重复次数，六次一个周期
    private float mRadius = 0.5f;//半径 
    float color[] = {0.63671875f, 0.76953125f, 0.22265625f, 1.0f};

    public Ring() {

        bb.order(ByteOrder.nativeOrder());

        generateVertex(mProgressArc);

        // create empty OpenGL ES Program
        mProgram = Utils.initProgram(vertexShaderCode, fragmentShaderCode);
    }

    private void generateVertex(float progressArc) {
        float center_x = 0.0f;
        float center_y = 0.0f;
        int idx = 0;

        if (positive) {
            for (int i = 0; i < outerVertexCount; ++i) {
                float percent = (i / (float) (outerVertexCount - 1));
                float rad = (float) (percent * Math.PI * progressArc) + position;

                //Vertex position
                float outer_x = (center_x + radius * (float) Math.cos(rad)) * mRadius;
                float outer_y = (center_y + radius * (float) Math.sin(rad)) * mRadius;

                ringCoords[idx++] = outer_x;
                ringCoords[idx++] = outer_y;
                ringCoords[idx++] = 3.0f;

                ringCoords[idx++] = outer_x;
                ringCoords[idx++] = outer_y;
                ringCoords[idx++] = 5.0f;
            }
        } else {
            for (int i = 0; i < outerVertexCount; ++i) {
                float percent = (i / (float) (outerVertexCount - 1));
                float rad = (float) (percent * Math.PI * progressArc) + (11 / 6.0f - mProgressArc) * (float) Math.PI + position;

                //Vertex position
                float outer_x = (center_x + radius * (float) Math.cos(rad))*0.5f;
                float outer_y = (center_y + radius * (float) Math.sin(rad))*0.5f;

                ringCoords[idx++] = outer_x;
                ringCoords[idx++] = outer_y;
                ringCoords[idx++] = 3.0f;

                ringCoords[idx++] = outer_x;
                ringCoords[idx++] = outer_y;
                ringCoords[idx++] = 5.0f;
            }

        }

        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(ringCoords);
        vertexBuffer.position(0);

        if (positive) {
            mProgressArc += 0.01f;
        } else {
            mProgressArc -= 0.01f;
        }

        if (mProgressArc >= 11 / 6.0f) {
            positive = false;
        }
        if (mProgressArc <= 1 / 6.0f) {
            positive = true;
            mRepeat++;
            position = -1 / 3.0f * (float) Math.PI * mRepeat;
            if (mRepeat >= 6)
                mRepeat = 0;
        }
    }

    public void draw(float[] mvpMatrix) {
        // Add program to OpenGL ES environment
        GLES20.glUseProgram(mProgram);

        // get handle to vertex shader's vPosition member
        mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

        // Enable a handle to the triangle vertices
        GLES20.glEnableVertexAttribArray(mPositionHandle);

        //refresh the ring's state
        generateVertex(mProgressArc);

        // Prepare the triangle coordinate data
        GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
                GLES20.GL_FLOAT, false,
                vertexStride, vertexBuffer);

        // get handle to fragment shader's vColor member
        mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

        // Set color for drawing the triangle
        GLES20.glUniform4fv(mColorHandle, 1, color, 0);

        // get handle to shape's transformation matrix
        mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");

        // Pass the projection and view transformation to the shader
        GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0);

        // Draw the ring
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, vertexCount);

        // Disable vertex array
        GLES20.glDisableVertexAttribArray(mPositionHandle);
    }
}

主要就是计算好环上面的顶点，然后按照画三角形的方法绘制

原理不难，主要是重复对顶点的计算。

mProgressArc * PI 是环的弧度，这里取1/6*PI 到 11/6*PI

positive 表示绘制方向，true表示顺时针绘制，false表示逆时针绘制

然后：

在渲染类里面处理一下投影的效果：

public void onDrawFrame(GL10 unused){
        // Redraw background color
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

        // Set the camera position (View matrix)
        Matrix.setLookAtM(mViewMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);

        // Calculate the projection and view transformation
        Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);

        float[] scratch = new float[16];
        //set the animation cycle time to 1 second; 1000ms * 0.360 == 360 degree
        long time = SystemClock.uptimeMillis() % 1000L;
        //positive is anticlockwise; negative is clockwise
        float angle = -0.360f * ((int) time);

        Matrix.setRotateM(mRotationMatrix, 0, angle, 0, 0, -1.0f);
        Matrix.multiplyMM(scratch, 0, mMVPMatrix, 0, mRotationMatrix, 0);

        // Draw shape
        mRing.draw(scratch);
    }

mRing.draw(scratch);表示图像会随着时间而进行旋转


旋转的速度可以通过

long time = SystemClock.uptimeMillis() % 1000L;

float angle = -0.360f * ((int) time);

控制这个表示1秒旋转360度

long time = SystemClock.uptimeMillis() % 2000L;

float angle = -0.180f ((int)time);

表示两秒转360度

mRing.draw(mMVPMatrix);

表示不加旋转的原本动画

附上github地址：
https://github.com/george-cw/OpenGLESCircleProgressBar