时间动画
8 / 14
学习使用u_time uniform变量创建随时间变化的动画效果,理解sin函数在动画中的应用。
让整个画面的红色亮度随时间呼吸起来,核心就这两行:
下面拆解每个部分。
u_time 是什么
u_time 是一个从外部传进来的值,代表程序运行了多少秒。它一直在增长:0.0、0.5、1.2、3.7……
把它想象成一个一直走动的秒表。
sin 函数的作用
sin(u_time) 会把那个一直增长的时间值,变成一个在 -1.0 到 1.0 之间反复震荡的值。
就像钟摆:它不会一直往一边摆,而是来回摆动。
为什么要做 (oscillation + 1.0) * 0.5
sin 输出范围是 -1.0 到 1.0,但颜色值只接受 0.0 到 1.0(负数颜色没有意义)。
所以需要换算:
- 先加 1.0:范围变成 0.0 到 2.0
- 再乘以 0.5:范围压缩到 0.0 到 1.0
换算后,红色从 0%(全暗)到 100%(最亮)再回到 0%,循环往复。
试着改一改
| 改动 | 效果 |
|---|---|
sin(u_time * 2.0) | 动画速度变为两倍快 |
sin(u_time * 0.3) | 动画变成缓慢的呼吸 |
vec4(0.0, normalizedOscillation, 0.0, 1.0) | 改为绿色呼吸 |
vec4(normalizedOscillation, normalizedOscillation, 0.0, 1.0) | 黄色呼吸 |
练习
练习区的画面是静态红色,用 sin(u_time) 让它的亮度随时间动起来,形成红色的呼吸效果。
答案解析
sin(u_time)产生 -1.0 到 1.0 的震荡(oscillation + 1.0) * 0.5把范围换算到 0.0 到 1.0vec4(normalizedOscillation, 0.0, 0.0, 1.0)把这个值用作红色通道
起始代码是固定的红色,没有时间变量。加入 sin(u_time) 后,红色分量随时间变化,就产生了呼吸感。
试着把 * 0.5 改成 * 0.3,让暗部保留更多红色,呼吸幅度变小。