cocos-awesome/doc/Photo_gallery/渐变过渡的相册.md
2020-06-07 13:33:20 +08:00

65 lines
2.6 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 效果演示
相册是一个大家比较熟悉的场景一般我们是实现的都是那种跑马灯式的轮播相册这里异名给大家提供一个利用shader实现图片渐变过渡的相册思路
![demo](http://cdn.blog.ifengzp.com/cocos-awesome/Photo_gallery/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](http://cdn.blog.ifengzp.com/cocos-awesome/Photo_gallery/resources/demo.gif)
## 效果预览
源码获取请点击**查看原文**,长按二维码查看效果👇
![ewm](http://cdn.blog.ifengzp.com/cocos-awesome/Photo_gallery/resources/preview_ewm.png)