rx-ease
An operator to interpolate the values of your rxjs streams!
- Performant, in most case it should run at 60fps.
- Emits on requestAnimationFrame.
- Works with any kind of data structures (Object, arrays, single values).
Install
npm install rxjs rx-ease
The gist
Interpolate a single value
const draw = ArrayMath const progress$ = progress$// will log =>// #// ####// ########// #############// #################// ######################// ##########################// ##############################// ##################################// ######################################// #########################################// ############################################// ##############################################// ################################################// ##################################################// ####################################################// #####################################################// ######################################################// #######################################################// ########################################################// #########################################################// ##########################################################// ##########################################################// ##########################################################// ##########################################################
Interpolate several values of an object
const circle = document const position$ = position$
Api
type Config = [number, number]
Similarly to react-motion, rx-ease is a spring animation operator. To configure the animation you need to pass a stiffness and a damping value in an array like [stiffness, damping]
(for example [120, 18]
).
ease :: Config -> number -> Observable number
const easedInterval$ =
ease :: [Config] -> [number] -> Observable [number]
const easedMousePosition$ =
ease :: { key: Config } -> { key: number } -> Observable { key: number }
const easedMousePosition$ =
presets
- noWobble: equivalent to passing
[170, 26]
- gentle: equivalent to passing
[120, 14]
- wobbly: equivalent to passing
[180, 12]
- stiff: equivalent to passing
[210, 20]
Credits
This was heavily inspired by @chenglou's react-motion.