Animating color with the use of an RGB Tween

Using an animation to transition from one color value to another, by default will not animate in the way you expect it. There is an extra step you must take to make sure the color change is smooth. One method to achieve this is by manually interpolating the color steps and triggering the step changes using a timer, this is explained in an earlier community post: How to Animate Color

A more automatic way of implementing color animations can be done with the use of an animation tween. A tween is a way to set specific step values in-between the start and end. In Lua or JavaScript, there are functions to generate tweens which can then be applied to animations either written in code or through the Storyboard timeline. Read more about tweening and how they can be applied to animations in this post: Creating an Animation Easing Library Using Lua

Here is an example of animating from red to green without a set tween. As you can see, the in-between color values are seemingly random: 

Wheras, applying a smart color tween makes the transition more aligned with what we would expect:

Here is the sample code used to achieve this color tween in Lua:

function setColorTween()

    gre.animation_create_tween("colorlinear", ColorTween)

end

function ColorTween(elapsed, base, change, duration)

    local baseR, baseG, baseB = gre.torgb(base)

    local destR, destG, destB = gre.torgb(base+change)

    local r = baseR + (destR-baseR) * elapsed / duration

    local g = baseG + (destG-baseG) * elapsed / duration

    local b = baseB + (destB-baseB) * elapsed / duration

    return gre.rgb(r,g,b)

end

Once this tween is created it can then be applied and reused as a custom rate for any animation step property whether in code or in the timeline. The step will reference the string "colorlinear" as the rate, just as it would for something like "linear" or "ease-in". To use this tween, this generate function must be called before the animation is triggered, for example on application init or a screenshow event. 

ColorTween.zip