Question

我一直在努力解决这个问题。我设置代码的方式是我在一个平面列表中有动画，它为我有多少数据创建了一个动画。例如，我的JSON数据包含8个类别，我的平面列表自动包含8个动画。这是我的代码：

<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

/＆GT;

就在这里，我一直试图给这些动画一个唯一的id（item.id）。这是我用来绑定的函数：

    anim_star = (id) => {

  let progress = this.state.progress;
  progress[id] = new Animated.Value(0);

    this.setState({ progress });
console.log(this.state.progress);
  Animated.timing(this.state.progress, {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
  }).start();

}

我做了一个console.log来查看我的结果，我可以看到正确显示的ID，但我认为它没有正确对应。动画根本不播放。当我取消[item.id]中的progress=this.state.progress时，动画会起作用，但该平面列表中的每个动画都会播放。我想用正确的id播放那个动画。

这是我的控制台结果：

https://imgur.com/a/7Ja3Tlk

最后这里是构造函数的样子：

    constructor(props)
{
  super(props);

  this.state = {
  isLoading: true,
  id: '',
  dataSource: '',
  progress: {}, 
};

另外要注意的是，当所有动画确实播放时，我控制台记录了这些结果，并注意到_children数组有[AnimatedProps]，我认为这是触发动画的原因。

https://imgur.com/a/9a3VPZa

array(8)表示已触发动画的所有数据。 10仍然存在的原因是因为我没有删除：

let progress = this.state.progress;
  progress[id] = new Animated.Value(0);

我尝试搜索类似于我的问题的一些答案，但我找不到一个解决方案。有没有办法独特地播放动画？

另外你可能会注意到它不是本机库的一部分，因为我正在使用Lottie来播放json动画。

为this.state分配一个id来播放正确的动画？反应原生

0 个答案: