问题标签 [react-spring]

react spring 自带了一个animated功能，可以让组件进行原生修改，而无需重新渲染组件。我发现动画组件有几个方法类似于react native 的动画组件。两者之间是否有任何联系，或者这些概念.interpolate()对于动画库来说是否非常普遍？

我来自 React-pose 背景，喜欢尝试 React-spring。我有一个非常简单的案例，我想将它转移到 React-spring 中使用。

我使用 React-pose 在 Codesanbox 中编写了案例，https ://codesandbox.io/s/4wxzm60nk9

我试过自己转换它，但我最终让自己感到困惑。尤其是现在尝试使用他们的 hooks API 来做这件事时。我能得到的所有帮助都非常感谢。

谢谢你。

我将 react-spring 与 Typescript 一起使用。当我将本机渲染与 react-spring 一起使用时，我收到 interpolate 函数的错误消息。

“类型‘数字’上不存在属性‘插值’”

我尝试在Spring组件内部props中引入一个接口，但是我无法摆脱各种错误消息。

https://codesandbox.io/s/34zopyr8zq

您好，我正在尝试重写没有钩子的可滑动卡片示例（使用渲染道具），但是我坚持如何与 Spring 通信 Gesture。感谢任何帮助。

这是 Hooks 的官方示例：https ://codesandbox.io/embed/j0y0vpz59

这是我尝试使用渲染道具https://codesandbox.io/s/4j45p88qkw复制示例的代码

我不清楚的是bind功能，一旦我计算了新的x rot scale，我如何将它传递给卡？

我只是想在反应弹簧渲染道具和基于钩子的方法之间移动。

对于大多数情况，解决方案非常简单，因为我必须使用的值可以直接动画化。

在一个特殊情况下，我必须为地图运动和缩放设置动画，并且我可以获得初始值和最终值。我注意到，渲染道具和基于钩子的方法之间的区别在于，Spring 给出的道具给了我可以传递给我的地图组件的实际值，而在基于钩子的方法中，道具是 AnimatedValue。现在我的组件采用了实际值，因此我无法进一步使用基于钩子的方法。

所以我有一个世界地图组件，它采用道具中心和缩放。center 是 [number,number] 格式的坐标，zoom 是一个数字。

现在，当我使用渲染道具方法对其进行动画处理时，它可以按预期工作。

因为我相信渲染道具 x,y 和 z 是数字（实际值）

对于基于钩子的代码，我使用的是：

渲染部分是这样的：

我正在附加两个沙箱（基于 RenderProps 和基于钩子）

任何有助于理解这一点的帮助将不胜感激。

钩子：https ://codesandbox.io/s/0q8yjrz63l

渲染道具：https ://codesandbox.io/s/69114nj5k

同样在基于钩子的方法中，我收到错误警告：无法给函数组件提供参考。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

加上一些错误，考虑到这些值是动画值

我在这里先向您的帮助表示感谢。

我正在使用 react-spring 的 useTransition 在页面之间进行转换，如下所示：

初始页面使用“初始”样式正确呈现，但未使用“离开”样式过渡。导航到其他页面后，它们都会按应有的方式进行转换，甚至是返回时的初始页面。

那么，如何让初始页面像其他页面一样过渡出来？

编辑：添加了展示问题的代码框。

第一次拖放元素工作正常，第二次拖动将项目移动到初始位置。如何解决？

https://codesandbox.io/s/j3w1oj7zp3

我使用反应弹簧并用手势做出反应。

我在为我的进度条组件设置动画时遇到了一些问题......我正在尝试为我的组件设置动画（通过在屏幕上可见时用 Spring 填充进度条组件宽度从 0% 到 X%（通过使用 VisibilitySensor）。我到目前为止已经尝试了一些事情，但我还没有弄清楚如何正确地做到这一点。 PS：我目前是 React 的新手。

这是我到目前为止所尝试的：

尝试＃1：-这种方法的问题：我收到一条错误消息“未定义插值”（可能是因为宽度：isVisible ? ${props.percent}% : '0%' in the Spring）也许有一种解决方法这个 ？

尝试#2：

这种方法的问题：初始动画有效，但是当组件从可见变为不可见时，弹簧动画不起作用，它直接从 0% 变为 X%。

预先感谢您的帮助 ！

我的组件中有 React-Spring 动画：

我在 prop 内部传递函数调用的地方onRest- 这是来自 React-Spring Keyframe 的 prop，它在动画结束后调用。

我怎样才能通过测试来解决这个问题？我愿意接受任何技巧，只需要避免在测试覆盖范围内抱怨。

如何使用 react-spring 库为 React 组件设置动画取决于道具更新

我找到了这个https://codesandbox.io/s/xpqq0ll5nw并想用钩子实现同样的功能