主要目标是在我的平面列表中同时播放动画,而不是所有动画都在播放。
我一直在研究这个问题的解决方案,并且我发现每个动画在平面列表中都必须是唯一的。所以我使用item.id
来处理它。这是我到目前为止所得到的:
anim_star = (id) => {
// Alert.alert(id);
let progress = this.state.progress;
progress[id] = new Animated.Value(0);
console.log(this.state.progress);
this.setState({ progress });
Animated.timing(this.state.progress[id], {
toValue: 1,
duration: 2000,
easing: Easing.linear,
}).start();
}
_children: array(0)
表示没有播放动画。为了证明,我收集了我的标准动画时的结果,当我点击任何人时,所有动画都被激活。 (这不是我需要的。)
这是我的构造函数的样子:
constructor(props)
{
super(props);
this.state = {
isLoading: true,
id: '',
dataSource: '',
progress: {},
};
我不确定是否应该将空对象保留在progress
中,但似乎没有。
最后,这是我的其余代码:
<FlatList
data={ this.state.dataSource}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <View>
<Card>
<View>
<TouchableOpacity
onPress={this.anim_star.bind(this, item.id)}
style={{position:'absolute', height: '100%', width: '100%',}}>
<Animation
progress={this.state.progress[item.id]}
source={require('../Animations/favourite_app_icon.json')}
style={{ height: '100%', width: '100%', position: 'absolute'}}
resizeMode={`contain`}
/>
</TouchableOpacity>
</View>
</Card>
</View>
}
keyExtractor={(item, index) => index.toString()}
removeClippedSubviews
/>
就在这里,我正在绑定我点击的动画的id。当我单击动画时,会弹出正确的ID,但动画不会播放。我可能没想到这一点,我似乎无法用这段代码重新开始动画。