Question

摘要

我在手风琴标题中有一个“箭头下拉”博览会图标，我试图对其进行动画处理以使其在按下时翻转180度，因此用户知道它可以关闭或打开。这些头是动态呈现的；我不知道会有多少内容，因为它基于用户通过Web套接字API在其他软件中打开了多少个对象。

我使动画起作用了，但是它使所有图标动画化，而不仅仅是我单击的动画。

另外，为了清楚代码的工作方式，我使用了代码部分中import语句中显示的库中的手风琴组件。

我尝试过的事情

我尝试模仿这种方法： React Native: Only Animate One of Several Elements

它看起来与我的问题稍有不同（它们仅适用于字体大小），因此我无法成功地将此解决方案应用于我的代码。

我在他们的代码中注意到他们在状态下将标签连接到字体大小。我敢肯定，这就是为什么它们的各个图标（而不是全部）在单击时动画的原因。但是，我不确定如何将该概念应用于我的代码。

状态包含动画值


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

  }

这是按下标题时调用的函数。

  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();
  };

这是手风琴调用的用于分别渲染每个标题的函数。即如果组件安装有10个头，则此函数将被调用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>
    );
  };

下面是单击标题时将触发的手风琴功能。这是我启动动画功能的地方。

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


   //unrelated code...

其他信息

我确实尝试对类似于零食链接的尝试进行建模。它涉及将状态更改为：

    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的fontSize，以尝试个性化每个组件。

我在尝试期间确实遇到了此错误：

TypeError：TypeError：未定义不是对象（正在评估“ _this.state.animValue [i] .interpolate”）

Answer 1

解决方案！

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

首先，您需要编辑状态。这样，每个图标都可以使用自己的Animated.Value。我将许多新的animation.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();
  };

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

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

1 个答案: