【OpenGL ES】基于ValueAnimator的旋转、平移、缩放动效

1 前言

        ValueAnimator 基于 Choreographer 的 frame callback 机制，周期性（约16.7ms，与屏幕帧率相关）执行其 doAnimationFrame() 方法，回调监听器中相应方法，刷新 UI 实现动画效果。

        ValueAnimator 是 Android 系统提供的时钟回调类，可以为其提供插值器，并注册 AnimatorUpdateListener 监听器、AnimatorUpdateListener 监听器。当调用 ValueAnimator 的 start() 方法后，系统会周期性执行 AnimatorUpdateListener 中的 onAnimationUpdate() 方法，用户可以通过重写 onAnimationUpdate() 方法实现动画每一帧的刷新。

        读者如果对 OpenGL ES 不太熟悉，请回顾以下内容：

• 绘制三角形​​​​​​
• ​​​​​​绘制立方体
• MVP矩阵变换

• 透视变换原理

• 纹理贴图
• 正方形图片贴到圆形上

• 凸镜贴图

        本文完整代码资源见→基于ValueAnimator的旋转、平移、缩放动效

        项目目录如下： 

2 案例

        MainActivity.java

package com.zhyan8.anim.activity;

import android.animation.Animator;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import com.zhyan8.anim.R;
import com.zhyan8.anim.anim.MyAnimation;

public class MainActivity extends AppCompatActivity {
    MyAnimation mAnimation;
    ImageView mStarBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mStarBtn = findViewById(R.id.btn_star);
    }

    public void onClick(View view) {
        mAnimation = new MyAnimation(this);
        mAnimation.startAnimation(listener);
    }

    private Animator.AnimatorListener listener = new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            mStarBtn.setVisibility(View.INVISIBLE);
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            mStarBtn.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    };
}

        activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".activity.MainActivity">
    <ImageView
        android:id="@+id/btn_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@raw/star"
        android:onClick="onClick"/>
</FrameLayout>

        MyAnimation.java

package com.zhyan8.anim.anim;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.LinearInterpolator;
import android.widget.FrameLayout;
import com.zhyan8.anim.opengl.MyGLSurfaceView;
import com.zhyan8.anim.opengl.MyRender;

public class MyAnimation {
    private Context mContext;
    private ValueAnimator mValueAnimator;
    private WindowManager mWindowManager;
    private FrameLayout mRootView;
    private MyGLSurfaceView mAnimView;
    private WindowManager.LayoutParams mRootLayoutParams;
    private MyRender mRender;

    public MyAnimation(Context context) {
        mContext = context;
        mValueAnimator = ValueAnimator.ofFloat(0f, 1f);
        mValueAnimator.setInterpolator(new LinearInterpolator());
        mValueAnimator.addUpdateListener(mAnimatorUpdateListener);
        mValueAnimator.addListener(mAnimatorListener);
        mWindowManager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
        createView();
    }

    public void startAnimation(Animator.AnimatorListener listener) {
        mValueAnimator.addListener(listener);
        mValueAnimator.setDuration(2000);
        mValueAnimator.start();
    }

    private void createView() {
        mRootView = new FrameLayout(mContext);
        mRootView.setVisibility(View.INVISIBLE);
        getRootLayoutParams();
        getAnimView();
        mWindowManager.addView(mRootView, mRootLayoutParams);
    }

    private void getRootLayoutParams() {
        mRootLayoutParams = new WindowManager.LayoutParams();
        mRootLayoutParams.x = 0;
        mRootLayoutParams.y = 0;
        mRootLayoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;
        mRootLayoutParams.height = WindowManager.LayoutParams.MATCH_PARENT;
        // 需要申请 android.permission.SYSTEM_ALERT_WINDOW 权限，并在设置中允许权限
        mRootLayoutParams.type = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
    }

    private void getAnimView() {
        mAnimView = new MyGLSurfaceView(mContext);
        mRender = new MyRender(mContext.getResources());
        mAnimView.init(mRender);
        mAnimView.setVisibility(View.INVISIBLE);
        mRootView.addView(mAnimView);
    }

