Question

看起来我在计算中做错了什么，我无法弄清楚：（

我正在研究这种LED条带控制器，我希望在两种颜色之间进行补间/缓和。

假设我们有255 0 0（R，当前）和0 0 255（B，目标）。

现在，当我开始事件时，R应该向下运行而B应该运行（因此它们在128 0 128处相遇）然后它变为蓝色。

我尝试了以下内容;

    if (animationcounter < animationlength) {
        for (k = 0; k<3; k++) {
            current_rgb[k] = easeInOutCubic(animationcounter, begin_rgb[k], rgb_2[k], animationlength);
        }
    } else {
        for (k = 0; k<3; k++) {
            current_rgb[k] = rgb_2[k];
        }
    }

动画长度为120。
动画计数器每帧增加（60 fps，因此动画应该运行2秒）。
current_rgb是当前值（数组0,1,2）
target_rgb是目标颜色
begin_rgb就会设置为current_rgb，计数器设置为0。

缓动函数如下所示;

///easeInOutCubic(time, begin, changeTo, duration)
function easeInOutCubic(t, b, c, d) {
    return c*t/d + b;
}

我遇到的问题是，当我从红色变为红色时，RGB值从255 0 0变为500 0 0然后弹出到255 0 0 - 我需要它坚持255（因为开始和目标之间没有区别。）

当我从R到B时，B最多运行255，但R不会改变（它变为255 0 255然后弹出到0 0 255）。

看起来我没有减去一些东西，但我无法弄明白:(

如果这个线性函数运行良好，那么我可以开始使用四边形/立方体缓动来平滑效果。

我迷路了，我尝试的一切都失败了，感觉我只是错过了一个非常简单的观点。

Answer 1

嘿......想出来了。这个变化是缺少一个减法 - 变化不应该是绝对值（不是目标）而是总变化，所以我改变了函数;

if (animationcounter < animationlength) {
    for (k = 0; k<3; k++) {
        current_rgb[k] = easeInOutCubic(animationcounter, begin_rgb[k], rgb_2[k], animationlength);
    }
} else {
    for (k = 0; k<3; k++) {
        current_rgb[k] = rgb_2[k];
    }
}

以下内容;

if (animationcounter < animationlength) {
    for (k = 0; k<3; k++) {
        current_rgb[k] = easeInOutCubic(animationcounter, begin_rgb[k], rgb_2[k] - begin_rgb[k], animationlength);
    }
} else {
    for (k = 0; k<3; k++) {
        current_rgb[k] = rgb_2[k];
    }
}

注意 rgb_2 [k] - begin_rgb [k] 。

就是这样。橡皮鸭有时效果很好！

补间/插值/缓动RGB

1 个答案: