Android 圖片轉場和輪播特效，你想要的都在這了

使用 OpenGL 作圖像的轉場效果或者圖片輪播器，能夠實現不少使人驚豔的效果。

GLTransitions

熟悉的 OpenGL 開發的朋友已經很是瞭解 GLTransitions 項目，該項目主要用來收集各類 GL 轉場特效及其 GLSL 實現代碼，開發者能夠很方便地移植到本身的項目中。

GLTransitions 項目網站地址: gl-transitions.com/gallery

GLTransitions 項目已經有接近 100 種轉場特效，可以很是方便地運用在視頻處理中，**不少轉場特效包含了混合、邊緣檢測、腐蝕膨脹等常見的圖像處理方法，由易到難。 **

對於想學習 GLSL 的同窗，既能快速上手，又能學習到一些高階圖像處理方法 GLSL 實現，強烈推薦。

另外 GLTransitions 也支持 GLSL 腳本在線編輯、實時運行，很是方便學習和實踐。

Android OpenGL 怎樣移植轉場特效

因爲 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…

轉場特效移植是否是很簡單，動手試試吧。