    private ValueAnimator.AnimatorUpdateListener mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float fraction = mValueAnimator.getAnimatedFraction();
            mRender.setScale(1 - fraction);
            mAnimView.requestRender();
        }
    };

    private Animator.AnimatorListener mAnimatorListener = new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            mRootView.setVisibility(View.VISIBLE);
            mAnimView.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            mRootView.removeView(mAnimView);
            mWindowManager.removeView(mRootView);
            mAnimView = null;
            mRootView = null;
        }

        @Override
        public void onAnimationCancel(Animator animation) {}

        @Override
        public void onAnimationRepeat(Animator animation) {}
    };
}

        注意：由于创建的 mRootView 的 type 为 TYPE_APPLICATION_OVERLAY，需要在 AndroidManifest.xml 中 <manifest> 标签下申请如下权限，并且需要在 “设置>应用管理>权限” 中允许权限。 

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

        MyGLSurfaceView.java

package com.zhyan8.anim.opengl;

import android.content.Context;
import android.graphics.PixelFormat;
import android.opengl.GLSurfaceView;
import android.util.AttributeSet;

public class MyGLSurfaceView extends GLSurfaceView {
    public MyGLSurfaceView(Context context) {
        super(context);
        setEGLContextClientVersion(3);
    }

    public MyGLSurfaceView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setEGLContextClientVersion(3);
    }

    public void init(MyRender render) {
        setEGLConfigChooser(8, 8, 8, 8, 16, 0);
        getHolder().setFormat(PixelFormat.TRANSLUCENT);
        setZOrderOnTop(true);
        setRenderer(render);
        setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    }
}

        MyRender.java

package com.zhyan8.anim.opengl;

import android.content.res.Resources;
import android.opengl.GLES30;
import android.opengl.GLSurfaceView;
import com.zhyan8.anim.model.Model;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

public class MyRender implements GLSurfaceView.Renderer {
    private Model mModel;

    public MyRender(Resources resources) {
        mModel = new Model(resources);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig eglConfig) {
        //设置背景颜色
        GLES30.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
        //启动深度测试
        gl.glEnable(GLES30.GL_DEPTH_TEST);
        //创建程序id
        mModel.onModelCreate();
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        //设置视图窗口
        GLES30.glViewport(0, 0, width, height);
        mModel.onModelChange(width, height);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        //将颜色缓冲区设置为预设的颜色
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT | GLES30.GL_DEPTH_BUFFER_BIT);
        //启用顶点的数组句柄
        GLES30.glEnableVertexAttribArray(0);
        GLES30.glEnableVertexAttribArray(1);
        //绘制模型
        mModel.onModelDraw();
        //禁止顶点数组句柄
        GLES30.glDisableVertexAttribArray(0);
        GLES30.glDisableVertexAttribArray(1);
    }

    public void setScale(float scale) {
        mModel.setScale(scale);
    }
}

        Model.java

package com.zhyan8.anim.model;

import android.content.res.Resources;
import android.graphics.Point;
import android.opengl.GLES30;
import com.zhyan8.anim.R;
import com.zhyan8.anim.utils.ArraysUtils;
import com.zhyan8.anim.utils.ShaderUtils;
import com.zhyan8.anim.utils.TextureUtils;
import java.nio.FloatBuffer;

public class Model {
    private static final int TEXTURE_DIMENSION = 2; // 纹理坐标维度
    private static final int VERTEX_DIMENSION = 3; // 顶点坐标维度
    private Resources mResources;
    private MyTransform mTransform;
    private FloatBuffer mVertexBuffer;
    private FloatBuffer mTexturesBuffer;
    private int mTextureId;
    private int mProgramId;

    public Model(Resources resources) {
        mResources = resources;
        mTransform = new MyTransform();
    }

    // 模型创建
    public void onModelCreate() {
        mProgramId = ShaderUtils.createProgram(mResources, R.raw.vertex_shader, R.raw.fragment_shader);
        mTextureId = TextureUtils.loadTexture(mResources, R.raw.star);
        mTransform.onTransformCreate(mProgramId);
        getFloatBuffer();
    }

    // 模型参数变化
    public void onModelChange(int width, int height) {
        mTransform.onTransformChange(width, height);
    }

