问题标签 [react-native-animatable]

概括

我在手风琴标题中有一个“箭头下拉”展览图标，我试图在按下时动画翻转 180 度，因此用户知道它可以关闭或打开。这些标头是动态呈现的；我不知道会有多少进来，因为它基于用户通过 Web 套接字 API 在其他软件中打开的对象的数量。

我让动画工作，但它动画所有图标，而不仅仅是我点击的那个。

此外，为了清楚代码是如何工作的，我使用了代码部分的 import 语句中显示的库中的手风琴组件。

我试过的

我试图效仿这种方法： React Native: Only Animate One of Some Elements

它似乎与我的问题略有不同（它们仅使用字体大小），因此我无法成功将此解决方案应用于我的代码。

我注意到在他们的代码中，他们的标签与该州的字体大小相关联。我敢肯定，这就是为什么他们的各个图标在点击时动画，而不是全部。但是，我不确定如何将这个概念应用到我的代码中。

状态包含动画值

这是按下标题时调用的函数。

这是手风琴调用的函数，用于单独呈现每个标题。IE 如果组件安装有 10 个标头，则此函数会被调用 10 次。

下面是点击标题时触发的手风琴功能。这是我启动动画功能的地方。

附加信息

我确实尝试模拟类似于小吃链接的尝试。它涉及将状态更改为：

并调整所有其他函数以处理带有数组值的输入。我还将图标的样式设置为 this.state.animValue 的 fontSize，以尝试个性化每个组件。

我在尝试过程中确实遇到了这个错误：

TypeError: TypeError: undefined is not an object (评估 '_this.state.animValue[i].interpolate')

我想重置动画并随着道具的变化重播，但它一开始只能工作一次。我使用了react-native-animatable npm 库，但找不到重置动画的解决方案。

这是我的动画代码。

帮我。

我正在尝试创建一个简单的 React Native 动画：

selected它位于功能组件内部，并且在属性更改时触发。该函数被正确调用（在selected更改时触发，不会多次触发或值不更改等），但我收到以下错误：

RCTJSONStringify() encountered the following error: Invalid number value (NaN) in JSON write

我还提供了各种选项，例如文档中记录的摩擦/张力，但我仍然遇到相同的错误，并且无论我尝试哪种组合，我都会遇到 TypeScript linter 错误：

当我切换到线性动画时，例如Animated.timing(flexValue, {duration:300, easing: Easing.linear, toValue: flexValueForSelected(selected)}).start();它工作得很好，所以问题是弹簧动画特有的（这是我在视觉上想要实现的）。

我究竟做错了什么？（我在 React Native 0.61.2 上）

我想开始animation sequence几次。

我通过编写startAnimation在按下按钮时调用的代码来测试它。动画在第一次运行时运行。在第一个动画完成后单击第二个按钮 Cannot read property 'start' of undefined时会发生错误。

此更改startAnimation不会导致错误，但您将无法调用，因为它每次stopAnimation都会调用不同的。AnimationSequnce

多次使用动画的最佳方式是什么？

环境：

问题：

切换到另一个标签时如何停止滚动滑动？

例子：

当我滚动内容并将手指从屏幕上移开时，内容继续滚动，即滑动。我需要当我切换到另一个选项卡时，此滚动幻灯片会立即停止。也就是说，该选项卡中的内容没有在后台滚动。

应用程序.js

我正在尝试制作类似于这张图片的动画屏幕，但我没有正确完成。b 我想要我上传的这张照片。我不擅长动画，请帮助我改进我的代码。我被动画困住了。

这就是我尝试过的。

目标：创建一个主按钮，当按下该按钮时，它会沿 Z 轴旋转 180 度，并启动一个动画，用于显示次要选项按钮的不透明度和平移（Y 轴），一旦按下主按钮就会显示。然后反转整个过程以折叠次要选项。

主按钮实现：

MainButton.js：

OptionItem.js：

问题：主按钮按预期显示和动画。它在展开和折叠时正确地沿 Z 轴旋转。问题是 OptionItemBtn 根本不渲染。为什么？

所以我知道这已经在多个其他线程中进行了处理，但这个有点独特，我使用 React Native 构建了这个应用程序，它使用滑动手势来动画视图滑入视图。iOS 几乎完美无缺，但是当在 android 上运行时，任何超过堆栈按钮中的第一个视图的任何内容按下视图内部都会停止工作，我相信这是因为父视图本质上是滑出视图，因此没有触摸正在注册. 我对如何解决这个问题有点困惑，这是一种临时实现，所以也许有我忽略的原生包的反应。

我在这里用 Snack expo Animated Header制作了一个示例代码

我遇到的问题是我的动画不够流畅。看起来它在颤抖。

演示视频YouTube 视频

我似乎找不到这里的问题，还试图在 ScrollView 中摆弄 scrollEventThrottle、alwaysBounceVertical、bounces、bouncesZoom 道具。

问题

我有一个显示文本的应用程序。它需要在 X 时间内滚动到页面底部。现在它正在工作，但并不顺利。它一点一点地进行，因为我调用该函数每 1000 毫秒滚动一次，将滚动位置设置为 X。

目标

使用 ScrollView 和 Animate 进行平滑滚动。滚动需要持续 1000 毫秒并且需要是线性的，没有缓动。（因为我将每 1000 毫秒调用一次函数以继续滚动）。还是有更好的选择？

我试过什么

我已经尝试了一切，包括查找教程和在这里挖掘。有很多关于滚动的东西，但没有什么能帮助我。也许它真的很容易，这就是为什么它什么都没有，我希望它是。

还尝试了“LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);” 选项。使用它时，我的屏幕上有很多动画，而不是滚动。

这是我当前的滚动设置，如我的问题中所述：

*设置间隔每1000ms滚动一次。

在功能scrollSong中滚动。（_scrollTo = 要滚动到的位置）：

滚动视图。在开始和结束滚动时，scrollSong间隔会暂停。

我希望你能帮助我。如果您需要任何信息，请告诉我。