我一直在尝试使动画在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。它具有许多不同的效果和放松效果。