反應原生地圖（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）+標記動畫

回答

相關問題