Feat: and cancel method to useAnimationState() and useDynamicAnimation()

[JeongHeonK]

What?

• add cancel() method to useAnimationState() and useDynamicAnimation()

Why?

• Existing hooks do not allow animations to be paused but rather only enable control through specified keys.
• After analyzing the provided Moti components, it was observed that they use merged style and useAnimationStyle() instead of shared values, which makes implementing a cancel method infeasible.
• To implement functionality that allows animations to be paused rather than outright canceled, it seems necessary to introduce a cancel method.

How?

As shown in the file changes below, I added the cancel method to execute the cancelAnimation() function from the Reanimated library and updated the types accordingly.

Usage

const animationState = useAnimationState({
  from: {
    opacity: 0,
    scale: 0.9,
  },
  to: {
    opacity: 1,
    scale: 1.1,
  },
  expanded: {
    scale: 2,
  },
});

const onPress = () => {
  if (animationState.current === "to") {
    animationState.transitionTo("expanded");
  }
};

const onCancel = () => {
  animationState.cancel();
};

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
moti	❌ Failed (Inspect)			Nov 26, 2024 10:27am

[nandorojo]

Hey I missed this PR. Cool! However, I don't think cancelAnimation works like this -- it would need to be in a worklet that loops over __state's values, right?