svelte-motion 手势动画实战：whileHover、whileTap、whileFocus 打造高交互 UI
【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motion
svelte-motion是一款基于 framer-motion 打造的 Svelte 动画库，让你用极少的代码实现丝滑的 UI 动效。本文聚焦手势动画三剑客——whileHover、whileTap、whileFocus，通过可复制的实战代码，教你快速为按钮、卡片、表单打造高交互体验，无需手写复杂的事件监听与过渡逻辑。
一、快速上手：svelte-motion 安装与基础用法
一键安装步骤
在项目终端执行：
npm install --save-dev svelte-motion最小可用示例
svelte-motion 的核心是<Motion>组件，配合use:motion指令即可让任意元素动起来：
<script> import { Motion } from "svelte-motion"; </script> <Motion let:motion> <div use:motion animate={{ scale: 1.5 }}> 我会放大！ </div> </Motion>也可以直接使用封装好的[MotionDiv](https://link.gitcode.com/i/8b6d4f76828a7cbefa2362caa1cbcb60)，写法更接近 framer-motion：
<script> import { MotionDiv } from "svelte-motion"; </script> <MotionDiv animate={{ x: 100 }} transition={{ duration: 0.5 }}> 我会滑动！ </MotionDiv>二、whileHover：悬停即动，让卡片"活"起来
whileHover在鼠标进入元素时触发，常用于卡片浮起、按钮变色等反馈。
最简单的悬停放大效果
<MotionDiv whileHover={{ scale: 1.05 }} transition={{ type: "spring", stiffness: 300 }} > 鼠标悬停我试试 </MotionDiv>搭配boxShadow即可做出流行的"卡片浮起"效果：
<MotionDiv whileHover={{ scale: 1.05, boxShadow: "0 10px 30px rgba(0,0,0,0.15)" }} transition={{ type: "spring" }} > 悬停浮起卡片 </MotionDiv>提示：加上
spring弹性过渡，悬停反馈会显得更高级、更自然。
三、whileTap：按下瞬间的按压反馈
whileTap在手指/鼠标按下时触发，最适合按钮和可点击卡片，让"按下去"的物理感立刻呈现。
按钮按压效果
<MotionDiv whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.92 }} transition={{ type: "spring", stiffness: 400, damping: 15 }} > 点我按下 </MotionDiv>三个技巧帮你把按压做得更细腻：
- 缩小比例：
scale: 0.9 ~ 0.95是舒适区间，太小会显得生硬 - 叠加位移：配合
y: 2让按钮有"沉下去"的感觉 - 加速过渡：
transition中的duration或spring参数决定回弹手感
四、whileFocus：聚焦高亮，提升表单可用性
whileFocus在元素获得焦点（键盘 Tab 或点击）时触发，是表单输入框的"高亮神器"，也是无障碍体验的重要一环。
<MotionDiv whileFocus={{ scale: 1.03, boxShadow: "0 0 0 3px #4f8cff" }} transition={{ duration: 0.15 }} > <input placeholder="点击或 Tab 聚焦我" style="border:none;outline:none;background:transparent;" /> </MotionDiv>当输入框聚焦时，外层容器自动放大并出现蓝色光环，用户注意力被自然引导，表单可用性大幅提升。
五、手势动画组合实战：一个高交互卡片
把三种手势组合起来，只需几行代码，就能做出交互感十足的卡片组件：
<MotionDiv whileHover={{ scale: 1.05, y: -4 }} whileTap={{ scale: 0.95 }} whileFocus={{ boxShadow: "0 0 0 3px #ff6b6b" }} transition={{ type: "spring", stiffness: 350, damping: 20 }} tabindex="0" > 高交互卡片：悬停浮起、按下回弹、聚焦描边 </MotionDiv>注意：
whileFocus需要元素可聚焦，给MotionDiv加上tabindex="0"即可。
六、进阶：手势事件回调 onHoverStart / onTap
除了样式动画，你还可以通过事件回调响应手势，实现"悬停时提示"、"点击后跳转"等业务逻辑：
<MotionDiv onHoverStart={() => console.log("悬停开始")} onHoverEnd={() => console.log("悬停结束")} onTap={() => console.log("完成一次点击")} onTapStart={() => console.log("按下")} onTapCancel={() => console.log("取消点击")} > 打开控制台试试 </MotionDiv>七、源码解读：手势动画如何工作
好奇底层原理？svelte-motion 的手势系统非常清晰，值得一读：
- 悬停逻辑：UseHoverGesture.svelte —— 监听
pointerenter/pointerleave，并调用animationState.setActive切换动画状态 - 按压逻辑：UseTapGesture.svelte —— 监听
pointerdown，并在window上监听pointerup/pointercancel判定点击是否完成 - 聚焦逻辑：UseFocusGesture.svelte —— 监听
focus/blur事件 - 特性注册：definitions.js —— 定义了
hover、tap、focus等特性的启用条件
结语
svelte-motion 让手势动画从"繁琐的监听事件"变成了"一行声明式属性"。从今天起，给你的按钮加上whileTap、给卡片加上whileHover、给表单加上whileFocus，用最小的成本让 UI 交互质感跃升。快去你的 Svelte 项目中实践吧！
如果想亲自运行源码示例，可以克隆仓库体验：
git clone https://gitcode.com/gh_mirrors/sv/svelte-motion【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motion
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
