使用 Framer Motion 实现滚动动画

Framer Motion 是一个强大的 React 动画库,它提供了简单、强大和可扩展的 API,用于创建各种类型的动画效果。

本文介绍Framer Motion 的基本使用,和如何使用其提供的 API 快速实现滚动动画。

基本使用

Framer Motion 的核心是提供了 HTML 元素和 SVG 元素对应的 motion组件,将对应的元素替换为 motion 组件,并且属性配置简单的初始状态、目标状态和过渡效果即可实现动画效果。

tsx 复制代码
import { motion } from 'framer-motion';

const App = () => {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0 }}
      animate={{ opacity: 1, scale: 1}}
      transition={{ duration: 0.5 }}
    >
      Hello Framer Motion!
    </motion.div>
  );
};

在这个示例中,我们使用 motion.div 包裹一个 <div> 元素,然后定义了 initialanimatetransition 属性来指定初始状态、目标状态和过渡效果。在初始状态下,元素的透明度(opacity)和缩放比例(scale)都是 0,然后通过 animate 属性指定了目标状态,透明度和缩放比例都是 1。transition 属性定义了过渡效果的持续时间为 0.5 秒。

滚动动画

实现常见的页面滚动到指定元素时展示动画,只需要使用 whileInView 这个属性定义元素出现时的样式,比如透明度,大小,偏移位置等。

示例代码如下,定义刚开始时透明度为 0(即不可见),当滚动到元素时设置为透明度 1,元素可见并且会一淡入的动画效果展示。

tsx 复制代码
<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
/>

实现效果图:

通过设置其他更多样式和属性,我们可以更自由的配置想要的动画效果。如初始位置为 30px,元素可见时从上往下展示,通过 viewporttransition 属性设置动画的展示时机和方式。

tsx 复制代码
<motion.div
  initial={{ opacity: 0, y: 30 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 1 }}
>

Framer Motion 是一个强大的动画库,能实现各种简单和复杂的动画效果,更多的使用方式和动画效果可以参考Framer Motion 文档

参考链接

相关推荐
Mintopia2 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农7 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye10 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤14 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子18 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户8122199367221 小时前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端