标签: framer-motion

我在nextjs新和使用nextjs v9.3，next-redux-wrapper v5，@material-ui/core v4.2，和custom express server。

我正在尝试在我的 Nextjs 应用程序中更改路由时实现加载屏幕，因此我使用成帧器运动在页面之间进行转换并且工作正常，但现在如何在更改路由时使用加载组件？

我使用了这些方法，但没有用：

• 下一个 js 页面转换时的加载屏幕
• 如何使用加载组件而不是 nprogress？

我目前的实现如下：

_app.js

import React, { useEffect } from "react";
import { ThemeProvider } from "@material-ui/core/styles";
import { CssBaseline } from "@material-ui/core";
import { theme } from "../lib/theme";
import withRedux from "next-redux-wrapper";
import { Provider } from "react-redux";
import reduxStore from "../store/store";
import { PersistGate } from "redux-persist/integration/react";
import { AnimatePresence } from …

我正在使用Framer Motion 的useViewportScroll挂钩来跟踪用户在我的页面上的滚动，但它没有更新。我看到这篇文章，它解释了 Framer Motion 如何使用document.body.clientHeight和window.innerHeight计算视口滚动。

这篇文章解释了一些 CSS 如何打破这个问题，特别是如果document.body.clientHeight - window.innerHeight <= 0.

我似乎无法弄清楚这怎么不是真的。即使我的 React 应用程序中根本没有 CSS，该表达式的计算结果也为 true。您可以在 CodeSandbox 上的示例中看到它。

谢谢！

有没有办法使用 Framer Motion 沿着路径（最好是 SVG 路径本身）对 SVG 元素进行动画处理？此外，动画SVG元素是否有可能轮流改变其旋转？下面显示了我想要实现的示例（不完全是，只是一个示例）：

https://tympanus.net/codrops/2019/12/03/motion-paths-past-present-and-future/

根据 Framer Motion 文档中给出的示例，我没有找到类似的声明性方式，但我想知道这是否可以通过 MotionValues、onUpdate 方法或命令式 AnimationControls 来实现？

我在 React 应用程序中使用框架运动。最新版本 - 4.1.13 - 破坏了我的用户界面。我需要降级到以前的版本 - 4.1.2 - （是的，版本控制看起来很奇怪，但 4.1.2 实际上早于 4.1.13，请参阅https://www.npmjs.com/package/framer-motion） 。

我运行命令yarn upgrade framer-motion@^4.1.2。在 中package.json，包变为4.1.2，但在 中yarn.lock，包的版本仍然是4.1.13：

framer-motion@^4.1.2:
  version "4.1.13"
  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.13.tgz#0a7f096113a0f80f11116c1a73da9b81523324cd"
  integrity sha512-E72PyzHXsie1IGcEFMGM3OJsVbtmpS8vcnDjh6tdeCaP7stoioZpmKZcx7c87giymAyuSSWvsGGdVnDGRzRX6g==
  dependencies:
    framesync "5.3.0"
    hey-listen "^1.0.8"
    popmotion "9.3.5"
    style-value-types "4.1.4"
    tslib "^2.1.0"
  optionalDependencies:
    "@emotion/is-prop-valid" "^0.8.2"

我当然做了一个rm -rf node_modules && yarn。它不会改变任何东西。

我发现 yoyo 和 Repeat 在成帧器运动中完全相同。我找不到任何关于 yoyo 的文档。仅记录重复。

transition:{{yoyo:3}}
transition:{{repeat:3}}

基本上他们做动画循环。我只注意到动画循环在我无法命名的其他细节上略有不同。

任何人都可以向我展示 yoyo 文档的链接，或者给我一些关于它们的差异或相似之处的想法吗？

我在我的应用程序中使用 next js，在我的动画中使用成帧器运动。我可以设置介绍动画，但退出动画根本不起作用。

我已将代码包装在动画效果下，但它没有执行任何操作。

我在这里缺少什么？

下面是我的示例代码：

