動畫React Native中的對象數組

在React中，動畫似乎總是綁定到this.state中的一個屬性。但是如果我在視圖中有多個對象需要動畫呢？例如，如果我有一個具有多個圖像的ListView，並且我想在加載到ListView時爲這些圖像的不透明度設置動畫效果？動畫React Native中的對象數組

render() { 
    //var _scrollView: ScrollView; 
    return (
    <View style={styles.container}> 
     <ScrollView 
     style={styles.scrollView}> 

     <ListView 
      initialListSize={1} 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow.bind(this)} 
      style={styles.postList} 
      /> 

     </ScrollView> 

    </View> 
); 
} 

renderRow(post) { 
    //var postItemHeight = windowSize/2 
    return (
    <View style={styles.postItem}> 
     <Image 
     style={styles.postImage} 
     source={{uri: post.cover_image}} 
     onLoad={(e) => this.imageLoaded()}> 

     </Image> 
    </View> 
); 
} 

imageLoaded() { 
    // now animate the image opacity 
    // for every image that is loaded into the listview 
}

來源

2016-03-11 botbot

我不明白你是如何動畫你的組件。用CSS，我想？ – Chris

@克里斯我不知道什麼是最好的方式，這就是爲什麼我在這裏。不透明度在技術上是一個CSS屬性，但不確定是否有幫助。我正在考慮使用動畫https://facebook.github.io/react-native/docs/animations.html – botbot

如果你只是「動畫化」一個組件的不透明度，我想只是改變CSS會更容易。雖然，我不熟悉你剛纔的聯繫，也不知道它有多可行。所以，你只是想讓組件的不透明度在短時間內逐漸改變，而不是立即改變。正確？如果你願意，我可以提供一個css解決方案。 – Chris

沒有理由的Animated值需要住在組件的狀態 - 這僅僅是個例子來說明如何展示如何做到這一點。如果你願意，你可以保留一個Animated值的狀態，把它們放到你的Flux商店，或者你想要做的。

然而，在您的特殊情況下，最簡單的解決方案是創建一個代表您的ListView單個圖像行的組件。然後你可以使用那個組件的個人狀態來管理它的動畫。

例如：

const FadeImage = React.createClass({ 
    displayName: 'FadeImage', 
    propTypes: Image.propTypes, 
    getInitialState() { 
    return { 
     opacity: new Animated.Value(0) 
    }; 
    }, 
    setNativeProps(nativeProps) { 
    this._image.setNativeProps(nativeProps); 
    }, 
    fadeIn() { 
    Animated.spring(this.state.opacity, { 
     toValue: 1, 
     friction: 10, 
     tension: 60 
    }).start(); 
    }, 
    render() { 
    return (
     <Animated.View style={{opacity: this.state.opacity}}> 
     <Image {...this.props} onLoad={this.fadeIn} ref={component => this._image = component} /> 
     </Animated.View> 
    ); 
    } 
});

這是一個簡易替換爲Image，所以你可以使用它就像你經常Image組件。

來源

2016-03-11 10:23:19 jevakallio

非常有幫助，特別是Animated.View和添加新的Animated.Value（x）非常感謝@jevakallio。 – botbot

動畫React Native中的對象數組

回答

相關問題