javascript - React-native - 动画 MapViewMarker

Question

我一直在尝试让动画在 map View 标记上运行，但到目前为止还没有成功。我尝试了很多不同的版本，但它们都失败了。我正在从react-native导入Animated，这是我的标记:

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

Answer 1

动画 API 并不是真正以这种方式工作。首先，您需要实例化一些动画值。像这样的事情:

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

我还会包装您想要设置动画的标记组件，如下所示:

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

您需要手动启动动画并告诉 API 您想要什么。 super 简单的例子:

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()
}

我强烈建议花一些时间使用 Animated API 。它有许多不同的效果和缓动可用。