The tweenSignal and springSignal functions are heavily inspired by Svelte's motion functions. They allow you to create engaging transition animations with just a signal. By default, they can automatically transition between a number, array of numbers, or Record of numbers. An interpolation function can be passed to enable transitioning between values of any type.
Animation options can be passed when creating the signal along with signal creation options. They can also be changed by calling setOptions
on the signal or by passing an optional parameter when setting the signal. The values passed while setting the signal will only be used for the duration of the animation.
As a convenience a collection of easing functions are provided such as easeInBack. These can be imported from the submodule, @ddtmm/angular-signal-generators/easings
.
You can pass your own easing function. It should have a single numeric parameter that accepts a value between 0 and 1 and returns a value around 0 and 1. It is acceptable that a value might be slightly outside this range during animation, but is should always start at 0 and end at 1.
You can tween between array values of equal length. Here the array is an set of coordinates that changes with each click of the control surface.
You can tween between anything as long as there is an interpolation function that can translate progress into a value.