如何处理动态呈现的单个图标上的动画？

Question

总结

我在手风琴 header 中有一个 'arrow-dropdown' expo 图标，我正在尝试设置动画以在按下时翻转 180 度，以便用户知道它可以关闭或打开。这些 header 是动态呈现的；我不知道有多少人会进入，因为它基于用户通过网络套接字 API.

在其他软件中打开了多少 objects

我的动画可以正常工作，但它会为所有图标设置动画，而不仅仅是我点击的图标。

此外，为了清楚代码的工作原理，我使用了代码部分导入语句中显示的库中的手风琴组件。

我试过的

我尝试效仿这种方法：

它看起来与我的问题略有不同（它们只处理字体大小），所以我无法将此解决方案成功应用到我的代码中。

我注意到在他们的代码中他们将标签连接到状态中的字体大小。我敢肯定这就是为什么他们的各个图标在点击时会显示动画，而不是所有图标。但是，我不确定如何将该概念应用到我的代码中。

状态包含动画值


    this.state={
      activeSections: [],
      animValue: new Animated.Value(250),
    }

  }

这是按下 header 时调用的函数。

  handleSelect = () => {
    this.state.animValue._value > 250
      ? Animated.timing(this.state.animValue, {
          toValue: 250,
          duration: 500
        }).start()
      : Animated.timing(this.state.animValue, {
          toValue: 450,
          duration: 500
        }).start();
  };

这是手风琴调用的函数，用于单独呈现每个 header。 IE。如果组件挂载 10 headers，此函数将被调用 10 次。

  _renderHeader = section => {

      let rotateAnimation = this.state.animValue.interpolate({
          inputRange: [250, 450],
          outputRange: ['0deg', '180deg']
      });
    const customStyle = {
      transform:[{rotate:rotateAnimation}]
    };

    return (
        <View style={styles.header}>
          <View style={styles.headerTextContainer}>
            <Text style={styles.headerText}>{section['title']}</Text>
              <Animated.View style={[{marginLeft: 10}, customStyle]}>
                <TouchableWithoutFeedback >
                  <Ionicons name="md-arrow-dropdown" size={20} color={EStyleSheet.value('$textColor')} />
                </TouchableWithoutFeedback>
              </Animated.View>
          </View>

        </View>
    );
  };

下面是点击 header 时触发的手风琴功能。这是我启动动画功能的地方。

 _updateSections = activeSections => {
    console.log(activeSections)
    this.handleSelect()


   //unrelated code...

附加信息

我确实尝试模拟类似于零食的尝试 link。它涉及将状态更改为：

    this.state={
      activeSections: [],
      animValue: [new Animated.Value(250),new Animated.Value(250),new Animated.Value(250),new Animated.Value(250),new Animated.Value(250),]
    }

并调整所有其他函数以处理具有数组值的输入。我还将图标的样式设置为 this.state.animValue 的字体大小，以尝试使每个组件个性化。

我在尝试过程中确实遇到了这个错误：

TypeError: TypeError: undefined is not an object (evaluating '_this.state.animValue[i].interpolate')

Answer 1

解决方法！

几个小时后，我找到了解决方案！为那些可能有类似问题的人发帖。

首先您需要编辑您的状态。这允许每个图标都有自己的 Animated.Value 来使用。为了可见性，我硬编码了许多新的 animated.values，但对于动态分配，我将推送一个新值，然后在下面的后续步骤中分配它。

      animValue: [
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
      ],

现在我可以将转换分配给状态中的唯一值。这样一来，每个图标都可以独立运行。

<Animated.View key={1} style={[{marginLeft: 10}, {transform:[{rotate: this.state.animValue[i].interpolate({
        inputRange: [250, 450],
        outputRange: ['0deg', '180deg']})}]}]}>

我对 HandleSelect 函数做了一个简单的更改。我添加了一个参数来接收索引，因此它可以选择正确的唯一动画值来制作动画。

handleSelect = (i) => {
    this.state.animValue[i]._value > 250
      ? Animated.timing(this.state.animValue[i], {
          toValue: 250,
          duration: 500
        }).start()
      : Animated.timing(this.state.animValue[i], {
          toValue: 450,
          duration: 500
        }).start();
  };

希望这可以帮助任何可能与我有同样问题的迷失灵魂！

如何处理动态呈现的单个图标上的动画？

How to handle animations on individual icons rendered dynamically?

javascript

react-native

react-native-animatable