Question

我使用反应原生地图，redux，redux thunk（以及许多其他很酷的东西）

有关如何为我的标记和我的折线设置动画的任何想法都是这样的 map animation on dribbble

我的地图上已经有标记和折线，我知道如何移动地图。我想添加3种效果：

标记上的脉冲效果，
使用精美动画从开始到到达绘制折线
在折线上制作渐变色

谢谢大家！

Answer 1

似乎您无法在反应原生地图中为折线的绘制设置动画，但您可以使用以下代码为其提供渐变颜色（仅限iOS）：

import MapView, { Polyline } from 'react-native-maps';

<MapView>
<Polyline
    coordinates={[
        { latitude: 37.8025259, longitude: -122.4351431 },
        { latitude: 37.7896386, longitude: -122.421646 },
        { latitude: 37.7665248, longitude: -122.4161628 },
        { latitude: 37.7734153, longitude: -122.4577787 },
        { latitude: 37.7948605, longitude: -122.4596065 },
        { latitude: 37.8025259, longitude: -122.4351431 }
    ]}
    strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
    strokeColors={[
        '#7F0000',
        '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
        '#B24112',
        '#E5845C',
        '#238C23',
        '#7F0000'
    ]}
    strokeWidth={6}
/>

以下是动画标记的示例：

import Mapview, { AnimatedRegion, Marker } from 'react-native-maps';

getInitialState() {

    return {
    coordinate: new AnimatedRegion({
      latitude: LATITUDE,
      longitude: LONGITUDE,
    }),
  };
}

componentWillReceiveProps(nextProps) {
  const duration = 500

  if (this.props.coordinate !== nextProps.coordinate) {
    if (Platform.OS === 'android') {
      if (this.marker) {
        this.marker._component.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );
      }
    } else {
      this.state.coordinate.timing({
        ...nextProps.coordinate,
        duration
      }).start();
    }
  }
}

render() {
  return (
    <MapView initialRegion={...}>
      <MapView.Marker.Animated
        ref={marker => { this.marker = marker }}
        coordinate={this.state.coordinate}
      />
    </MapView>
  );
}

此处可以看到更多示例：https://github.com/react-community/react-native-maps

如何使用react-native-maps为标记和折线设置动画

1 个答案: