问题标签 [react-animated]

过去，我曾经以非常高的帧速率为 a设置LayoutAnimation.scaleXY动画。现在，我想用动画来实现类似的高帧率。flexViewAnimatedflex

我知道我不能useNativeDriver: true用来制作动画flex。

LayoutAnimation总是在本地运行动画吗？如果是这样，它如何在不能运行flex动画Animated的情况下运行动画useNativeDriver: true？

有没有解决的办法？我想flex与许多其他动画（例如opacity、translate和scale）并行运行我的动画，并且没有useNativeDriver: true动画是不可接受的断断续续的。

PS我的问题解决了，但和/或flex有什么显着差异吗？heightwidth

我正在尝试将此图https://bl.ocks.org/scresawn/0e7e4cf9a0a459e59bacad492f73e139转换为反应组件。到目前为止，我没有在屏幕上渲染任何东西。如果有人可以查看并提出改进代码的建议，那就太好了。此外，我将从另一个组件向组件传递数据，而不是获取 CSV 文件。任何帮助将不胜感激。

我正在玩 React Native 中的动画。想要构建一个允许用户在任何时候触摸屏幕的屏幕。当他们这样做时，一个圆圈应该出现在他们手指的位置，并跟随它。当它们释放时，圆圈应该缩小到零。

我开始关注本教程，这是一个类似弹簧的动画，您可以在其中拖动一个预先存在的正方形（从屏幕中心开始），它会在释放时弹回。

在我的情况下，圆圈应该没有预先存在的位置，这是导致问题的原因。如果我用 初始化我的组件状态，pan: new Animated.ValueXY()然后触摸屏幕，圆圈从左上角开始，而不是我的手指所在的位置。我尝试了各种其他解决方案，都替换了下面 onPanResponderGrant 方法中的注释行，但似乎无法弄清楚。

我如何制作一个让组件跟踪我的手指而不开始或返回任何地方的动画？

这是组件的代码：

这是我的替代尝试（替换注释行）：

和这个：

两者的行为似乎相似，每次移动后都会重置左上角的圆圈位置，并且除非我从那个原点开始触摸，否则不会完全跟踪我的手指位置。

任何想法如何正确地做到这一点？

我正在尝试在 React Native 上使用 Animated 创建一个组件，其中一个圆圈从按下的点扩展到整个屏幕。

这个想法是本质上是一个颜色的轮播，比如说：

您从颜色 0 作为背景开始，然后，当您按下屏幕时，颜色 1 的圆圈会从按下的位置（从零开始）展开，并占据整个屏幕。此时，随着动画完成，colorIndex增加，动画圆圈同时擦除，因此，我们无缝地移动到下一个颜色，现在是背景。（例如，我们现在使用“黑色”作为背景色）。

然后，当您再次按下时，该过程重复，扩大一圈“绿色”以填充屏幕，然后将绿色更新为 BG 颜色，等等。

（为了澄清我在动画中寻找的内容，请查看此 GIF（减去图标等））。

我正在尝试使用 Animated 进行此操作，并在按下主背景组件（TouchableHighlight）时调用如下代码：

然后的想法是，在render函数中，我设置left我top的absolute定位圆组件的和等于位置，我设置width和height等于diameter，以及borderRadius（diameter / 2.0不起作用，因为diameter是一个动画对象，而不是一个数字）。

这里有两个我似乎无法弄清楚的问题（都可以在这个问题底部的 GIF 中看到）：

1. 每个动画前都有黑色闪光。它涵盖了整个 TouchableHighlight 组件。而且它总是黑色的。不管我穿什么颜色。组件中没有硬编码的黑色 (!)。
2. 位置决定了圆的边缘（或者更准确地说，它是在其中转录的正方形），而不是中心。我希望它确定圆心，以便圆从我的印刷机向外扩展。

我假设没有所有代码，#1 真的很难推理。所以我将在下面粘贴完整的组件代码。我希望的第二个在不玩它的情况下更具概念性/易于理解。

谁能想到一个断言圆心位置的好方法？我担心它需要根据圆的直径left: location.x - diameter._value / 2（有更好的想法吗？

这是完整的组件代码：

这是当前的功能（在 iPhone X 模拟器中）：

当用户按下按钮时，我在图像上使用 Animated 以编程方式缩放图像。

有图像和缩放图像。

如何计算两个图像左上角之间的距离？

偏移量不应该是吗？

(dx, dy) = ((originalWidth-(originalWidth X scale))/2, (originalWidth - (originalHeight X scale))/2)

我正在使用 panResponder，我正在创建一个跟随用户手指的简单视图。我查了一下，发现这个例子有效并且我正在使用它，但我无法理解它。

因此，据我所知，当用户移动手指时，会使用 Animated.event 调用 onPanResponderMove，其中将 this.state.pan.x 和 this.state.pan.y 设置为手势的 delta x 和 y ，这意味着如果用户将手指移动到底部 50 度和向右移动 50 度，this.state.pan 将类似于 {x:50,y:50}。

现在我为什么要设置 onPanResponderGrant 的偏移量？从我看到的偏移量将是 50（以前的值 + 50 取自 this._val.x 的 dx，当 ANimated.event 在 onPanResponderMove 上设置值时，该 _val.x 已经设置）所以视图应该移动 100？然后我们清除 this.state.pan 的值？

有人可以更好地解释我发生了什么吗？也许有一些简单的数字或一步一步的例子？希望你能帮助我，整整一天都在试图弄清楚。谢谢！

我想使用 React Native Animated Component 将多个视图合并为一个。

细节

• 每个视图应该位于不同的位置。
• 每个View应该在自己的位置上逐渐扩大width、height。
• 当达到最大宽度、高度时，所有视图应合并为一个位于所有视图位置中间的视图。
• 所有 View 的大小（宽、高）的变化都应该由屏幕的缩放来决定。（你不用担心，因为我已经知道这种方式了。）

我正在尝试为恐慌症患者制作一个呼吸应用程序以循环扩大和缩小一个圆圈。我正在尝试使文本随动画及时更改。呼吸状态是圆圈中显示的文本变量 - 它可以是“吸入”、“保持”或“呼出”。动画使圆圈在breathTimings.in 的持续时间内从60% 变为全尺寸，然后它应该变为说“hold”，然后暂停breathTimings.hold，然后在说“exhale”的同时缩小回60%。

目前这不起作用（用expo测试它）请有人给我关于去哪里的建议。谢谢

我有一个循环动画，我希望用户能够更改其时间。我使用 redux 进行了设置，以便当用户在设置中更改它们时，被动画的组件接收新的计时作为道具。然而，这不会改变序列的时间（我猜这是因为序列分配了变量的值，而不是引用改变的变量的值）

当新道具传递给它时，我将如何改变时间？

我正在使用 gif 制作动画登录屏幕，但它仅在世博会上动画，当我构建 apk 时，gif 保持静态。