0

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

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

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;
4

2 回答 2

0

您只需要添加到您的 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%"但它取决于您正在寻找的效果。

于 2021-05-11T21:47:52.067 回答
0

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

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

潜在的解决方案

  1. 愚蠢的解决方案：在 shapeVariant 中包含一个持续时间并使其也重复，然后手动将动画计时到您需要的位置。这不是最佳的，因为您可能希望您的气泡动画是弹簧类型的？
 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
      },
    },
  };
  1. 或者，您可以使用效果来控制动画，该效果将使用 setTimeout 或其他东西来一遍又一遍地更改父级的变体以获得级联效果
于 2021-05-11T21:42:32.880 回答