您好,登录后才能下订单哦!
这篇文章主要介绍“怎么使用Framer Motion实现React动画”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用Framer Motion实现React动画”文章能帮助大家解决问题。
在我们的常规认知中,实现这样的效果其实需要很多的css来实现,或者说需要我们进行大量的定制化逻辑编写。但是如果我们使用framer motion
的话,只需要如下代码:
import { AnimatePresence, motion } from 'framer-motion'; const [selectedId, setSelectedId] = useState(null); {items.map(item => ( <motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)}> <motion.h6>{item.subtitle}</motion.h6> <motion.h3>{item.title}</motion.h3> </motion.div> ))} <AnimatePresence> {selectedId && ( <motion.div layoutId={selectedId}> <motion.h6>{item.subtitle}</motion.h6> <motion.h3>{item.title}</motion.h3> <motion.button onClick={() => setSelectedId(null)} /> </motion.div> )} </AnimatePresence>
从上面的实现我们可以看出,framer-motion可以说是我们在用react动效开发过程中的必备利器。那么接下来,我给大家简单介绍一些framer motion的基础用法。
Framer Motion 需要 React 18 或更高版本。
从npm安装framer-motion
npm install framer-motion
安装后,您可以通过framer-motion
引入Framer Motion
import { motion } from "framer-motion" export const MyComponent = ({ isVisible }) => ( <motion.div animate={{ opacity: isVisible ? 1 : 0 }} /> )
Framer motion
的核心API是motion
的组件。每个HTML
和SVG
标签都有对应的motion
组件。
他们渲染的结果与对应的原生组件完全一致,并在其之上增加了一些动画和手势相关的props
。
比如:
<motion.div /> <motion.span /> <motion.h2 /> <motion.svg /> ...
比如我们现在想要实现一个侧边栏效果。
如果我们自己来实现的话,可能要考虑它的keyframe,它的初始状态与最终的css样式。那么如果用framer-motion
来如何实现呢?
首先我们来设计一个会动的按钮Icon:
import * as React from "react"; import { motion } from "framer-motion"; const Path = props => ( <motion.path fill="transparent" strokeWidth="3" stroke="hsl(0, 0%, 18%)" strokeLinecap="round" {...props} /> ); const MenuToggle = ({ toggle }) => ( <button onClick={toggle}> <svg width="23" height="23" viewBox="0 0 23 23"> <Path variants={{ closed: { d: "M 2 2.5 L 20 2.5" }, open: { d: "M 3 16.5 L 17 2.5" } }} /> <Path d="M 2 9.423 L 20 9.423" variants={{ closed: { opacity: 1 }, open: { opacity: 0 } }} transition={{ duration: 0.1 }} /> <Path variants={{ closed: { d: "M 2 16.346 L 20 16.346" }, open: { d: "M 3 2.5 L 17 16.346" } }} /> </svg> </button> );
接下来,就由这个按钮来控制侧边栏的展示(mount)与隐藏(unmount):
import * as React from "react"; import { useRef } from "react"; import { motion, useCycle } from "framer-motion"; import { useDimensions } from "./use-dimensions"; const sidebar = { open: (height = 1000) => ({ clipPath: `circle(${height * 2 + 200}px at 40px 40px)`, transition: { type: "spring", stiffness: 20, restDelta: 2 } }), closed: { clipPath: "circle(30px at 40px 40px)", transition: { delay: 0.5, type: "spring", stiffness: 400, damping: 40 } } }; export const Example = () => { const [isOpen, toggleOpen] = useCycle(false, true); const containerRef = useRef(null); const { height } = useDimensions(containerRef); return ( <motion.nav initial={false} animate={isOpen ? "open" : "closed"} custom={height} ref={containerRef} > <motion.div className="background" variants={sidebar} /> <MenuToggle toggle={() => toggleOpen()} /> </motion.nav> ); };
也就是说,其实我们更多需要做的事情,从思考如何设计各元素之间的css联动与keyframe书写变成了如何按照文档写好framer-motion的配置。哪个更轻松相信大家一目了然。
首先我们先来进行单个Item
的封装:
import * as React from "react"; import { motion } from "framer-motion"; const variants = { open: { y: 0, opacity: 1, transition: { y: { stiffness: 1000, velocity: -100 } } }, closed: { y: 50, opacity: 0, transition: { y: { stiffness: 1000 } } } }; const colors = ["#FF008C", "#D309E1", "#9C1AFF", "#7700FF", "#4400FF"]; export const MenuItem = ({ i }) => { const style = { border: `2px solid ${colors[i]}` }; return ( <motion.li variants={variants} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} > <div className="icon-placeholder" style={style} /> <div className="text-placeholder" style={style} /> </motion.li> ); };
然后我们在已封装Item
的基础上,再进行整个菜单的封装:
import * as React from "react"; import { motion } from "framer-motion"; const itemIds = [0, 1, 2, 3, 4]; const variants = { open: { transition: { staggerChildren: 0.07, delayChildren: 0.2 } }, closed: { transition: { staggerChildren: 0.05, staggerDirection: -1 } } }; export const Navigation = () => ( <motion.ul variants={variants}> {itemIds.map(i => ( <MenuItem i={i} key={i} /> ))} </motion.ul> );
关于“怎么使用Framer Motion实现React动画”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。