反應 animation 動畫組件未定義

Question

我想像波浪一樣創建一個圓形 animation，我在互聯網上找到了該代碼。 我用反應鈎子轉換和改變了它，但是這段代碼不能正常工作。 我的錯誤在哪里？

const constructAnimations = [...Array(COUNT).keys()].map(() => initialPhase);

export default function SearchAnimation() {
  const [stateAnimations, setStateAnimations] = useState(constructAnimations);

  useEffect(() => {
    const actions = Array(COUNT).fill(
      keyframes({
        values: [initialPhase, { scale: 2, opacity: 0 }],
        duration: DURATION,
        loop: Infinity,
        yoyo: Infinity,
      })
    );

    stagger(actions, DURATION / COUNT).start((animations) => {
      setStateAnimations({ animations });
    });
  }, []);

  return (
    <View style={styles.container}>
      {[stateAnimations].map(({ opacity, scale }, index) => {
        return (
          <Animated.View
            key={index}
            style={[
              styles.circle,
              {
                transform: [{ scale }],
                opacity,
              },
            ]}
          />
        );
      })}
      <View style={styles.midCircle}>
        <FontAwesome name="phone" style={styles.icon} />
        <Text style={styles.text}>Searching</Text>
      </View>
    </View>
  );
}

還有錯誤信息：

TypeError: undefined is not an object (evaluating 'value.getValue')
This error is located at:
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at SearchAnimation.js:33)
    in RCTView (at View.js:34)

Answer 1

我發現了幾個問題。

第一個是基於 class 的示例您將映射鏈接到stateAnimations數組，但是您將 map 鏈接到[stateAnimations] 。 所以由於stateAnimations已經是一個數組，你不需要用另一個數組包圍它。 如果您解決此問題，您在問題中發布的錯誤就會消失。

我還發現基於工作類的示例使用版本8.6.2的popmotion並且示例中的代碼顯然不再適用於版本9+ 。

因此，在降級到8.6.2后，以下代碼對我有用：

import React, { useState, useEffect } from "react";
import { Animated, Text, View, StyleSheet } from "react-native";
import { keyframes, stagger, tween } from "popmotion";
import { FontAwesome } from "@expo/vector-icons";

const COUNT = 4;
const DURATION = 5000;
const initialPhase = { scale: 0, opacity: 1 };
const constructAnimations = [...Array(COUNT).keys()].map(() => initialPhase);

export default function SearchAnimation() {
  const [stateAnimations, setStateAnimations] = useState(constructAnimations);

  useEffect(() => {
    const actions = Array(COUNT).fill(
      keyframes({
        values: [initialPhase, { scale: 2, opacity: 0 }],
        duration: DURATION,
        loop: Infinity,
        yoyo: Infinity,
      })
    );

    stagger(actions, DURATION / COUNT).start((animations) => {
      setStateAnimations(animations);
    });
  }, []);

  return (
    <View style={styles.container}>
      {stateAnimations.map(({ opacity, scale }, index) => {
        return (
          <Animated.View
            key={index}
            style={[
              styles.circle,
              {
                transform: [{ scale }],
                opacity,
              },
            ]}
          />
        );
      })}
      <View style={styles.midCircle}>
        <FontAwesome name="phone" style={styles.icon} />
        <Text style={styles.text}>Searching</Text>
      </View>
    </View>
  );
}

const getCircle = (radius, backgroundColor = "gold") => ({
  backgroundColor,
  width: radius * 2,
  height: radius * 2,
  borderRadius: radius,
  position: "absolute",
});

const styles = StyleSheet.create({
  icon: {
    color: "white",
    fontSize: 42,
    marginBottom: 5,
  },
  text: {
    color: "white",
    fontSize: 18,
  },
  circle: getCircle(100),
  midCircle: {
    ...getCircle(75),
    alignItems: "center",
    justifyContent: "center",
  },
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#fff",
    justifyContent: "center",
  },
});