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

我有一个react纸平面图标，我想通过使它在HTML文档中移动到最终位置（顶部的菜单按钮）来产生一个很酷的效果

这就是名为

NavPlane

的react组件的外观：

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

import React，{Component，useffect}来自“React”；
从“帧运动”导入{useCycle}；
从“react icons/fa”导入{FaPaperPlane}；
从“框架运动”导入{motion}；
常量变量={
animationOne：{
x:370，
y:250，
过渡：{ease:[0.17,0.67,0.83,0.67]}，
},
动画二：{
x:140，
y:150，
转换：{持续时间：1.0}，
},
动画三：{
x:170，
y:200，
转换：{持续时间：1.0}，
},
};
导出默认函数NavPlane（）{
常量[动画，循环动画]=使用循环(
“动画片”，
“动画二”，
“动画三”
);
useffect（（）=>{
设置超时（（）=>{
循环激活（）；
}, 1000);
}, []);
返回(
);
}

cycleeanimation（）

本应循环播放3个动画，但仅循环播放前两个动画。仅当对代码进行某些更改并更新代码时，才应用第三个选项

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

---

你知道如何让它在我想要的动画变体中循环吗？

cycleeanimation

只推进了一步。最初它将启动“animationOne”。在1秒后调用

cycleeanimation（）

后，“animationTwo”将启动。如果你想玩“动画三”，你需要另一个计时器

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