Documentation / Reactor / addReactor

addReactor()

function addReactor<Animating>(
   anim, 
   reactor, 
   mask): unsubscribe;

Defined in: ../../extensions/src/reactor.ts:49

Creates a dependency link between sets of properties. For example you could change the color of an object based on its position:

Type Parameters

Animating

Animating extends Animatable<unknown>

Parameters

anim

Animation<Animating>

reactor

Transform<Animating>

mask

Mask<PartialRecursiveAnimatable<Animating>>

Prevents running the reactor unnecessarily. Lets you specify which properties you don't want to react to.

Returns

unsubscribe

Example

const anim = createAnimation({pos: ZERO_VEC2, color: {r: 0, g: 0, b: 0}}, getLinearInterp(1))
addReactor(anim, ({pos}) => {
   r = (pos.x - 127) % 255
   g = (pos.y - 127) % 255
   return {color: {r, g}}
 }, 
 {color: false} // makes sure the reactor doesn't trigger when color is modified.
 // otherwise would create an endless loop of reactor calls.
)