    // 模型绘制
    public void onModelDraw() {
        GLES30.glUseProgram(mProgramId);
        mTransform.onTransformExecute();
        GLES30.glVertexAttribPointer(0, VERTEX_DIMENSION, GLES30.GL_FLOAT, false, 0, mVertexBuffer);
        GLES30.glVertexAttribPointer(1, TEXTURE_DIMENSION, GLES30.GL_FLOAT, false, 0, mTexturesBuffer);
        //激活纹理
        GLES30.glActiveTexture(GLES30.GL_TEXTURE);
        //绑定纹理
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, mTextureId);
        //绘制贴图
        GLES30.glDrawArrays(GLES30.GL_TRIANGLE_FAN, 0, 4);
    }

    // 设置模型缩放比
    public void setScale(float scale) {
        mTransform.setScale(scale);
    }

    private float[] mVertex = new float[] {
            1f, 1f, 0f,     //V0
            -1f, 1f, 0f,    //V1
            -1f, -1f, 0f,   //V2
            1f, -1f, 0f     //V3
    };
    private float[] mTexture = new float[] {
            1f, 0f,     //V0
            0f, 0f,     //V1
            0f, 1.0f,   //V2
            1f, 1.0f    //V3
    };

    private void getFloatBuffer() {
        mVertexBuffer = ArraysUtils.getFloatBuffer(mVertex);
        mTexturesBuffer = ArraysUtils.getFloatBuffer(mTexture);
    }
}

        MyTransform.java

package com.zhyan8.anim.model;

import android.opengl.GLES30;
import android.opengl.Matrix;

public class MyTransform {
    private int mProgramId;
    private int mMvpMatrixHandle;
    private float[] mModelMatrix;
    private float[] mViewMatrix;
    private float[] mProjectionMatrix;
    private float[] mMvpMatrix;
    private float mRatio;
    private float mScale = 1f;
    private float mRotate = 0f;
    private float[] mTranslate = new float[] {0f, 0f, 0f};
    private float mTranslateAngle = 0;

    // 变换创建
    public void onTransformCreate(int programId) {
        mProgramId = programId;
        mMvpMatrixHandle = GLES30.glGetUniformLocation(mProgramId, "mvpMatrix");
        mViewMatrix = getIdentityMatrix(16, 0);
        mMvpMatrix = getIdentityMatrix(16, 0);
        Matrix.setLookAtM(mViewMatrix, 0, 0, 0, 6.4f, 0, 0, 0, 0, 1, 0);
    }

    // 变换参数变换
    public void onTransformChange(int width, int height) {
        mRatio = 1.0f * width / height;
        mProjectionMatrix = getIdentityMatrix(16, 0);
        Matrix.frustumM(mProjectionMatrix, 0, -mRatio, mRatio, -1, 1, 3, 20);
    }

    // 变换执行
    public void onTransformExecute() {
        setRotate();
        setTranslate();
        mModelMatrix = getIdentityMatrix(16, 0);
        Matrix.scaleM(mModelMatrix, 0, mScale, mScale, mScale);
        Matrix.translateM(mModelMatrix, 0, mTranslate[0], mTranslate[1], mTranslate[2]);
        Matrix.rotateM(mModelMatrix, 0, mRotate, 0, 0, 1);
        //计算MVP变换矩阵: mvpMatrix = projectionMatrix * viewMatrix * modelMatrix
        float[] tempMatrix = new float[16];
        Matrix.multiplyMM(tempMatrix, 0, mViewMatrix, 0, mModelMatrix, 0);
        Matrix.multiplyMM(mMvpMatrix, 0, mProjectionMatrix, 0, tempMatrix, 0);
        GLES30.glUniformMatrix4fv(mMvpMatrixHandle, 1, false, mMvpMatrix, 0);
    }

    // 设置模型缩放比
    public void setScale(float scale) {
        mScale = scale;
    }

    // 设置模型旋转比
    private void setRotate() {
        mRotate = (mRotate + 10f) % 360;
    }

