useTween

behaves similarly to signals but instead will interpolate the value smoothly with the ability to cancel

Demo

Usage

const duration = useSignal(500)
const currentValue = useTween(0)
const nextValue = useSignal(0)
const hasFinished = useSignal(false)
const onUpdateValue = async () => {
  hasFinished.value = false
  await currentValue.set(nextValue, {
    duration,
  })
  hasFinished.value = true
}

const onCancel = () => {
  currentValue.set(nextValue, {
    duration: 0,
  })
  hasFinished.value = true
}

Type Declaration

const const currentValue: TweenSignal<number>currentValue = useTween<number>(initial: number, options?: TweenedOptions<number> | undefined, displayName?: string): TweenSignal<number>useTween(0)

interface interface TweenedOptions<T>TweenedOptions<function (type parameter) T in TweenedOptions<T>T> {
  TweenedOptions<T>.delay?: number | undefineddelay?: number
  TweenedOptions<T>.duration?: number | ((from: T, to: T) => number) | undefinedduration?: number | ((from: Tfrom: function (type parameter) T in TweenedOptions<T>T, to: Tto: function (type parameter) T in TweenedOptions<T>T) => number)
  TweenedOptions<T>.easing?: ((t: number) => number) | undefinedeasing?: (t: numbert: number) => number
  TweenedOptions<T>.interpolate?: ((a: T, b: T) => (t: number) => T) | undefinedinterpolate?: (a: Ta: function (type parameter) T in TweenedOptions<T>T, b: Tb: function (type parameter) T in TweenedOptions<T>T) => (t: numbert: number) => function (type parameter) T in TweenedOptions<T>T
}