TCL电视机音乐播放器动效背景模仿

        今晚使用电视机听歌的时候发现它的背景动效还挺好看的，如图：

TCL电视播放器UI界面

        背景的纯色会随着时间变化像波浪一样翻滚。我看了一眼感觉应该是利用了三角函数生成的值用在了颜色深度上作为系数而形成。

        于是我使用desmos自己写了个这样的函数，以z轴显示值的大小，可以看到它的值变化模式和这个动效是比较像的：

TCL视频动效背景算法逆推

然后编写shader demo开始模仿：

        

#version 300 es
precision highp float;
uniform sampler2D sTexture;//纹理输入
uniform int funChoice;
uniform float frame;//第几帧
uniform vec2 resolution;//分辨率
in vec4 fragObjectColor;//接收vertShader处理后的颜色值给片元程序
in vec2 fragVTexCoord;//接收vertShader处理后的纹理内坐标给片元程序
out vec4 fragColor;//输出到的片元颜色void main() {float t = frame / 100.0;float z = sin(fragVTexCoord.s * resolution.x / 2000.0 + t * 1.0) + cos(fragVTexCoord.t * 1.2 * resolution.y / 300.0 + t) + 2.0 + 0.3;vec3 color = vec3(0.5, 0.7, 0.0) * z * 0.3;fragColor = vec4(color, 1.0);
}

通过调整一些Magic值，就得到了如下效果：

2Dshader波浪算法实现效果