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

【问题标题】：How to animate marker and polyline with react-native-maps如何使用 react-native-maps 为标记和折线设置动画
【发布时间】：2017-12-27 09:22:52
【问题描述】：

我正在使用 react native maps、redux、redux thunk（以及许多其他很酷的东西）

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

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

标记上的脉冲效果，
用精美的动画绘制从起点到终点的折线
在折线上制作渐变色

谢谢大家！

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

您似乎无法在 React Native 地图中为折线的绘制设置动画，但您可以使用以下代码为其赋予渐变颜色（仅限 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

【讨论】：