时间戳

首页 > 解决方案 > 如何使用成帧器运动移动平面图标？

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

问题描述

我有一个反应纸飞机图标，我想通过让它在 HTML 文档中移动到达最终位置，即顶部的菜单按钮来制作一个很酷的效果。

这就是我调用的反应组件的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 个动画，但只能循环播放前两个。第三个仅在对代码进行一些更改并更新它时应用。

最终目标是进行从页面右上角到中间的运动，进行打结运动，然后移动到页面顶部。

任何想法如何让它循环通过尽可能多的动画变体？

标签： javascriptreactjsanimationcss-animationsframer-motion

解决方案

cycleAnimation只前进了一步。最初它将启动“animationOne”。一旦您cycleAnimation()在 1 秒后调用，“animationTwo”将启动。如果你想玩“animationThree”，你需要另一个计时器

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

推荐阅读