android中怎么用shader實(shí)現(xiàn)漸變過渡的相冊(cè)

效果：

    

實(shí)現(xiàn)思路

拆分一下功能點(diǎn)，主要有兩個(gè)：一個(gè)是實(shí)現(xiàn)圖片的漸變，一個(gè)是實(shí)現(xiàn)圖片的切換。

圖片的漸變可以理解為隨著時(shí)間的變化，在某一方向上的局部的像素點(diǎn)的透明度變化。demo中實(shí)現(xiàn)的效果是一個(gè)水平滾軸式的切換，水平平移在數(shù)學(xué)上的實(shí)現(xiàn)其實(shí)就是一個(gè)簡(jiǎn)單的關(guān)于時(shí)間變化的垂直直線x = time，我們只需要把每個(gè)像素點(diǎn)的x坐標(biāo)和這個(gè)垂直直線做比較，在左邊的透明度設(shè)為0，在右邊的透明度設(shè)為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;
}

實(shí)現(xiàn)了圖片的漸變，接下來就是圖片的切換，所有的圖片其實(shí)都在一個(gè)隊(duì)列當(dāng)中，我們?cè)跐u變完成之后只需要把最上面的的那張圖片放到最下面，就能夠讓這個(gè)相冊(cè)一直在循環(huán)播放，在這個(gè)過程中我們?cè)偌由弦恍﹫D片的狀態(tài)處理就能夠是實(shí)現(xiàn)demo中的漸變相冊(cè)效果了

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);
}