Android 图片转场和轮播特效,你想要的都在这了

使用 OpenGL 做图像的转场作用或许图片轮播器,可以完结许多令人冷艳的作用。

Android 图片转场和轮播特效,你想要的都在这了

GLTransitions

gallery.gif

了解的 OpenGL 开发的朋友现已非常了解 GLTransitions 项目,该项目首要用来搜集各种 GL 转场特效及其 GLSL 完结代码,开发者可以很便当地移植到自己的项目中。

GLTransitions 项目网站地址:
gl-transitions.com/gallery

Android 图片转场和轮播特效,你想要的都在这了

GLTransitions 项目现已有挨近 100 种转场特效,可以非常便当地运用在视频处理中,**许多转场特效包含了混合、边际检测、腐蚀胀大等常见的图像处理方法,由易到难。 **

对于想学习 GLSL 的同学,既能快速上手,又能学习到一些高阶图像处理方法 GLSL 完结,强烈推荐。

Android 图片转场和轮播特效,你想要的都在这了

别的 GLTransitions 也支撑 GLSL 脚本在线修改、实时运行,非常便当学习和实践。

Android OpenGL 怎样移植转场特效

Android 图片转场和轮播特效,你想要的都在这了Android 图片转场和轮播特效,你想要的都在这了Android 图片转场和轮播特效,你想要的都在这了

由于 GLSL 脚本基本上是通用的,所以 GLTransitions 特效可以很便当地移植到各个渠道,本文以 GLTransitions 的 HelloWorld 项目来介绍下特效移植需求注意的几个点。

GLTransitions 的 HelloWorld 项目是一个混合突变的特效:

// transition of a simple fade.
vec4 transition (vec2 uv) {
return mix(
getFromColor(uv),
getToColor(uv),
progress
);
}

transition 是转场函数,功用类似于纹理采样函数,依据纹理坐标 uv 输出 rgba ,getFromColor(uv) 表明对源纹理进行采样,getToColor(uv) 表明对方针纹理进行采样,输出 rgba ,progress 是一个 0.0~1.0 数值之间的突变量,mix 是 glsl 内置混合函数,依据第三个参数混合 2 个色彩。

依据以上信息,我们在 shader 中只需求准备 2 个纹理,一个取值在 0.0~1.0 的(uniform)突变量,对应的 shader 脚本可以写成:

#version 300 es
precision mediump float;
in vec2 v_texCoord;
layout(location = 0) out vec4 outColor;
uniform sampler2D u_texture0;
uniform sampler2D u_texture1;
uniform float u_offset;//一个取值在 0.0~1.0 的(uniform)突变量
vec4 transition(vec2 uv) {
return mix(
texture(u_texture0, uv);,
texture(u_texture1, uv);,
u_offset
);
}
void main()
{
outColor = transition(v_texCoord);
}

代码中设置纹理和变量:

glUseProgram (m_ProgramObj);
glBindVertexArray(m_VaoId);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_TextureIds[0]);
GLUtils::setInt(m_ProgramObj, "u_texture0", 0);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, m_TextureIds[1]);
GLUtils::setInt(m_ProgramObj, "u_texture1", 1);
GLUtils::setFloat(m_ProgramObj, "u_offset", offset);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);

本文的 demo 完结的是一个图像轮播翻页作用,Android 完结代码见项目:

github.com/githubhaoha…

转场特效移植是不是很简单,着手试试吧。

发表评论

提供最优质的资源集合

立即查看 了解详情