5

I am currently getting to grips with the react-spring animation library.

In some of the CodeSandbox demos (e.g. https://codesandbox.io/embed/j150ykxrv) in the documentation, something is imported called "animated":

import { Transition, animated } from 'react-spring'

and then used like so:

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

In other examples this isn't used:

import { Spring } from 'react-spring'

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

I can't find any mention in the documentation of what this does or why it is used, as it seems you can animate by just passing animated style props into a component.

Are the uses in the documentation part of a legacy version?

4

3 回答 3

3

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

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

于 2018-10-18T17:43:03.093 回答
1

进一步查看文档，我可以看到它用于“本机”渲染。

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

建议使用这种方法

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

请注意以下条件：

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

总结的好处：

  1. 您的应用程序会更快，区别真的可以是白天和黑夜
  2. 你会得到非常强大的插值和关键帧工具（见下文）
  3. 您可以开箱即用地制作动画scrollTop（ React 通常无法处理）scrollLeft
于 2018-10-17T12:56:32.940 回答
0

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

于 2018-10-17T12:33:45.753 回答