framer-motion是一款react动画库-BFW插件库

framer-motion是一款react动画库

framer-motion 是一个开源的、面向所有创意开发者而设计的生产就绪的动画库。它是由 Framer 开发的 React 动画库。

该库提供了一个简单而强大的 JavaScript 动画库，用于创建交互式动画。它使用起来非常简单，只需要导入 motion 组件并使用 animate 属性即可。

安装

npm

npm install framer-motion

引入

import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

cdn

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/framer-motion.dev.11.1.7.js"></script>

使用示例

<!DOCTYPE html>
<html>
  <head>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/framer-motion.dev.11.1.7.js"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #4299e1;
        margin:100px;
      }
      
    </style>
  </head>

  <body>
    <div id="root"></div>
    <script type="text/babel" >
  
  const { motion } = window.Motion;
      const Box = () => {
        return (
          <motion.div
            className="box"
            animate={{ rotate: 360 }}
            transition={{ duration: 2, repeat: Infinity }}
          />
        );
      };

      ReactDOM.render(<Box />, document.getElementById("root"));
    </script>

  </body>
</html>

framer-motion是一款react动画库

网友评论0

pixi.min.js

jquery.gif.js

gif.js

jquery.fliptimer.js

gifshot.js

libgif.js

particleground.js

pts.js

bubbly-bg.js

PixelWave.js