react-spring 中的“动画”做啥？

Posted 2023-03-07

【中文标题】react-spring 中的“动画”做啥？

【英文标题】：What does "animated" do in react-spring?react-spring 中的“动画”做什么？

【发布时间】：2019-03-22 01:11:40

【问题描述】：

我目前正在处理react-spring animation library。

在文档中的一些 CodeSandbox 演示（例如 https://codesandbox.io/embed/j150ykxrv）中，导入了一些名为“动画”的东西：

import  Transition, animated  from 'react-spring'

然后像这样使用：

  this.state.items.map(item => styles => <animated.li style= ...defaultStyles, ...styles >item</animated.li>)

在其他示例中不使用：

import  Spring  from 'react-spring'

<Spring
  from= opacity: 0 
  to= opacity: 1 >
  props => <div style=props>✌️</div>
</Spring>

我在文档中找不到任何关于它的作用或使用原因的信息，因为您似乎可以通过将动画样式道具传递给组件来制作动画。

文档中的用途是旧版本的一部分吗？

【参考方案1】：

看起来是用来做原生渲染的，看看Transition组件，它有一个原生prop

【参考方案2】：

进一步查看文档，我可以看到它用于"native" rendering。

这允许 react-spring 绕过 React 进行帧更新。这种方法的好处是提高了性能。

---

推荐使用这种方式

“在所有可能的情况下尝试这样做”

---

请注意以下条件：

native 仅动画样式、属性和子项（作为 textContent） 您收到的值是不透明的对象，而不是常规值 接收元素必须是动画的。[elementName]，例如div变成animated.div 如果您使用样式化组件或自定义组件，请执行以下操作：动画（组件） 如果您需要插入样式，请使用 interpolate

---

总结的好处：

你的申请会更快，区别真的可以是晚上 和日期 您将获得非常强大的插值和关键帧工具（请参阅 下面） 您可以开箱即用地为 scrollTop 和 scrollLeft 设置动画（其中 React 不能正常处理）

【参考方案3】：

Native 是可选的，如果你设置它（然后你需要组件从 animated.xxx 扩展），它不会像通常反应动画库那样渲染动画，换句话说，它们调用 forceUpdate 或 setState on每一帧，这是昂贵的。使用 native 时，它​​将渲染组件一次，然后使用 requestAnimationFrame-loop 在后台设置动画，该循环直接设置样式。您传递给目标 div（或其他）的值不是数值，而是接收更新事件的类，这就是您需要扩展的原因。

通过 react 渲染并没有过时，但是，它是您可以为 React 组件道具设置动画的唯一方法。如果你有一个外部控件，或者一个 D3 图表，你只需将道具吹入其中，而弹簧将它们渲染出来。