Sprites.Animate

Time based drivers, built on Sprites.Reactive.Driver. Counter steps a value on an interval. SetAfter writes a value once, after a delay.

Sprites.Animate

Sprites.Animate.Counter Object

Sprites.Animate.Counter(counterBinding, intervalMs)

Step a number value up by one every intervalMs milliseconds, through an interval driver.

InputTypeDescription
counterBindingSprites.Reactive.ValueThe number value to step up on each tick.
intervalMsNumberThe interval in milliseconds.

Returns the driver request control, cleared when its scope ends.

const running = Sprites.Reactive.Value(false);
const count = Sprites.Reactive.Value(0);
const doubled = Sprites.Reactive.Value(0);
const step = Sprites.Reactive.Value(count, (v) => {
  Sprites.Reactive.Set(count, v);
  Sprites.Reactive.Set(doubled, v * 2);
});
Sprites.Ui.Input.Checkbox(running);
Sprites.Ui.Dom.Text(' count = ', count, ', doubled = ', doubled);
Sprites.Reactive.If(running, () => {
  Sprites.Animate.Counter(step, 1000);
});
Tick the box to run the counter; the reverse lens writes the count and its double.

Sprites.Animate.SetAfter Object

Sprites.Animate.SetAfter(binding, value, ms)

Write value into binding once, after ms milliseconds, through a timeout driver. With a Pending binding, the write gives it its first value and clears the pending flag.

InputTypeDescription
bindingSprites.Reactive.ValueThe value to write to.
valueAnyThe value to write.
msNumberThe delay in milliseconds.

Returns the driver request control, cleared when its scope ends.

const started = Sprites.Reactive.Value(false);
const result = Sprites.Reactive.Pending(0);
Sprites.Ui.Button.SetValue(started, true, 'Load in 2s');
Sprites.Ui.Loading(() => {
  Sprites.Ui.Dom.Text(' result = ', result);
});
Sprites.Reactive.If(started, () => {
  Sprites.Animate.SetAfter(result, 42, 2000);
});
Press the button; the spinner shows until the value lands after two seconds.