JAVASCRIPT EXAMPLES Fade As a Graph
This example shows how different acceleration/deceleration curves (generated using the Uize.Fade.celeration
static method of the Uize.Fade
class) shape a fade's curve over time. A graph of twenty Uize.Widget.Bar
instances represents the value of a fade over time. By default, the interpolated value for a fade is linear, but using different "celeration" curves allows for varying amounts of a fade's head and tail to be in acceleration and deceleration phases. A value of .5
for acceleration
means the first half of the fade will be acceleration. A value of .25
for deceleration
means that the last quarter will be deceleration. Click the test links below to choose different values for these properties. This example also illustrates how the Uize.Fade
class can be used for non-time based fades, because we're using a fade to interpolate values for a series of bars.
- EQUAL: Uize.Fade.celeration (0,0) | Uize.Fade.celeration (.25,.25) | Uize.Fade.celeration (.33,.33) | Uize.Fade.celeration (.5,.5)
- INVERSE: Uize.Fade.celeration (0,1) | Uize.Fade.celeration (.33,.66) | Uize.Fade.celeration (.66,.33) | Uize.Fade.celeration (1,0)
- acceleration is 0 Uize.Fade.celeration (0,.25) | Uize.Fade.celeration (0,.5) | Uize.Fade.celeration (0,.75) | Uize.Fade.celeration (0,1)
- deceleration is 0 Uize.Fade.celeration (.25,0) | Uize.Fade.celeration (.5,0) | Uize.Fade.celeration (.75,0) | Uize.Fade.celeration (1,0)