1

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

/>

在这里，我一直在尝试给这些动画一个唯一的 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);

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

另外你可能会注意到它不是 react-native 库的一部分，那是因为我使用 Lottie 来播放 json 动画。

4

0 回答 0