Question

我已经使用MapView.Marker创建了一个mapview和一些标记。我正在使用滚动视图在标记之间切换。开关工作正常，将当前标记居中。

当用户切换到当前标记时，我还创建了一些动画。我为此使用了插值（不透明度和比例）。但是，动画无效。我现在正在Android上进行测试。这是我的代码：

   const interpolations = this.state.markers.map((marker, index) => {
          const inputRange = [
            (index - 1) * CARD_WIDTH,
            index * CARD_WIDTH,
            ((index + 1) * CARD_WIDTH),
          ];
          const scale = this.animation.interpolate({
            inputRange,
            outputRange: [1, 2.5, 1],
            extrapolate: "clamp",
          });
          const opacity = this.animation.interpolate({
            inputRange,
            outputRange: [0.35, 1, 0.35],
            extrapolate: "clamp",
          });
          return { scale, opacity };
        });

        return (
          <View style={styles.container}>
            <MapView
              ref={map => this.map = map}
              initialRegion={this.state.region}
              style={styles.container}
            >
              {this.state.markers.map((marker, index) => {
                const scaleStyle = {
                  transform: [
                    {
                      scale: interpolations[index].scale,
                    },
                  ],
                };
                const opacityStyle = {
                  opacity: interpolations[index].opacity,
                };
                return (
                  <MapView.Marker key={index} coordinate= {{latitude: marker.location.coordinates[0], longitude: marker.location.coordinates[1]}}>
                    <Animated.View style={[styles.markerWrap,opacityStyle]}>
                      <Animated.View style={[styles.ring, scaleStyle]} />
                      <View style={styles.marker} />
                    </Animated.View>
                  </MapView.Marker>
                );
              })}
            </MapView>


  markerWrap: {
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 17,
    borderWidth: 2,
    overflow: "hidden",
    width: 24,
    height: 24,
    borderColor: "rgba(130,4,150, 0.5)",
    backgroundColor: "rgba(130,4,150, 0.3)",
    position: "absolute",
  },
  marker: {
    borderRadius: 4,
    borderWidth: 1,
    width: 8,
    height: 8,
    backgroundColor: "rgba(130,4,150, 0.9)"
  },
  ring: {
    width: 24,
    height: 24,


  },

请告知您的建议。

谢谢

Answer 1

这是一个已知问题。以下是3年前的官方文档中添加的内容-

问题：由于android需要将其标记视图呈现为位图，因此动画API可能与标记视图不兼容。不确定是否可以解决此问题。

您可以在这里找到它-https://github.com/react-native-community/react-native-maps，在“使用带有动画API的MapView”部分。

为什么我的反应本机视图中的MapView.Marker动画不起作用？

1 个答案: