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)