有没有办法使动画.对本机中的阵列值

Question

我想将多个 <View> s的高度存储在数组中，并将所有这些值一起使用。这样的东西：

<Animated.View style={{height: this.state.heights[0]}}/>
<Animated.View style={{height: this.state.heights[1]}}/>
<Animated.View style={{height: this.state.heights[2]}}/>

但是，当我尝试这样做时：

this.state = {
  heights: new Animated.Value([10, 20, 30])
}

这不起作用。

有什么提示？

Answer 1

创建一个Animated.Value的数组，例如

this.heights = [new Animated.Value(10), new Animated.Value(20), new Animated.Value(30)];

然后使用构图动画功能根据您的要求运行这些动画

Animated.parallel([
  Animated.timing(this.heights[0], { toValue: **, duration: **}),
  Animated.timing(this.heights[1], { toValue: **, duration: **}),
  Animated.timing(this.heights[2], { toValue: **, duration: **})
]).start()

然后在渲染器方法中使用this.heights，例如

<Animated.View style={{height: this.heights[0]}}/>
<Animated.View style={{height: this.heights[1]}}/>
<Animated.View style={{height: this.heights[2]}}/>

希望这会有所帮助！

Answer 2

谢谢您的帖子。因此，我在代码上遵循此示例，但是由于某种原因，我的动画没有被触发。USEREF的阵列正在更改，但是动画不起作用，有关问题的任何想法，这是我的代码。每当用户按"视图信息"按钮时，我正在尝试扩展卡以使高度更大。谢谢！

  const animateCardAll = useRef([]);

{markersArr.map((marker, index) => {
          animateCardAll.current[index] = new Animated.Value(CARD_HEIGHT);
          marker.isExpanded = false;
          (marker.imageFetched = false), console.log(marker);
          return (
            <>
              <Animated.View
                key={marker._id}
                style={[
                  styles.card,
                  {
                    height: animateCardAll.current[index],
                  },
                ]}
              >
                {marker.imageId ? (
                  <LazyImage
                    index={index}
                    //visibleImages={visibleImages}
                    imageId={marker.imageId}
                    userToken={userToken}
                    ref={(cardRefs.current[index] = marker)}
                  />
                ) : null}
                <View style={styles.textContent}>
                  <Text style={styles.cardTitle} numberOfLines={1}>
                    Address: {marker.address}
                  </Text>
                  
                  <Text style={styles.cardDescription} numberOfLines={1}>
                    {marker.city}, {marker.zip_code} {marker.uSstate}
                  </Text>
                  
                  {cardRefs.current[index] &&
                  cardRefs.current[index].isExpanded ? (
                    <ReviewsComponent
                      index={index}
                      addressId={marker._id}
                      userToken={userToken}
                    />
                  ) : null}
                </View>
                <View style={styles.button}>
                  <TouchableOpacity
                    onPress={() => {
                      expandCardAll(index);
                    }}
                    style={[
                      styles.signIn,
                      {
                        borderColor: "#398984",
                        borderWidth: 1,
                      },
                    ]}
                  >
                    <Text
                      style={[
                        styles.textSign,
                        {
                          color: "#398984",
                        },
                      ]}
                    >
                      VIEW INFORMATION
                    </Text>
                  </TouchableOpacity>
                </View>
              </Animated.View>
            </>
          );
        })}
      </Animated.ScrollView>
    ) : null}
 const expandCardAll = (index) => {

cardRefs.current[index].isExpanded = !cardRefs.current[index].isExpanded; // Toggle the expanded state
const upadtedHeight = cardRefs.current[index].isExpanded
  ? SCREEN_HEIGHT * 0.65
  : CARD_HEIGHT;
console.log(
  "Expanded",
  cardRefs.current[index],
  animateCardAll.current[index],
  animateCardAll,
  upadtedHeight
);
Animated.timing(animateCardAll.current[index], {
  toValue: upadtedHeight,
  duration: 500,
  useNativeDriver: false,
}).start(); };

正如我提到的，我的animateCardall.current [index]中的值正在正确更新，但没有触发动画。