React-Spring - 改变过渡动画速度

Posted 2023-03-06

【中文标题】React-Spring - 改变过渡动画速度

【英文标题】：React-Spring - Change Transition Animation Speed

【发布时间】：2020-02-20 13:54:32

【问题描述】：

我正在尝试更改默认淡入淡出过渡的速度，但文档似乎没有提及如何这样做：

<Transition
  items=show
  from= opacity: 0 
  enter= opacity: 1 
  leave= opacity: 0 >
  show => show && (props => <div style=props>✌️</div>)
</Transition>

鉴于此代码，我如何使淡入/淡出动画更快或更慢？

我尝试过这样做（如下），但它最终完全破坏了过渡。动画不再起作用：

from= opacity: 1, transitionDelay: "5000ms" 
enter= opacity: 1, transitionDelay: "5000ms" 
leave= opacity: 0, transitionDelay: "5000ms" 

有什么想法吗？

【参考方案1】：

React-spring 使用物理模型。因此，您可以设置模型的物理属性，也可以如前所述指定持续时间。如果您设置持续时间，那么它会切换到基于时间的模型。但是我们喜欢 react-spring 是因为它的物理模型。

我建议调整物理属性。您可以在此处使用基本属性：https://www.react-spring.io/docs/hooks/api

它们是质量、张力、摩擦力。如果你减少质量和摩擦并增加张力，那么速度也会增加。您还可以设置初始速度，使用正速度也可以提高速度。速度越高，越有可能出现过冲，此时动画会摇摆不定。您可以使用钳位配置参数停止过冲。当动画到达终点时，它将停止动画。

下面的配置很快

<Transition
  items=show
  config=mass:1, tension:500, friction:18
  from= opacity: 0 
  enter= opacity: 1 
  leave= opacity: 0 >
  show => show && (props => <div style=props>✌️</div>)
</Transition>

如果您想要更快，您可以减少摩擦并且您可能想要停止过冲。例如：

config=mass:1, tension:500, friction:0, clamp: true

试验配置值是一个试错过程。我建议将您喜欢的配置存储在一个常量中，您可以在更多动画中重复使用它。

【讨论】：

谢谢！将此作为正确答案，因为 React-Spring 是作为“基于弹簧物理的动画库”创建的。持续时间也适用于需要非常具体的基于时间的方法的人，我不需要

@Phillip 如果有一个助手可以根据持续时间和弹跳百分比创建这些值，那就太酷了。

【参考方案2】：

您必须将 config 属性添加到 Transition 并在其中传递持续时间：

<Transition
  config= duration: 5000 
  items=show
  from= opacity: 0 
  enter= opacity: 1 
  leave= opacity: 0 >
  show => show && (props => <div style=props>✌️</div>)
</Transition>