Trigger JS callback on keyframe

[AdamGerthel]

I'm looking to call a javascript function on a specific keyframe. The use-case for me is in a game: In an attack animation, I want to inflict damage on the target when the animation "hits" its target (which happens at a specific point in the animation, i.e. a keyframe). The function called will affect a completely different component, causing another animation (health loss) to trigger.

Is it possible to do this using keyframe animations?

[MatiPl01]

Hey!

Referring to this section in docs, you can use keyframe animations only for layout entering/exiting animations. So, there is no way to manually control when the keyframe animation is executed.

If I understand your desired behavior properly, you could achieve a similar result by storing your players hp in the shared values and play the animation every time the hp shared value decreases. These values should be somehow accessible from in player components (e.g. via shared state, such as context).

// Shared state accessible from both players (e.g. PlayersContext)
const player1Hp = useSharedValue(100)
const player2Hp = useSharedValue(100)

// Player component
const { player1Hp: hp } = useContext(PlayersContext) // get your player hp in the player component
const hitAnimationProgress = useSharedValue(0)

useAnimatedReaction(
  () => hp.value,
  (currentHp, previousHp) => {
    if (currentHp < previousHp) {
      hitAnimationProgress.value = 0
      hitAnimationProgress.value = withTiming(1)
    }
  }
)

Now, you can use hitAnimationProgress share value to calculate your hit animation, e.g.

const hitAnimationStyle = useAnimatedStyle(
  () => ({ opacity: interpolate(hitAnimationProgress.value, [0, 1], [1, 0.5]) })
)

This is just a simplified example.
If you have more questions, feel free to ask.

[AdamGerthel]

useAnimatedReaction looks interesting, very similar to MobX reactions/when. Does it run completely on the native side? I.e. will the listening happen natively, or is a re-render required in the react component?

Or to put it in another way - how is it different from a useEffect hook with a dependency on hp.value (based on your example)?

[MatiPl01]

useAnimatedReaction looks interesting, very similar to MobX reactions/when. Does it run completely on the native side? I.e. will the listening happen natively, or is a re-render required in the react component?

useAnimatedReaction doesn't trigger any re-render. It reacts to the value change in the native side and updates shared values in the second callback that you pass to useAnimatedReaction. You can find more details here in docs.

Or to put it in another way - how is it different from a useEffect hook with a dependency on hp.value (based on your example)?

You should never pass shared value .value property as a dependency of any react hook. It can lead to unpredictable results because shared value is updated asynchronously on a separate thread, so your useEffect hook can be executed when you don't need it to run (e.g. when the component re-renders as a result of props change but, since your shared value changed some time ago, the hook will be executed as well, even though the value was updated before and shouldn't trigger hook re-render).

And how is it different from useEffect? The main difference is that updating shared values doesn't trigger any re-renders, thus it is way faster than updating state multiple times and reacting to state change with useEffect.

[AdamGerthel]

Ok, got it! The the gist of it is that React is completely unaware of both the prepare function and the react function and the resulting animations, i.e. the component doesn't have to re-render in order to start the animation (which would be the case when using a useEffect hook). I understand and would never put a shared value's value in the dependency list, that was a bad example.

[MatiPl01]

Yea, with react-native-reanimated, the re-render is not necessary to start the animation. You usually would have to create the style object with useAnimatedStyle and pass it to the animated component, such as Animated.View and it will start animating once at least one of shared values used within the useAnimatedStyle hook is updated.

If you have more questions, don't hesitate to ask.