    // 设置模型平移
    private void setTranslate() {
        mTranslateAngle = (mTranslateAngle + 0.2f) % 360;
        mTranslate[0] = (float) (Math.cos(mTranslateAngle));
        mTranslate[1] = (float) (Math.sin(mTranslateAngle));
    }

    private float[] getIdentityMatrix(int size, int offset) {
        float[] matrix = new float[size];
        Matrix.setIdentityM(matrix, offset);
        return matrix;
    }
}

        ShaderUtils.java

package com.zhyan8.anim.utils;

import android.content.res.Resources;
import android.opengl.GLES30;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;

public class ShaderUtils {
    //创建程序id
    public static int createProgram(Resources resources, int vertexShaderResId, int fragmentShaderResId) {
        final int vertexShaderId = compileShader(resources, GLES30.GL_VERTEX_SHADER, vertexShaderResId);
        final int fragmentShaderId = compileShader(resources, GLES30.GL_FRAGMENT_SHADER, fragmentShaderResId);
        return linkProgram(vertexShaderId, fragmentShaderId);
    }

    //通过外部资源编译着色器
    private static int compileShader(Resources resources, int type, int shaderId){
        String shaderCode = readShaderFromResource(resources, shaderId);
        return compileShader(type, shaderCode);
    }

    //通过代码片段编译着色器
    private static int compileShader(int type, String shaderCode){
        int shader = GLES30.glCreateShader(type);
        GLES30.glShaderSource(shader, shaderCode);
        GLES30.glCompileShader(shader);
        return shader;
    }

    //链接到着色器
    private static int linkProgram(int vertexShaderId, int fragmentShaderId) {
        final int programId = GLES30.glCreateProgram();
        //将顶点着色器加入到程序
        GLES30.glAttachShader(programId, vertexShaderId);
        //将片元着色器加入到程序
        GLES30.glAttachShader(programId, fragmentShaderId);
        //链接着色器程序
        GLES30.glLinkProgram(programId);
        return programId;
    }

    //从shader文件读出字符串
    private static String readShaderFromResource(Resources resources, int shaderId) {
        InputStream is = resources.openRawResource(shaderId);
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line;
        StringBuilder sb = new StringBuilder();
        try {
            while ((line = br.readLine()) != null) {
                sb.append(line);
                sb.append("\n");
            }
            br.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return sb.toString();
    }
}

        TextureUtils.java

package com.zhyan8.anim.utils;

import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.opengl.GLES30;
import android.opengl.GLUtils;

public class TextureUtils {
    //加载纹理贴图
    public static int loadTexture(Resources resources, int resourceId) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inScaled = false;
        Bitmap bitmap = BitmapFactory.decodeResource(resources, resourceId, options);
        final int[] textureIds = new int[1];
        // 生成纹理id
        GLES30.glGenTextures(1, textureIds, 0);
        // 绑定纹理到OpenGL
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureIds[0]);
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_LINEAR_MIPMAP_LINEAR);
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR);
        // 加载bitmap到纹理中
        GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmap, 0);
        // 生成MIP贴图
        GLES30.glGenerateMipmap(GLES30.GL_TEXTURE_2D);
        // 取消绑定纹理
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0);
        return textureIds[0];
    }
}

        ArraysUtils.java

package com.zhyan8.anim.utils;

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

public class ArraysUtils {
    public static FloatBuffer getFloatBuffer(float[] floatArr) {
        FloatBuffer fb = ByteBuffer.allocateDirect(floatArr.length * Float.BYTES)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer();
        fb.put(floatArr);
        fb.position(0);
        return fb;
    }
}

        vertex_shader.glsl

#version 300 es
layout (location = 0) in vec4 vPosition;
layout (location = 1) in vec2 aTextureCoord;
uniform mat4 mvpMatrix;
out vec2 vTexCoord;
void main() {
     gl_Position  = mvpMatrix * vPosition;
     vTexCoord = aTextureCoord;
}

        fragment_shader.glsl

#version 300 es
precision mediump float;
uniform sampler2D uTextureUnit;
in vec2 vTexCoord;
out vec4 fragColor;
void main() {
     fragColor = texture(uTextureUnit,vTexCoord);
}

3 运行效果