如何使用成帧器运动移动平面图标？

Question

我有一个 React 纸飞机图标，我想让它绕着 HTML 文档移动，到达最终位置，即顶部的菜单按钮，从而产生很酷的效果。

我的 React 组件 NavPlane 是这样的：

import React, { Component, useEffect } from "react";
import { useCycle } from "framer-motion";
import { FaPaperPlane } from "react-icons/fa";
import { motion } from "framer-motion";

const PlaneVariants = {
  animationOne: {
    x: 370,
    y: 250,
    transition: { ease: [0.17, 0.67, 0.83, 0.67] },
  },
  animationTwo: {
    x: 140,
    y: 150,
    transition: { duration: 1.0 },
  },
  animationThree: {
    x: 170,
    y: 200,
    transition: { duration: 1.0 },
  },
};
export default function NavPlane() {
  const [animation, cycleAnimation] = useCycle(
    "animationOne",
    "animationTwo",
    "animationThree"
  );
  useEffect(() => {
    setTimeout(() => {
      cycleAnimation();
    }, 1000);
  }, []);
  return (
    <motion.div
      className="text-2xl text-gray-600"
      variants={PlaneVariants}
      animate={animation}
    >
      <FaPaperPlane />
    </motion.div>
  );
}

cycleAnimation() 应该循环播放 3 个动画，但只循环播放前两个。第三个仅在对代码进行一些更改并更新时应用。

最终目标是让一个移动从页面的右上角到中间，做一个结移动然后移动到页面的顶部。

有什么想法可以让它循环播放我想要的动画变体吗？

Answer 1

cycleAnimation只前进了一步。最初它将启动“animationOne”。一旦您在 1 秒后调用 cycleAnimation()，“animationTwo”将启动。如果你想播放“animationThree”

，你需要另一个计时器

useEffect(() => {
  setTimeout(cycleAnimation, 1000); // start "animationTwo" after 1 second
  setTimeout(cycleAnimation, 2000); // start "animationThree" after 2 seconds
}, []);

如何使用成帧器运动移动平面图标？

How to move plane icon with framer motion?

javascript

animation

css-animations

reactjs

framer-motion