Javascript 如何在每次父动画开始使用帧运动时使子动画发生&；反应

我尝试在重复时使用帧运动和反应制作挤压气泡动画，但我无法在每次运动动画开始时都制作挤压动画

取而代之的是，只有在动画第一次运行时它才工作，但在那之后，只有运动动画自身重复，如果我尝试重复挤压动画，它就会出问题

import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";

const Bubble = () => {
  const shapeVariants = {
    hidden: {
      height: 450,
      width: 50,
    },
    visible: {
      height: 250,
      width: 250,
      transition: {
        type: "spring",
        bounce: 1,
        stiffness: 700,
        ease: "easeIn",
      },
    },
  };
  const MoveVariants = {
    hidden: {
      y: 1300,
    },
    visible: {
      y: -280,
      transition: {
        duration: 2,
        ease: "easeIn",
        repeat: Infinity,
      },
    },
  };

  return (
    <motion.div variants={MoveVariants} initial={"hidden"} animate={"visible"}>
      <RoundDiv
        onAnimationComplete={(definition) => console.log(definition)}
        variants={shapeVariants}
      />
    </motion.div>
  );
};

const RoundDiv = styled(motion.div)`
  height: 250px;
  width: 250px;
  background-color: #05386b;
  border-radius: 50%;
`;

export default Bubble;

从“React”导入React；
从“样式化组件”导入样式化；
从“框架运动”导入{motion}；
常量气泡=（）=>{
常量形状变量={
隐藏的：{
身高：450，
宽度：50，
},
可见：{
身高：250，
宽度：250，
过渡：{
类型：“弹簧”，
反弹：1，
刚度：700，
放松：“放松”，
},
},
};
常量移动变量={
隐藏的：{
y:1300，
},
可见：{
y:-280，
过渡：{
持续时间：2，
放松：“放松”，
重复：无限，
},
},
};
返回(
console.log（定义）}
变体={shapeVariants}
/>
);
};
const RoundDiv=已设置样式（motion.div）`
高度：250px；
宽度：250px；
背景色：#05386b；
边界半径：50%；
`;
出口违约泡沫；

帧运动中的级联动画由通过子对象传播的变量驱动

您将遇到此挫折，因为您只对“可见变体”设置了一次动画。因此，变异传播只发生一次

潜在解决方案

哑解决方案：在shapeVariant中包含持续时间，并使其重复，然后手动将动画计时到需要的位置。这不是最佳的，因为您可能希望气泡动画为spring类型

const shapeVariants={
隐藏的：{
身高：450，
宽度：50，
},
可见：{
身高：250，
宽度：250，
过渡：{
类型：“弹簧”，
反弹：1，
刚度：700，
放松：“放松”，
持续时间：2，
重复：无限
},
},
};

或者，您可以使用一种效果来控制动画，该效果将使用setTimeout或其他方法反复更改父对象的变量，以获得级联效果

---

您只需要添加到shapeVariants过渡，以使它们同步

import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";

const Bubble = () => {
    const shapeVariants = {
        hidden: {
            height: 450,
            width: 50,
        },
        visible: {
            height: 250,
            width: 250,
            transition: {
                type: "spring",
                bounce: 1,
                stiffness: 700,
                ease: "easeIn",
                duration: 2, /* new */
                repeat: Infinity, /* new */
            },
        },
    };
    const MoveVariants = {
        hidden: {
            y: 1300,
        },
        visible: {
            y: -280,
            transition: {
                duration: 2,
                ease: "easeIn",
                repeat: Infinity,
            },
        },
    };
    return (
        <motion.div
            variants={MoveVariants}
            initial={"hidden"}
            animate={"visible"}
        >
            <RoundDiv
                onAnimationComplete={(definition) => console.log(definition)}
                variants={shapeVariants}
            />
        </motion.div>
    );
};

const RoundDiv = styled(motion.div)`
    height: 250px;
    width: 250px;
    background-color: #05386b;
    border-radius: 50%;
`;

export default Bubble;

从“React”导入React；
从“样式化组件”导入样式化；
从“框架运动”导入{motion}；
常量气泡=（）=>{
常量形状变量={
隐藏的：{
身高：450，
宽度：50，
},
可见：{
身高：250，
宽度：250，
过渡：{
类型：“弹簧”，
反弹：1，
刚度：700，
放松：“放松”，
持续时间：2，/*新*/
重复：无穷大，/*新*/
},
},
};
常量移动变量={
隐藏的：{
y:1300，
},
可见：{
y:-280，
过渡：{
持续时间：2，
放松：“放松”，
重复：无限，
},
},
};
返回(
console.log（定义）}
变体={shapeVariants}
/>
);
};
const RoundDiv=已设置样式（motion.div）`
高度：250px；
宽度：250px；
背景色：#05386b；
边界半径：50%；
`;
出口违约泡沫；

---

我还建议使用originX和originY来操纵气泡上的弹簧过渡，否则它将根据左上角设置反弹动画。我会使用百分比值，例如

originX:“50%”

，但这取决于您所寻找的效果。

您也可以在movey上使用百分比值。这样，您可以使过渡在容器的整个高度上工作。例如y：“100%”或y：“100vh”以在整个视口中设置动画。