Documentation / Proxy / getStateTreeProxy

getStateTreeProxy()

function getStateTreeProxy<Animating>(anim): object;

Defined in: ../../extensions/src/proxy.ts:138

Returns a proxy object that allows you to interact with the animation state as though it were a plain object.

Type Parameters

Animating

Animating extends Animatable<unknown>

Parameters

anim

Animation<Animating>

Returns

object

A proxy object that allows you to interact with the animation state along with an unsubscribe function that remove the proxy from the animation.

proxy

proxy: Animating;

unsubscribe

unsubscribe: unsubscribe;

Examples

const anim = createAnimation({a: {x: 0, y: 0}, b: 0}, getLinearInterp(1))
const { proxy } = getStateTreeProxy(anim)
proxy.a.x // 0
proxy.a.y // 0
proxy.b // 0
proxy.a.x = 1
proxy.a.x // 0 - the value reflects the current state of the animation so
         // it will not change until the animation is updated
updateAnimation(anim, 0.5)
proxy.a.x // 0.5
updateAnimation(anim, 0.5)
proxy.a.x // 1

const anim = createAnimation({a: {x: 0, y: 0}}, getLinearInterp(1))
const { proxy } = getStateTreeProxy(anim)
proxy.a.x // 0
proxy.a.y // 0
proxy.a = {x: 1, y: 1}
updateAnimation(anim, 0.5)
proxy.a // {x: 0.5, y: 0.5}
updateAnimation(anim, 0.5)
proxy.a // {x: 1, y: 1}

Note

Note that the root object of the animation's state cannot be set directly, but the children can be set.