Allow access to spring's "current goal value" through AnimatedValue.getGoalValue()

[guopengliang]

🚀 Feature Proposal

Allow access to the "current goal value" of an AnimatedValue.
EDIT: method renamed to getGoalValue, was getEndValue when proposed.

AnimatedValue.getGoalValue(); // the goal value that's currently animating to

Motivation

When writing more complicated animations, sometimes we have to share the same AnimatedValues across multiple/nested components. In addition to .getValue(), it would be super handy if we could also access the "current goal value" via .getGoalValue().

Example

Define a spring in Component A and pass it to Component B.

const [pos, set] = useSpring(() => ({ x: 0, y: 0 }));
set({ x: 331, y: 85 });

Access "current value" as well as "current goal value" from Component B.

pos.x.getValue(); // = 123.4567 being animating to 331
pos.x.getGoalValue(); // = 331
...
set({ x: 109 }); // update
...
pos.x.getValue(); // = 112.3456 being animated to 109 (previously to 331)
pos.x.getGoalValue(); // = 109

[aleclarson]

In 9.0.0-canary.809.2.49361198 (a canary version for #808 and #809), you can do the following:

const style = useSpring({ x: props.x })
style.x.get() // Get current value.
style.x.animation.to // Get goal value.

[aleclarson]

Since 9.0.0-canary.808.13.719834d, you can use the goal property instead.

style.x.goal

Using .goal is better than .animation.to for two reasons:

• Less typing
• If your spring is animating toward another spring, .goal will return the current value of the target spring, while .animation.to will return the target spring

const {x} = useSpring({ x: props.x })
const {y} = useSpring({ y: x })
y.animation.to === x
y.goal === props.x