我一直在尝试使动画在mapview标记上进行,但到目前为止还没有运气。我尝试了很多不同的版本,但是它们都变平了。我正在从react-native导入Animated,这是我的标记:

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

最佳答案

Animated API并不是真的那样。首先,您需要实例化一些Animated值。像这样:

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您要做什么。超级简单的例子:

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。它具有许多不同的效果和放松效果。

07-24 09:48
查看更多