每次父动画开始使用成帧器动作和反应时，我如何才能使子动画发生答案

【问题标题】：How can i make a child animation happen every time the parent animation is beginning using framer motion & react每次父动画开始使用成帧器动作和反应时，我如何才能使子动画发生
【发布时间】：2021-05-11 21:05:30
【问题描述】：

我正在尝试制作一个重复的挤压气泡动画，使用成帧器运动和反应，但我无法在每次运动动画开始时都发生挤压动画。

只有在动画第一次运行时它才会起作用，但之后只有运动动画会重复，如果我尝试重复挤压动画，它就会出现故障

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;

【问题讨论】：

标签： javascript reactjs framer-motion react-animations

【解决方案1】：

您只需要添加到 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;

我还建议使用 originX 和 originY 来操纵气泡上的弹簧过渡，否则它将根据左上角为反弹设置动画。我会使用诸如originX: "50%" 之类的百分比值，但这取决于您要寻找的效果。

【讨论】：

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

【解决方案2】：

framer-motion 中的级联动画由通过子级传播的变体提供支持。

您遇到了这个挫折，因为您只对“可见变体”进行了一次动画处理。因此变体传播只发生一次。

可能的解决方案

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

 const shapeVariants = {
    hidden: {
      height: 450,
      width: 50,
    },
    visible: {
      height: 250,
      width: 250,
      transition: {
        type: "spring",
        bounce: 1,
        stiffness: 700,
        ease: "easeIn",
        duration: 2,
        repeat: Infinity
      },
    },
  };

或者，您可以使用一种效果来控制动画，该效果将使用 setTimeout 或其他方式一遍又一遍地更改父级的变体以获得级联效果

【讨论】：