时间戳

首页 > 解决方案 > React-native - 动画 MapViewMarker

javascript - React-native - 动画 MapViewMarker

问题描述

我一直试图让动画在地图视图标记上进行，但到目前为止还没有运气。我尝试了很多不同的版本，但都失败了。我正在从 react-native 导入 Animated ，这是我的标记：

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

标签： javascriptreactjsreact-native

解决方案

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。它有许多不同的效果和缓动可用。

推荐阅读