docs: ✏️ 添加渐变过渡的相册（shader）的文档

README.md

@@ -17,6 +17,7 @@ cocos是一款挺棒的游戏引擎，我在这个仓库实现一些游戏当中
 [背景无限滚动](./doc/Infinite_bg_scroll/背景无限滚动.md)
 [遥控杆](./doc/Joystick/遥控杆.md)
 [马赛克/像素风（shader）](./doc/Mosaic/马赛克像素风.md)
+[渐变过渡的相册（shader）](./doc/Photo_gallery/渐变过渡的相册.md)
 2D换装
 震屏效果+动画恢复第一帧
 
@@ -101,9 +102,13 @@ cocos是一款挺棒的游戏引擎，我在这个仓库实现一些游戏当中
 ![demo](./doc/Infinite_bg_scroll/resourse/Infinite_bg_scroll.gif)
 
 ## 遥控杆
-这是游戏里面很常用的一个功能模块，它就像你的生活，有着走不完的路程。它的实现也很简单，要么做一个很长的背景图，然后移动相机；要么就是实现一个跑马灯，像那些轮播图什么的，大家应该都有写过。
+这是游戏里面很常用的一个功能模块，通过操控遥控杆控制物体的移动
 
 ![Joystick](./doc/Joystick/resourse/Joystick.gif)
 
+## 渐变过渡的相册（shader）
+相册是一个大家比较熟悉的场景，一般我们是实现的都是那种跑马灯式的轮播相册，这里异名给大家提供一个利用shader实现图片渐变过渡的相册思路
+
+![渐变过渡的相册](./doc/Photo_gallery/resources/demo.gif)
 
 

doc/Photo_gallery/渐变过渡的相册.md

@@ -0,0 +1,67 @@
+# 效果演示
+
+相册是一个大家比较熟悉的场景，一般我们是实现的都是那种跑马灯式的轮播相册，这里异名给大家提供一个利用shader实现图片渐变过渡的相册思路
+
+![demo](./resources/demo.gif)
+
+# 实现思路
+
+拆分一下功能点，主要有两个：一个是实现图片的渐变，一个是实现图片的切换。
+
+图片的渐变可以理解为随着时间的变化，在某一方向上的局部的像素点的透明度变化。demo中实现的效果是一个水平滚轴式的切换，水平平移在数学上的实现其实就是一个简单的关于时间变化的垂直直线`x = time`，我们只需要把每个像素点的x坐标和这个垂直直线做比较，在左边的透明度设为0，在右边的透明度设为1，然后再通过平滑取样就能够有渐变过渡的效果：
+
+```c++
+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中的渐变相册效果了
+
+```js
+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);
+}
+```
+
+![demo](./resources/demo.gif)
+
+## 效果预览
+
+源码获取请点击**查看原文**，长按二维码查看效果👇
+
+![ewm](./resources/preview_ewm.png)
+
+
+
+

settings/project.json

@@ -34,7 +34,7 @@
     "height": 640,
     "width": 960
   },
-  "last-module-event-record-time": 1590679231908,
+  "last-module-event-record-time": 1591504473893,
   "assets-sort-type": "name",
   "facebook": {
     "appID": "",