1

主要目标是在我的平面列表中启动一个动画，而不是同时播放所有动画。

我一直在研究这个问题的解决方案，我发现每个动画都需要在平面列表中是唯一的。所以我曾经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，但动画不播放。我可能想通了，我似乎无法让动画重新开始使用这段代码。

4

0 回答 0