如何在react-spring中重置useSpring及useTransition动画？

问题背景 #

在@react-spring/web@9.6.1环境下，尝试在用户点击关闭按钮等操作后重置useSpring动画，调用animation.reset()时触发类型错误：Property 'reset' does not exist on type '{ scale: SpringValue<number>; }'。查阅官方文档后仍无法解决，试过往期示例也无法让动画回到默认状态。

相关代码：

const animation = useSpring({
    from: {
      scale: 1
    },
    to: {
      scale: 1.15
    },
    config: {
      duration: 1000
    },
    loop: true
  })

const onClickHandler = () => {
  animation.reset() // 类型错误：reset方法不存在
}

解决方案 #

1. useSpring动画重置：使用API控制器 #

react-spring v9中，useSpring支持数组解构的调用方式，可同时获取动画样式对象和包含控制方法的API控制器，其中就包含reset方法：

import { useSpring } from '@react-spring/web';

// 数组解构获取样式对象与API控制器
const [animation, api] = useSpring(() => ({
  from: { scale: 1 },
  to: { scale: 1.15 },
  config: { duration: 1000 },
  loop: true
}));

const onClickHandler = () => {
  // 调用API的reset方法重置动画到初始状态
  api.reset();
  // 若重置后需要重新启动动画，可调用api.start()
  // api.start();
};

为什么原写法无效？

原代码中animation是仅包含SpringValue类型动画值的对象，reset方法并不属于这个对象。官方文档提到的SpringValue.reset()是单个动画值的重置方法，若仅需重置单个属性，也可这样写：

// 仅重置scale属性的值
animation.scale.reset();

但对于带loop配置的循环动画，更推荐使用API控制器的reset方法，它会同时重置动画的循环状态。

2. useTransition动画重置 #

对于useTransition，有两种常见重置方式：

方式一：通过控制items状态触发重过渡

import { useTransition, useState } from '@react-spring/web';

const [items, setItems] = useState(['内容1', '内容2']);
const transitions = useTransition(items, {
  from: { opacity: 0, y: 20 },
  enter: { opacity: 1, y: 0 },
  leave: { opacity: 0, y: -20 },
});

const resetTransition = () => {
  // 先清空items触发离场动画，再恢复原始数据触发入场动画
  setItems([]);
  setTimeout(() => setItems(['内容1', '内容2']), 0);
};

方式二：使用API控制器

和useSpring类似，useTransition也支持数组解构获取API控制器：

const [transitions, api] = useTransition(items, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
});

const resetTransition = () => {
  // 调用API的reset方法重置过渡状态
  api.reset();
};

内容的提问来源于stack exchange，提问作者nrjshka