React-native-动画MapViewMarker

Question

I have been trying to get the animation going on a mapview marker but so far no luck. I have tried a bunch of different versions but they all fall flat. I am importing Animated from react-native and this is my marker:

<MapView.Marker.Animated
           key={marker.name}
           coordinate={{
           latitude: marker.lat,
           longitude: marker.lng,
           animation: Animated.DROP,
         }}

Answer 1

The Animated API doesn't really work that way. First, you need to instantiate some Animated values. Something like this:

constructor(props) {
  super(props)
  this.state = {
    animatedTop: new Animated.Value(0)
  }
}

I would also wrap the marker components you'd like to animate, something like this:

render() {
  return (
    <Animated.View style={{top: this.state.animatedTop}}>
      <MapView.Marker {...} />
    </Animated.View>
  )
}

You need to manually kick off the animation and tell the API what you're after. Super simple example:

componentDidMount() {
  Animated.timing(this.state.animatedTop, {
    toValue: 200, // position where you want the component to end up
    duration: 400 // time the animation will take to complete, in ms
  }).start()
}

I highly recommend spending some time with the Animated API . It has a bunch of different effects and easings available.