mirror of
https://github.com/ifengzp/cocos-awesome.git
synced 2024-12-26 03:39:22 +00:00
64 lines
2.6 KiB
Markdown
64 lines
2.6 KiB
Markdown
# 效果演示
|
|
|
|
异名实现了一个基于颜色偏移的场景过渡效果。这种效果利用了起始颜色与目标颜色之间的动态插值，创造出一种流畅的视觉体验。效果十分吸引眼球，尤其在切换不同场景时表现出色
|
|
|
|
|
|
|
|
# 实现思路
|
|
|
|
整体的场景切换脚本可以看[之前的文章](https://mp.weixin.qq.com/s/pnek7_P3YQlbnozi-ZNY2Q)，这里就不再展开了，本次过渡效果作为其中的一个拓展，核心是下面这个 `transition` 函数，基于位置和颜色进行渐变插值
|
|
|
|
```c++
|
|
vec4 getFromColor(vec2 uv) {
|
|
return texture(texture, uv);
|
|
}
|
|
vec4 getToColor(vec2 uv) {
|
|
return texture(texture2, uv);
|
|
}
|
|
vec4 transition(vec2 p) {
|
|
vec4 ca = getFromColor(p);
|
|
vec4 cb = getToColor(p);
|
|
|
|
vec2 oa = (((ca.rg + ca.b) * 0.5) * 2.0 - 1.0);
|
|
vec2 ob = (((cb.rg + cb.b) * 0.5) * 2.0 - 1.0);
|
|
vec2 oc = mix(oa, ob, 0.5) * strength;
|
|
|
|
float w0 = progress;
|
|
float w1 = 1.0 - progress;
|
|
return mix(getFromColor(p + oc * w0), getToColor(p - oc * w1), progress);
|
|
}
|
|
```
|
|
|
|
代码解读可以分两部分来看，首先看颜色插值部分
|
|
|
|
```c++
|
|
vec2 oa = (((ca.rg + ca.b) * 0.5) * 2.0 - 1.0);
|
|
vec2 ob = (((cb.rg + cb.b) * 0.5) * 2.0 - 1.0);
|
|
vec2 oc = mix(oa, ob, 0.5) * strength;
|
|
```
|
|
|
|
其中 `ca.rg + ca.b` 将红绿通道的和与蓝通道相加，并取其平均值（乘以 0.5），然后通过乘以 2.0，再减去 1.0，将这个结果转化为范围在 `[-1.0, 1.0]` 的偏移向量
|
|
|
|
`oa` 和 `ob` 分别是起始颜色和目标颜色的偏移向量，使用红、绿、蓝通道来生成二维的偏移量
|
|
|
|
然后通过 `mix(oa, ob, 0.5)` 进行线性插值，计算起始颜色和目标颜色之间的过渡向量，`0.5` 表示在起始和目标之间取中点，最后乘以 `strength`，这个参数控制偏移的强度，影响过渡效果的扭曲程度
|
|
|
|
```c++
|
|
float w0 = progress;
|
|
float w1 = 1.0 - progress;
|
|
return mix(getFromColor(p + oc * w0), getToColor(p - oc * w1), progress);
|
|
```
|
|
|
|
进度控制部分，`progress` 是用于控制场景切换进度的参数，当 `progress = 0` 时，显示起始场景，当 `progress = 1` 时，显示目标场景，其取值在 `[0, 1]` 范围内
|
|
|
|
最后使用 `mix` 函数根据 `progress` 对起始和目标颜色进行插值，`p + oc * w0` 和 `p - oc * w1` 调整了起始和目标的坐标偏移，制造了空间上的扭曲效果
|
|
|
|
|
|
|
|
# 效果预览
|
|
|
|
**源码**获取请点击**查看原文**，长按二维码**查看效果**👇
|
|
|
|
|
|
|