React Native通過地圖動態添加動畫

Question

我很難搞清楚爲什麼我無法爲卡片組添加一個簡單的動畫。每次按下按鈕時，我都想爲單張卡片製作動畫。我可以在一張卡片上實現此功能，但在第二次渲染後，動畫不再適用。我正在使用setState來跟蹤按鈕按壓和一點邏輯，以將Animated.View應用到列表中下一個卡上。所以在我看來，當應用程序第一次運行卡組中的所有卡都顯示時，用戶按下按鈕，第一張卡被刪除等等等等。

export default class Cards extends React.Component { 
    componentWillMount() { 
    this.animatedValue = new Animated.ValueXY(0, 0); 
    } 
    state = { index: 0 }; 

    renderCards =() => { 
    console.log("App started"); 
    const { data } = this.props; 
    return data.map((cards, idx) => { 
     if (idx < this.state.index) { 
     return null; 
     } 

     if (idx === this.state.index) { 
     console.log("animated being added to " + idx); 
     console.log(` the state is ${this.state.index} in renderCards `); 
     return (
      <View> 
      <Animated.View style={[this.animatedValue.getLayout()]}> 
       <Card> 
       <Text>Animated Value</Text> 
       </Card> 
      </Animated.View> 
      </View> 
     ); 
     } 

     return (
     <View> 
      <Card> 
      <Text>No Animation</Text> 
      </Card> 
     </View> 
    ); 
    }); 
    }; 
    nextCard =() => { 
    Animated.spring(this.animatedValue, { 
     toValue: { x: 500, y: 0 } 
    }).start(); 
    this.setState({ index: this.state.index + 1 }); 
    }; 
    render() { 
    return (
     <View style={styles.cardContainer}> 
     {this.renderCards()} 
     <Button 
      large 
      icon={{ name: "envira", type: "font-awesome" }} 
      title="Press me" 
      style={styles.button} 
      onPress={() => this.nextCard()} 
     /> 
     </View> 
    ); 
    } 
} 

第二次呈現兩張牌消失，但我不明白爲什麼會發生這種情況。

我不確定我做錯了什麼。

謝謝。

Answer 1

主要問題是動畫值（this.animatedValue）未被重置。

'active card'的渲染視圖（其中idx === this.state.index）固定爲this.animatedValue的值。您需要在動畫後將此值重置爲0,0。現在，它保持在x：500，y：0並且正在渲染下一張卡在屏幕外（消失）。

我會更新nextCard功能做到這一點在動畫回調：

nextCard =() => { 
    Animated.spring(this.animatedValue, { 
    toValue: { x: 500, y: 0 }, 
    }).start(() => { 
    this.animatedValue = new Animated.ValueXY(0, 0); 
    this.setState({ index: this.state.index + 1 }); 
    }); 
}; 

注意更新animatedValue和設置狀態事項狀態觸發重新繪製的順序。