问题标签 [react-animations]

我在使用成帧器动作使动画工作时遇到了一些问题。任何帮助将不胜感激。

代码沙箱示例

我正在使用带有 expo cli 的 react native，并且我有一个组件：

这里我对这个功能感兴趣

当函数执行时，我在这里运行动画（暂时忽略注释掉的行）。动画确实有效。视频演示：https ://youtu.be/fiGy0gNej68

但是如果我在启动动画后在这个函数中改变了组件的状态： setMode(false)或者setMode(true)动画没有启动，即使是按钮也不会改变它们的大小视频演示：https ://youtu.be/deLZEKVnaBY

告诉我如何解决这个谢谢

我在本机反应中实现了一个浮动按钮（TouchableOpacity）。我能够根据滚动位置显示和隐藏按钮。当滚动视图向上滚动并且向下滚动时，我想将按钮从屏幕底部向上移动，而不是显示和隐藏。我想使用流畅的动画来实现这一点。

下面是我用来创建浮动按钮并在滚动时显示和隐藏的代码。

// 渲染方法

任何帮助表示赞赏。谢谢。

我使用了来自 react-transition-group 的 CSS 过渡，以使不同路线之间的过渡动​​画化。下面是代码的大致样子：

动画效果很好，但我发现安装和卸载组件的顺序不是我想要的方式。问题是如果我使用没有动画的相同代码，当我从路由“/”转到路由“/login”时，首先 HomeComponent 被卸载，然后才反应安装 LoginComponent。但是，使用动画，当发生相同的路由更改时，首先会安装 LoginComponent，然后会卸载 HomeComponent。在我看来，这种行为显然不是预期的。

所以问题是：是否可以在我的应用程序中保留动画路线并更改组件安装和卸载的奇怪顺序？如果不是，我怎么知道，在我的 LoginComponent 中，HomeComponent 现在已被卸载而没有操作任何全局状态？

我有一个导航栏，我需要使用React Anime. Navbar 包含Link组件，它获取delay和duration作为道具。

这是导航栏的代码：

这是 Link 组件的代码：

任务是处理动画状态，如果动画已经在当前浏览器会话中传递，则不在页面重新加载时对其进行动画处理。

我的第一个想法是使用sessionStorage，但后来我决定isPassed在导航栏组件中声明一个新变量，并根据其值对链接进行动画处理。所以......我可以isPassed在动画传递时以某种方式改变值吗

当 Redux reducer 的属性更新时，如何使用 React Native LayoutAnimation 实现重新排序动画？

我players在 Redux 减速器中有一个数组，看起来像这样：

玩家减速器.players：

当 reducer 通过 websocket 响应获取更新时，相应数组对象上的 score 属性会发生变化。我可以使用 Chrome redux 浏览器插件确认每个对象状态保持不变，并且显示的差异证明了这一点；

当 reducer 更新我的功能组件的状态时，我playersReducer.players使用函数对数组重新排序，sort以按分数对玩家进行排序，如下所示：

我已经LayoutAnimation.configureNext()在函数组件的主体中进行了设置，它确实成功地渲染了一个新项目，该项目从另一个 reducer 中添加了数组，这证明了 LayoutAnimation 正在工作；

如何使用LayoutAnimation动画播放器组件上的重新排序效果？我正在尝试实现这样的目标：

我最近看到了 Stripe 网站，其中有一个带有卡片图像的部分，它自动填充详细信息，然后滚动到下一个选项卡并再次显示。请参阅网站的此部分https://stripe.com/en-in/payments

请参阅上面链接到条带站点的这一部分：

我认为这些是小部件。我是动画新手。谁能建议如何制作这些并使用 Next.js/React.js 嵌入我们的网页？

我正在开发一个使用 React.js 构建的网络应用程序。我想在 div 进入视口时触发动画。目前，我可以运行动画，但动画不会等待 div 进入视口。

假设用户在安装组件之前访问该站点并切换到另一个选项卡。因此，在用户切换回此选项卡之前，假设组件已安装，但动画应该仅在用户切换回此选项卡时开始。

我已经使用react -transition-group包中的CSSTransitionGroup实现了动画。我试图弄清楚如何在 div 进入视口时触发动画。

RequestFormComponent.js

CSS

我知道这可以通过使用 JQuery 来实现，但是有没有办法只使用 React.js 来实现它？即使使用 JQuery 和 React 可以解决此问题，也请提出您的建议。

谢谢您的帮助！

我正在屏幕上使用 ScrollView 实现动画标题。在scrollView onScroll 上，我还在scrollview Y 位置的基础上设置myview。像这样

现在在实现动画标题时，我需要在滚动上添加动画代码。这个

当我将两个代码一起添加并调用滚动视图的 onScoll 时，它们不起作用......而它们分别起作用。

像这样调用 onScoll

我面临一个与使用 setState（功能组件）反应原生动画相关的特定问题，我使用 setInterval 进行了倒计时，并且每一秒我都会创建一个 setState，每当我有一个 setState 时，动画都会重置并重新启动，我不知道为什么，我也在使用这样 const opacity = new Animated.Value(0) const animatedValueRef = useRef(opacity)的 useRef ，动画是这样循环的（每个 250 毫秒）

谢谢！

编辑：这就是我实现倒计时的方式：

（代码需要重构）