相冊是一個大家比較熟悉的場景，一般我們是實現的都是那種跑馬燈式的輪播相冊，這裏異名給大家提供一個利用shader實現圖片漸變過渡的相冊思路
實現思路
拆分一下功能點，主要有兩個：一個是實現圖片的漸變，一個是實現圖片的切換。
圖片的漸變可以理解爲隨着時間的變化，在某一方向上的局部的像素點的透明度變化。demo中實現的效果是一個水平滾軸式的切換，水平平移在數學上的實現其實就是一個簡單的關於時間變化的垂直直線x = time，我們只需要把每個像素點的x座標和這個垂直直線做比較，在左邊的透明度設爲0，在右邊的透明度設爲1，然後再通過平滑取樣就能夠有漸變過渡的效果：
void main () {
vec4 color = vec4(1, 1, 1, 1);
color *= texture(texture, v_uv0);
color *= v_color;
#if USE_TRAMSFORM
color.a = smoothstep(0.0, u_fade_radius, u_fade_radius + v_uv0.x - u_time);
#endif
gl_FragColor = color;
}
實現了圖片的漸變，接下來就是圖片的切換，所有的圖片其實都在一個隊列當中，我們在漸變完成之後只需要把最上面的的那張圖片放到最下面，就能夠讓這個相冊一直在循環播放，在這個過程中我們再加上一些圖片的狀態處理就能夠是實現demo中的漸變相冊效果了
isTransforming: boolean = false;
bgTramsform() {
if (this.isTransforming) return;
this.isTransforming = true;
let time = 0.0;
let node = this.switchNodeList[0];
let material = node.getComponent(cc.Sprite).getMaterial(0);
material.setProperty('u_fade_radius', this.fadeRadius);
material.setProperty('u_time', time);
material.define('USE_TRAMSFORM', true, 0, true);
let timer = setInterval(() => {
time += 0.03;
material.setProperty('u_time', time);
if (time > 1.0 + this.fadeRadius) {
this.switchNodeList.shift();
this.switchNodeList.push(node);
this.switchNodeList.forEach((node, idx) => node.zIndex = this.switchNodeList.length - idx)
material.define('USE_TRAMSFORM', false, 0, true);
this.isTransforming = false;
timer && clearInterval(timer);
}
}, 30);
}
效果預覽
源碼獲取請點擊查看原文????
推薦閱讀：
覺得不錯，點個在看唄~
