Javascript 未定义动画动画动画组件_Javascript_Reactjs_React Native

Javascript 未定义动画动画动画组件

javascript reactjs react-native

Javascript 未定义动画动画动画组件,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我想创建一个像波浪一样的圆形动画，我在互联网上发现了这一点。我用react钩子对其进行了转换和更改，但这段代码不能正常工作。我的错在哪里 const constructAnimations = [...Array(COUNT).keys()].map(() => initialPhase); export default function SearchAnimation() { const [stateAnimations, setStateAnimations] = useStat

我想创建一个像波浪一样的圆形动画，我在互联网上发现了这一点。我用react钩子对其进行了转换和更改，但这段代码不能正常工作。我的错在哪里

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

我发现了几个问题

第一个是，您链接的基于类的示例映射到

stateAnimations

数组，但映射到

[stateAnimations]

。因此，既然

stateAnimations

已经是一个数组，您就不需要这样做了用另一个阵列包围它。如果你解决了这个问题，你在问题中发布的错误就会消失

我还发现基于工人阶级的示例使用了

popmotion

的版本

8.6.2

，示例中的代码显然不再适用于

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",
  },
});

import React，{useState，useffect}来自“React”；
从“react native”导入{动画、文本、视图、样式表}；
从“popmotion”导入{关键帧、参差、tween}；
从“@expo/vector icons”导入{FontAwesome}”；
常数计数=4；
常数持续时间=5000；
const initialPhase={比例：0，不透明度：1}；
const constructAnimations=[…数组（计数）.keys（）].map（（）=>initialPhase）；
导出默认函数SearchAnimation（）{
const[stateAnimations，setStateAnimations]=useState（constructAnimations）；
useffect（（）=>{
常量操作=数组（计数）.fill(
关键帧({
值：[initialPhase，{比例：2，不透明度：0}]，
持续时间：持续时间，
循环：无限，
yoyo:无限，
})
);
交错（动作、持续时间/计数）。开始（（动画）=>{
设置状态动画（动画）；
});
}, []);
返回(
{stateAnimations.map（{opacity，scale}，index）=>{
返回(
);
})}
搜索
);
}
const getCircle=（半径，backgroundColor=“黄金”）=>({
背景色，
宽度：半径*2，
高度：半径*2，
边界半径：半径，
位置：“绝对”，
});
const styles=StyleSheet.create({
图标：{
颜色：“白色”，
尺寸：42，
marginBottom:5，
},
正文：{
颜色：“白色”，
尺码：18，
},
圆圈：getCircle（100），
中圈：{
…getCircle（75），
对齐项目：“中心”，
辩护内容：“中心”，
},
容器：{
弹性：1，
对齐项目：“中心”，
背景颜色：“fff”，
辩护内容：“中心”，
},
});