10 个 svelte-motion 实战案例：从按钮微交互到完整页面过渡

10 个 svelte-motion 实战案例从按钮微交互到完整页面过渡【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motion在 Svelte 生态中svelte-motion 是一款基于 framer-motion 打造的 Svelte 动画库它把 React 世界中最受欢迎的动画能力手势、拖拽、共享布局、页面过渡完整移植到了 Svelte 中。本文通过 10 个由浅入深的实战案例带你从按钮微交互一路做到完整的页面过渡效果全部开箱即用。先认识 svelte-motion为什么值得一试svelte-motion 的核心设计理念是声明式动画你不需要手动管理 rAF 循环或 CSS 类名只需要告诉组件从哪到哪、怎么动剩下的交给库来处理。它由 popmotion 驱动动画性能出色同时保留了 Svelte 的简洁语法。安装方式非常简单一条命令即可npm install --save-dev svelte-motion核心入口主要有MotionDiv、AnimatePresence、AnimateSharedLayout以及一组 hooks相关实现可以查看 src/index.js 与 MotionDiv.svelte。案例 1按钮点击缩放反馈微交互入门最基础的微交互是按下有反馈。给按钮加上whileTap属性点击时就会自动缩放松手后弹回配合transition还能控制回弹的弹性MotionDiv whileTap{{ scale: 0.9 }} button点我试试/button /MotionDivMotionDiv是 svelte-motion 中最常用的动画容器它内部通过use:motion指令把动画能力绑定到 DOM 节点上细节可以参考 Motion.svelte 和 UseVisualElement.svelte。案例 2悬停上浮与阴影过渡给卡片加whileHover鼠标悬停时轻微上浮并加深阴影让交互更生动。这里推荐使用 spring 弹性过渡手感更自然MotionDiv whileHover{{ y: -6, boxShadow: 0 12px 30px rgba(0,0,0,.15) }} transition{{ type: spring, stiffness: 300, damping: 20 }} div classcard悬停我/div /MotionDivwhileHover/whileTap属于手势能力源码位于 use-hover-gesture.js 与 use-tap-gesture.js。案例 3汉堡菜单图标变形经典需求三条横线点击后变成×。使用useCycle钩子让角度在 0 和 45 度之间循环三条线分别旋转即可script import { useCycle } from svelte-motion; const [open, cycle] useCycle(0, 45); /scriptuseCycle的实现见 use-cycle.js非常适合做状态循环切换类动画。案例 4模态框弹出与遮罩淡入弹窗类组件需要入场和离场两个方向的动画这正是AnimatePresence的用武之地。它会在子元素移除后保留 DOM 一小段时间让exit动画完整播放AnimatePresence show{visible} let:item MotionDiv initial{{ opacity: 0, scale: 0.8 }} animate{{ opacity: 1, scale: 1 }} exit{{ opacity: 0, scale: 0.8 }} {#if item}div classmodal弹窗内容/div{/if} /MotionDiv /AnimatePresenceAnimatePresence的退出管理逻辑是重点可以阅读 AnimatePresence.svelte 与 PresenceChild.svelte。案例 5列表项增删动画配合 Svelte 的{#each}与 keyed 渲染可以让列表项在新增时滑入、删除时滑出。同样由AnimatePresence接管退出动画用户体验直接上一个档次{#each items as item (item.id)} MotionDiv initial{{ opacity: 0, x: -40 }} animate{{ opacity: 1, x: 0 }} exit{{ opacity: 0, x: 40 }} li{item.name}/li /MotionDiv {/each}案例 6页面切换过渡路由级动画页面过渡是完整页面动画的核心。思路是路由切换时旧页面执行exit动画新页面执行initial → animate入场动画加上exitBeforeEnter可以做到先出后进避免两个页面重叠AnimatePresence exitBeforeEnter !-- 根据当前路由渲染对应页面 -- /AnimatePresence过渡编排参数如staggerChildren、delayChildren定义在 transitions.js想要做出惊艳的页面切换这套编排系统是核心。案例 7共享布局动画元素变身在 React 的 framer-motion 里最惊艳的功能之一就是layoutId共享布局过渡两个不同位置的元素共用一个layoutId切换时元素会飞过去。svelte-motion 通过AnimateSharedLayout完整复刻了这一能力AnimateSharedLayout MotionDiv layoutIdhighlight / /AnimateSharedLayout实现原理是批量测量布局并做差值动画源码在 AnimateSharedLayout.svelte 以及 batcher.js、crossfader.js。案例 8拖拽组件与边界约束svelte-motion原生支持拖拽drag属性开启拖拽dragConstraints限定边界配合useDragControls还可以实现按住手柄才能拖动的精细控制MotionDiv drag dragConstraints{{ left: 0, right: 300, top: 0, bottom: 300 }} div classbox拖动我/div /MotionDiv拖拽涉及约束计算与拖拽锁可参考 use-drag.js 和 constraints.js。案例 9滚动驱动动画滚动监听是长页面最常用的动效。useViewportScroll提供滚动进度useTransform把进度映射成位移或透明度实现图片随滚动上移并淡出的视差效果script import { useViewportScroll, useTransform } from svelte-motion; const { scrollYProgress } useViewportScroll(); const y useTransform(scrollYProgress, [0, 1], [0, -100]); /script对应实现见 use-viewport-scroll.js 与 use-transform.js。案例 10弹簧数值与数字滚动最后展示 MotionValue 体系的强大useSpring让数值以弹簧方式逼近目标值useVelocity读取速度。把它接到进度条或数字计数器上任何数值变化都会变得丝滑script import { useMotionValue, useSpring } from svelte-motion; const x useMotionValue(0); const springX useSpring(x, { stiffness: 300, damping: 20 }); /scriptuseSpring内部通过 popmotion 的animate实现弹簧物理源码见 use-spring.js 与 use-motion-value.js。进阶建议与项目结构速览如果你想把动画能力封装成可复用的业务组件建议重点研究这几块源码手势系统use-gestures.js、PanSession.js动画编排animation-state.js、variants.js投影与布局测量projection 目录无障碍支持use-reduced-motion.js尊重系统减弱动态效果设置动手实践时也可以直接 clone 仓库到本地阅读完整源码git clone https://gitcode.com/gh_mirrors/sv/svelte-motion总结这 10 个案例覆盖了 svelte-motion 的完整能力地图从whileTap/whileHover的按钮微交互到AnimatePresence的列表与弹窗过渡再到AnimateSharedLayout的共享布局动画和 MotionValue 驱动的滚动、弹簧效果。掌握它们之后你就能用声明式语法写出媲美原生 APP 的丝滑交互动画把页面体验提升到新的高度。建议从案例 1 开始动手逐个跑通后再向页面级过渡进阶你会发现 Svelte 动画原来可以这么简单。【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考