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

Question

我正在使用 React Native map 、redux、redux thunk(以及许多其他很酷的东西)

关于如何像这样为我的标记和折线制作动画的任何想法 map animation on dribbble

我的 map 上已经有了标记和折线，而且我知道如何移动 map 。我想添加 3 种效果:

• 标记上的脉冲效应，
• 用精美的动画从头到尾绘制多段线
• 在折线上做一个渐变色

谢谢大家!

Answer 1

似乎您无法在 React Native map 中为多段线的绘制设置动画，但您可以使用以下代码(仅限 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