<AnimatePresence>
            <motion.form onSubmit={e => { e.preventDefault(); }} className={styles['auth-modal-form']} initial="hidden" exit="formExit" animate="visible" variants={
                {
                    hidden:{
                        opacity:0,
                        translateX:-25
                    },
                    visible:{
                        opacity:1,
                        translateX:0,
                        transition:{
                            duration:.2
                        }
                    },
                    formExit:{
                        translateX:25,
                        transition:{
                            duration:1
                        }
                    }
                }
            } >
                <div className={styles['auth-icon-tray']}>
                    <div className={styles['icon-container']} onClick={()=>{
                        setEmailId('');
                        dispatch(setModalClose())
                        document.body.style.overflow = 'unset';
                        }} >
                            
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.33637 14.9467C2.89149 15.3807 2.88064 16.1836 3.34722 16.6394C3.8138 17.0951 4.59506 17.0842 5.03993 16.6502L9.98784 11.6914L14.9466 16.6394C15.3915 17.0951 16.1728 17.0951 16.6393 16.6285C17.0951 …

当我的应用程序最初加载时，所有列表项都会一起动画，而不是令人震惊的效果。当我的待办事项从状态中删除时，我还使用 AnimatePresence 来实现退出动画。

对于 Framer Motion，我使用以下变体

const listItemContainerVariant = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: { staggerChildren: 1 }\n    }\n  };\n  const listItemVariant = {\n    hidden: { x: -500 },\n    show: { x: 0, transition: { type: "spring", stiffness: 120 } },\n    exit: { scale: 1.1, x: 500, opacity: 0 },\n    hover: { scale: 1.1 }\n  };\n

我正在使用 useState 来管理我的待办事项：

const [todos, setTodos] = useState(\n    localStorage.todos ? JSON.parse(localStorage.getItem("todos")) : []\n);\n

我是 Framer 运动的新手，我想做的是通过在旋转时移动图像来模仿轮子运动
我不知道如何使这项工作
我尝试过类似的方法但它不起作用

    const imageRuning :Variants = {
                                   hidden:{
                                          x:"-100vw",
                                          opacity:0
                                         },
                                  visible:{
                                          x:0,
                                          opacity:1,
                                          transitionDuration:"3s"

                                           },
                                   rotation:{
                                            rotate:[180,0],
                                            transition:{
                                                  repeat:Infinity,
                                                  type:"tween",
                                                  ease:"linear"
                                                  }
                                             }
                                       }
  
            const  HomePage =()=> {

                   return (

                        <div className={style.animationContainer}>
                             <motion.img 
                                  className={style.animatedImage}
                                  variants={imageRuning}
                                  initial="hidden"
                                  animate={["visible","rotation"]}
                                  width={100} height={100} src="/static/me.jpg" >
                             </motion.img>
                        </div>
              )

请提供任何帮助，

我基本上有以下设置：

<AnimatePresence initial={false}>
  {value ? (
    <motion.div>
      {/* Page 1 content */}
    </motion.div>
  ) : (
    <motion.div>
      {/* Page 2 content */}
    </motion.div>
  )}
</AnimatePresence>

当value从 变为 时true，false我希望第 1 页向左滑出，同时第2 页从右侧滑入。这与幻灯片的工作方式或 iOS 应用程序上的页面转换非常相似。

我在 CodeSanbox 上设置了一个简单的示例：https://codesandbox.io/s/laughing-leftpad-4kin7k? file=/src/App.js:272-1064 。当我切换时，value页面按预期向左滑动，但由于页面高度不同，导致页面下方的内容向下跳转。此外，由于两个页面在动画期间同时渲染，因此第一页会导致第二页也在其下方渲染，因此当动画完成时，第二页会向上跳转。

如何制作这种动画而不让内容跳跃？理想情况下，我想要：

• 第 2 页显示在第 1 页的右侧，而不是呈现在第 1 页的下方。
  • 这将防止第 1 页在滑出动画完成后卸载时第 2 页跳起。
• 要动画到第 2 页的高度的容器的高度。
  • 这样可以防止动画开始时页面下方的内容跳下来。

我想向我的网络应用程序添加一些页面转换。问题是退出动画不起作用。

我有一个运动组件

// app/components/Motion.tsx    
import React from "react";
import { motion } from "framer-motion";
export default function Motion(props: {
  children: React.ReactChild | React.ReactFragment | React.ReactPortal;
}) {
  return (
    <motion.div
      className="w-full h-screen bg-blue-400 flex pt-24 mx-auto"
      initial={{ opacity: 0, x: -100 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -100 }}
      transition={{ duration: 2 }}
    >
      {props.children}
    </motion.div>
  );
}

我想像这样包装每一页：

// app/routes/contact.tsx
import Motion from "~/components/Motion";

export default function contact() {
  return (
    <Motion>
      <div>Contact</div>
    </Motion> …