Réagissez l'animation Native Map (Airbnb) + Markers

Question

Je souhaite animer les marqueurs React-native-maps {Google}.

J'ai essayé avec le module animé, mais les marqueurs ne permettent pas de styles complexes.

Y at-il fonction de modifier les coordonnées du marqueur et donner l'animation ?, comme un:

marker.setAnimation(google.maps.Animation.BOUNCE); 

J'ai essayé avec:

<MapView.Marker.Animated> 

Mais je ne peux pas créer l'effet . Y a-t-il une fonction qui édite les coordonnées comme une goutte d'animation?

Answer 1

Réagir le marqueur de carte natif est par défaut "non animé", il ne peut pas accepter les images gif, les sprites, l'animation, etc. . Cependant, j'ai été capable de l'animer à travers la transition de l'image. Voici mon exemple:

constructor(props, context) { 
    super(props, context); 
    this.state = { 
    startTransition: 1, 
    endTransition: 4, 
    }; 
} 

componentDidMount() { 
    this.animate(); 
} 

animate() { 
    const {startTransition, endTransition} = this.state; 
    if(startTransition < endTransition){ 
    let currentTransition = startTransition + 1; 
    this.setState({startTransition: currentTransition}); 
    } else { 
    this.setState({startTransition: 1}); 
    } 
    let x = setTimeout(()=>{ 
    this.animate() 
    }, 500); 
} 

renderImg(imgTrans) { 
    if(imgTrans === 1) { 
    return require('./walk1.png'); 
    } 
    if(imgTrans === 2) { 
    return require('./walk2.png'); 
    } 
    if(imgTrans === 3) { 
    return require('./walk3.png'); 
    } 
    if(imgTrans === 4) { 
    return require('./walk4.png'); 
    } 
} 

render() { 
    const {startTransition} = this.state; 
    return (
    <MapView.Marker 
     coordinate={tapCoords} 
     image={this.renderImg(startTransition)} 
    > 
) 
} 

Voici comment j'ai fait l'animation pour l'instant.