1 前言

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

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

​ 读者如果对 OpenGL ES 不太熟悉,请回顾以下内容:

​ 本文完整代码资源见→基于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 中 标签下申请如下权限,并且需要在 “设置>应用管理>权限” 中允许权限。

<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 运行效果

​ 声明:本文转自【OpenGL ES】基于ValueAnimator的旋转、平移、缩放动效

【OpenGL ES】基于ValueAnimator的旋转、平移、缩放动效的更多相关文章

  1. OpenGL中旋转平移缩放等变换的顺序对模型的影响

    l 前提: 0x01. 假设绘制顶点的语句为Draw Array,变换的语句(旋转.平移.缩放)为M,而 M0; M1; M2; Draw Array; 则称对Array先进行M2再进行M1.M0 0 ...

  2. 【Android 应用开发】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解

    最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...

  3. OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解

    最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...

  4. Three.js三维模型几何体旋转、缩放和平移

    创建场景中的三维模型往往需要设置显示大小.位置.角度,three.js提供了一系列网格模型对象的几何变换方法,从WebGL的角度看,旋转.缩放.平移对应的都是模型变换矩阵,关于矩阵变换内容可以观看本人 ...

  5. Android OpenGL ES 开发(六): OpenGL ES 添加运动效果

    在屏幕上绘制图形只是OpenGL的相当基础的特点,你也可以用其他的Android图形框架类来实现这些,包括Canvas和Drawable对象.OpenGL ES为在三维空间中移动和变换提供了额外的功能 ...

  6. OpenGL绘制简单场景,实现旋转缩放平移和灯光效果

    本项目实现了用OpenGL绘制一个简单场景,包括正方体.球体和网格,实现了物体的旋转.缩放.平移和灯光效果.附有项目完整代码.有具体凝视.适合刚開始学习的人熟悉opengl使用. 开发情况 开发环境V ...

  7. OpenGL ES平移矩阵和旋转矩阵的左乘与右乘效果

    OpenGL ES平移矩阵和旋转矩阵的左乘与右乘 在OpenGL .OpenGL ES中矩阵起着举足轻重的作用,而矩阵之间的左乘与右乘在效果上是不同的. 一.先平移后旋转 场景效果:人绕树旋转. 原理 ...

  8. 【OpenGL(SharpGL)】支持任意相机可平移缩放的轨迹球实现

    [OpenGL(SharpGL)]支持任意相机可平移缩放的轨迹球 (本文PDF版在这里.) 在3D程序中,轨迹球(ArcBall)可以让你只用鼠标来控制模型(旋转),便于观察.在这里(http://w ...

  9. openGL点精灵PointSprite具体解释: 纹理映射,旋转,缩放,移动

    第一,什么是点精灵 openGL的图形由顶点构成,以后利用顶点进行纹理的映射.点精灵就是,一个顶点被当作一个精灵来处理.特别之处就是,一个顶点也可进行纹理贴出.比如,原来是个顶点构成的一个矩形,如今一 ...

  10. 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)

    在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...

随机推荐

  1. MyBatis——第一个程序

    MyBatis1:初识 MyBatis第一个程序 流程:搭建环境–>导入MyBatis–>编写代码–>测试 1.创建一张User表. 关键字id.username.pwd 2.导入相 ...

  2. IBM java的分析工具(ga和ha)学习和整理

    IBM java的分析工具(ga和ha)学习和整理 背景 前几天学习了整理了 jca 工具 今天继续学习一下 ga工具 ga 工具主要是分析gclog相关. 可以很直观的进行gclog的分析和展示. ...

  3. [转帖]mysql 里 CST 时区的坑

    mysql 里 CST 时区的坑 一.问题简述 mysql 里 CST 时区是个非常坑的概念,因为在 mysql 里CST既表示中国也表示美国的时区.但是在Jdk代码里,CST 这个字符串被理解为Ce ...

  4. [转帖]OS Watcher (OSW)系统性能监控软件

    https://www.anbob.com/archives/1143.html OS Watcher简称OSW(oswbb),用于收集并归档操作系统cpu,memery,disk io,networ ...

  5. [转帖]Linux:crontab要点整理(表达式,转义,权限管理,日志)

    https://www.jianshu.com/p/fd46652f247e 摘要:Linux,crontab整理crontab的使用,包括cron表达式,设置和删除任务,权限管理,查看日志 cron ...

  6. [转帖] 常见的Socket网络异常场景分析

    https://www.cnblogs.com/codelogs/p/16001770.html 原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介# 在目前微服务的 ...

  7. 简单的获取ESXi服务器上面开启了多少个vCPU的办法

    开启ssh 执行命令 esxcli vm process list |grep Config |cut -b 17- |xargs cat |grep numvcpus |cut -d " ...

  8. Mybatis 拦截器实现单数据源内多数据库切换 | 京东物流技术团队

    物流的分拣业务在某些分拣场地只有一个数据源,因为数据量比较大,将所有数据存在一张表内查询速度慢,也为了做不同设备数据的分库管理,便在这个数据源内创建了多个不同库名但表完全相同的数据库,如下图所示: 现 ...

  9. 使用 NuGet.Server 创建和部署 ASP.NET Web 应用程序搭建私有Nuget服务器

    使用 NuGet.Server 创建和部署 ASP.NET Web 应用程序搭建私有Nuget服务器 在Visual Studio中,选择"新建>文件>"Project ...

  10. win10家庭版禁用更新

    前言 2020年初因为疫情在家远程办公,而我老家没有电脑,先后向两位大学生借了两台电脑来办公,发现一个现象:他们的电脑系统都是家庭版,也就是刚买电脑时安装的win10家庭版.也问了其它几位计算机专业的 ...