反应原生地图（Airbnb）+标记动画

我想为React原生地图{Google}标记设置动画效果。反应原生地图（Airbnb）+标记动画

我尝试使用动画模块，但标记不允许复杂的样式。

是否有任何功能修改标记的坐标，并给它的动画？像：

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

我曾尝试用：

<MapView.Marker.Animated>

但我不能制造出效果。是否有一个函数将坐标编辑为动画放置？

来源

2017-07-15 0123

反应原生地图标记默认为“不动画”，它不能接受gif图像，精灵，动画api等等。。但是，通过图像转换，我可以通过艰难的方式为其制作动画。这里是我的例子：

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

这就是我现在做动画的过程。

来源

2017-08-23 02:16:11

反应原生地图（Airbnb）+标记动画

回答

相关问题