React Native Animated-以新闻为中心展开圆圈

Question

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

想法是基本上有一个颜色的轮播，例如：

const colors = ['white', 'black', 'green', 'blue', 'red', 'pink'];

以颜色0作为背景开始，然后，当您按屏幕时，颜色1的圆圈从按下时开始（从零开始）扩展，并占据整个屏幕。在这一点上，动画完成后，colorIndex会增加，同时动画圆也会被擦除，因此，我们无缝地移到了下一个颜色，现在是背景。 （例如，现在我们将背景颜色设为“黑色”）。

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

（要弄清我在动画中寻找的内容，请检出this GIF（减去图标等）。

我正在尝试Animated，并按如下所示的代码在按下主要背景组件（TouchableHighlight）时调用：

triggerSwipe(event) {
  this.setState({ location: { x: event.nativeEvent.locationX, y: event.nativeEvent.locationY } });

  Animated.timing(
    this.state.diameter,
    { toValue: Dimensions.get('window').height * 2, duration: 500 },
  ).start(() => {
    this.state.diameter.setValue(0);
    this.setState({ colorIndex: this.state.colorIndex + 1 });
  });
}

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

我似乎无法弄清这里发生的两个问题（在此问题底部的GIF中都可见）：

1. 每个动画之前都有一个黑色闪烁。它涵盖了整个TouchableHighlight组件。而且它总是黑色的。无论我穿什么颜色。组件中没有硬编码的黑色（！）。
2. 位置确定圆的边缘（或更准确地说，确定圆的边缘）而不是中心。我希望它确定圆的中心，以便圆从我的压力机向外扩展。

我假设没有所有代码实际上很难推理＃1。因此，我将在下面粘贴完整的组件代码。我希望的第二个更概念化/更容易理解而不玩。

有人能想出一个断言圆的中心位置的好方法吗？我担心它需要根据其直径（diameter）不断更新圆的左/上位置，据我所知，这将摆脱Animated的所有本机性能优势。还有更好的主意吗？

这是完整的组件代码：

left: location.x - diameter._value / 2

以下是当前功能（在iPhone X模拟器中）：

Answer 1

如果您希望圆从点击点开始扩展，我建议您使用ModelSerializer而不是设置width / height属性的动画。这样，您只需要为一个属性设置动画即可。

您仍然需要使圈子居中。假设您将宽度/高度设置为100px。现在，您将transform: scale()设置为初始大小，并且可以根据需要将圆圈扩大到1以上，这样它将显示全屏。您可以玩数学来获得正确的时间/感觉。

使用这种方法，您仍然会遇到左上角放大的同样问题。那是因为您已将其放置在那里。顶部/左侧是相对于父容器的。现在，您需要使圆相对于自身居中。这意味着您将需要添加另一个transform: scale(0)属性。 transform。这将始终使圆相对于其中心位置居中。

开始转换：transform: translateX(-50%)translateY(-50%) 放大的变换：transform: translateX(-50%)translateY(-50%)scale(0)，其中transform: translateX(-50%)translateY(-50%)scale(x)很大，您希望圆变大。