svelte-motion 动画属性三剑客initial、animate、transition 实战指南【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motionsvelte-motion 是一款基于 framer-motion 的 Svelte 动画库它把 React 生态中最受欢迎的动画 API 完整移植到了 Svelte 中让你无需学习复杂的新语法就能快速为 Svelte 组件添加丝滑的交互动效。它的核心由三个动画属性构成initial、animate与transition掌握这三剑客就等于掌握了 svelte-motion 的绝大多数用法。本文将从零开始用最少的代码带你跑通入门到实战的全过程。一、为什么选择 svelte-motionSvelte 本身就是一门编译时优化的框架动画如果交给 CSS 手动维护状态一多就容易失控而 svelte-motion 借鉴了 framer-motion 的声明式理念你只需要描述初始是什么样、最终是什么样、怎么过渡剩下的交给库来完成。它内部基于 popmotion 动画引擎支持弹簧spring、补间tween、惯性inertia等丰富的过渡类型。// 安装命令Svelte 项目内执行 npm install --save-dev svelte-motion安装后在组件中引入Motion即可使用它是 svelte-motion 的核心入口组件源码位于 Motion.sveltescript import { Motion } from svelte-motion; /script Motion let:motion div use:motion initial{{ opacity: 0 }} animate{{ opacity: 1 }} 你好svelte-motion /div /Motion二、initial 属性定义动画的起点initial描述的是元素挂载时的初始状态也就是动画的起点。它的取值方式有三种直接写属性对象、引用 variant 标签、或者设为false。2.1 属性对象写法最直观的用法就是直接声明初始样式Motion let:motion div use:motion initial{{ opacity: 0, scale: 0.5 }} animate{{ opacity: 1, scale: 1 }} 渐显 缩放入场 /div /Motion2.2 关闭挂载动画initial{false}如果你的页面刷新时不想看到元素动一下可以把initial设为false元素会直接以animate的目标状态渲染跳过入场动画。这个细节在 types.d.ts 中有明确说明是很多新手容易忽略的实用技巧。Motion let:motion div use:motion initial{false} animate{{ opacity: 0 }} 直接以透明状态出现 /div /Motion三、animate 属性指定动画的目标animate是动画的终点也是最常用的属性。它可以是一个目标对象也可以是 variant 标签甚至可以是数组按顺序播放多个 variant。3.1 动态目标值配合 Svelte 的响应式变量你可以让动画随状态变化而更新script import { Motion } from svelte-motion; let hovered false; /script Motion let:motion div use:motion animate{{ scale: hovered ? 1.2 : 1, rotate: hovered ? 45 : 0 }} on:mouseenter{() (hovered true)} on:mouseleave{() (hovered false)} 悬停我试试 /div /Motion3.2 使用 variants 组织复杂动画当动画状态变多时建议用variants把状态集中管理animate只需要写一个标签名。动画状态的优先级与触发逻辑由 animation-state.js 负责调度animate的优先级高于whileHover、whileTap等手势状态。script import { Motion } from svelte-motion; let active false; const variants { idle: { opacity: 0.6, scale: 1 }, active: { opacity: 1, scale: 1.1 } }; /script Motion let:motion div use:motion animate{active ? active : idle} {variants} 点击切换状态 /div /Motion四、transition 属性定制动画的节奏与手感transition决定动画怎么动——时长、延迟、缓动曲线、是否循环。它是三剑客中最能体现手感的属性。4.1 最常用的基础配置Motion let:motion div use:motion initial{{ x: -100, opacity: 0 }} animate{{ x: 0, opacity: 1 }} transition{{ duration: 0.5, delay: 0.2, ease: easeOut }} 延迟 0.2 秒滑入 /div /Motion常用字段一览字段作用示例值duration动画时长秒0.5delay延迟开始秒0.2ease缓动曲线easeOut、[0.42, 0, 0.58, 1]repeat循环次数InfinityrepeatType循环方式loop、reverse、mirrortype动画类型spring、keyframes、inertia注意transition 中的duration、delay均以秒为单位源码在 transitions.js 中会统一换算为毫秒交给 popmotion 处理。4.2 弹簧动画让交互更有弹性type: spring是 svelte-motion 的招牌能力通过stiffness刚度和damping阻尼两个参数就能调出弹一下再停住的物理感Motion let:motion div use:motion animate{{ scale: 1.5 }} transition{{ type: spring, stiffness: 300, damping: 15 }} 弹性放大 /div /Motion有趣的是svelte-motion 内置了按属性自动选择默认过渡的机制位移类x、y、rotate默认用欠阻尼弹簧scale用临界阻尼弹簧opacity用线性补间。这套默认值定义在 default-transitions.js也就是说即使你不写transition动画也不会生硬。4.3 缓动曲线控制动画的情绪ease支持字符串名称、贝塞尔数组或缓动函数。内置的缓动名称映射表位于 easing.js包括linear、easeIn、easeOut、easeInOut、circOut、backOut、bounceOut等十余种Motion let:motion div use:motion animate{{ y: -30 }} transition{{ duration: 0.8, ease: backOut }} 带一点回弹的上抛 /div /Motion五、三剑客组合实战卡片入场 退场动画最后用一个完整的例子串起三剑客配合AnimatePresence源码见 AnimatePresence.svelte实现元素的退场动画这是单独用 CSS 很难优雅实现的效果script import { Motion, AnimatePresence } from svelte-motion; let show true; /script button on:click{() (show !show)} {show ? 移除卡片 : 显示卡片} /button AnimatePresence {show} Motion let:motion div use:motion initial{{ opacity: 0, scale: 0.8 }} animate{{ opacity: 1, scale: 1 }} exit{{ opacity: 0, scale: 0.8 }} transition{{ type: spring, stiffness: 260, damping: 20 }} stylepadding: 20px; background: #7c3aed; color: #fff; border-radius: 8px; ✨ 三剑客合体演示 /div /Motion /AnimatePresence六、快速上手指南小结initial定起点不写则默认从animate状态直接呈现设为false可禁用入场动画。animate定终点支持属性对象、variant 标签、动画控制对象三种形态。transition定手感优先使用spring做交互反馈用duration ease做页面转场。善用默认过渡位移、缩放、透明度都有内置的合理默认值先跑起来再微调参数。svelte-motion 的 API 设计高度贴近 framer-motion如果你之前用过 React 的 framer-motion几乎可以零成本迁移到 Svelte 项目。从三剑客入手配合 Motion.svelte 与 types.d.ts 中的类型注释很快你就能写出手感一流的 Svelte 动效。快动手试试吧【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 svelte-motion 动画属性三剑客：initial、animate、transition 实战指南
svelte-motion 动画属性三剑客initial、animate、transition 实战指南【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motionsvelte-motion 是一款基于 framer-motion 的 Svelte 动画库它把 React 生态中最受欢迎的动画 API 完整移植到了 Svelte 中让你无需学习复杂的新语法就能快速为 Svelte 组件添加丝滑的交互动效。它的核心由三个动画属性构成initial、animate与transition掌握这三剑客就等于掌握了 svelte-motion 的绝大多数用法。本文将从零开始用最少的代码带你跑通入门到实战的全过程。一、为什么选择 svelte-motionSvelte 本身就是一门编译时优化的框架动画如果交给 CSS 手动维护状态一多就容易失控而 svelte-motion 借鉴了 framer-motion 的声明式理念你只需要描述初始是什么样、最终是什么样、怎么过渡剩下的交给库来完成。它内部基于 popmotion 动画引擎支持弹簧spring、补间tween、惯性inertia等丰富的过渡类型。// 安装命令Svelte 项目内执行 npm install --save-dev svelte-motion安装后在组件中引入Motion即可使用它是 svelte-motion 的核心入口组件源码位于 Motion.sveltescript import { Motion } from svelte-motion; /script Motion let:motion div use:motion initial{{ opacity: 0 }} animate{{ opacity: 1 }} 你好svelte-motion /div /Motion二、initial 属性定义动画的起点initial描述的是元素挂载时的初始状态也就是动画的起点。它的取值方式有三种直接写属性对象、引用 variant 标签、或者设为false。2.1 属性对象写法最直观的用法就是直接声明初始样式Motion let:motion div use:motion initial{{ opacity: 0, scale: 0.5 }} animate{{ opacity: 1, scale: 1 }} 渐显 缩放入场 /div /Motion2.2 关闭挂载动画initial{false}如果你的页面刷新时不想看到元素动一下可以把initial设为false元素会直接以animate的目标状态渲染跳过入场动画。这个细节在 types.d.ts 中有明确说明是很多新手容易忽略的实用技巧。Motion let:motion div use:motion initial{false} animate{{ opacity: 0 }} 直接以透明状态出现 /div /Motion三、animate 属性指定动画的目标animate是动画的终点也是最常用的属性。它可以是一个目标对象也可以是 variant 标签甚至可以是数组按顺序播放多个 variant。3.1 动态目标值配合 Svelte 的响应式变量你可以让动画随状态变化而更新script import { Motion } from svelte-motion; let hovered false; /script Motion let:motion div use:motion animate{{ scale: hovered ? 1.2 : 1, rotate: hovered ? 45 : 0 }} on:mouseenter{() (hovered true)} on:mouseleave{() (hovered false)} 悬停我试试 /div /Motion3.2 使用 variants 组织复杂动画当动画状态变多时建议用variants把状态集中管理animate只需要写一个标签名。动画状态的优先级与触发逻辑由 animation-state.js 负责调度animate的优先级高于whileHover、whileTap等手势状态。script import { Motion } from svelte-motion; let active false; const variants { idle: { opacity: 0.6, scale: 1 }, active: { opacity: 1, scale: 1.1 } }; /script Motion let:motion div use:motion animate{active ? active : idle} {variants} 点击切换状态 /div /Motion四、transition 属性定制动画的节奏与手感transition决定动画怎么动——时长、延迟、缓动曲线、是否循环。它是三剑客中最能体现手感的属性。4.1 最常用的基础配置Motion let:motion div use:motion initial{{ x: -100, opacity: 0 }} animate{{ x: 0, opacity: 1 }} transition{{ duration: 0.5, delay: 0.2, ease: easeOut }} 延迟 0.2 秒滑入 /div /Motion常用字段一览字段作用示例值duration动画时长秒0.5delay延迟开始秒0.2ease缓动曲线easeOut、[0.42, 0, 0.58, 1]repeat循环次数InfinityrepeatType循环方式loop、reverse、mirrortype动画类型spring、keyframes、inertia注意transition 中的duration、delay均以秒为单位源码在 transitions.js 中会统一换算为毫秒交给 popmotion 处理。4.2 弹簧动画让交互更有弹性type: spring是 svelte-motion 的招牌能力通过stiffness刚度和damping阻尼两个参数就能调出弹一下再停住的物理感Motion let:motion div use:motion animate{{ scale: 1.5 }} transition{{ type: spring, stiffness: 300, damping: 15 }} 弹性放大 /div /Motion有趣的是svelte-motion 内置了按属性自动选择默认过渡的机制位移类x、y、rotate默认用欠阻尼弹簧scale用临界阻尼弹簧opacity用线性补间。这套默认值定义在 default-transitions.js也就是说即使你不写transition动画也不会生硬。4.3 缓动曲线控制动画的情绪ease支持字符串名称、贝塞尔数组或缓动函数。内置的缓动名称映射表位于 easing.js包括linear、easeIn、easeOut、easeInOut、circOut、backOut、bounceOut等十余种Motion let:motion div use:motion animate{{ y: -30 }} transition{{ duration: 0.8, ease: backOut }} 带一点回弹的上抛 /div /Motion五、三剑客组合实战卡片入场 退场动画最后用一个完整的例子串起三剑客配合AnimatePresence源码见 AnimatePresence.svelte实现元素的退场动画这是单独用 CSS 很难优雅实现的效果script import { Motion, AnimatePresence } from svelte-motion; let show true; /script button on:click{() (show !show)} {show ? 移除卡片 : 显示卡片} /button AnimatePresence {show} Motion let:motion div use:motion initial{{ opacity: 0, scale: 0.8 }} animate{{ opacity: 1, scale: 1 }} exit{{ opacity: 0, scale: 0.8 }} transition{{ type: spring, stiffness: 260, damping: 20 }} stylepadding: 20px; background: #7c3aed; color: #fff; border-radius: 8px; ✨ 三剑客合体演示 /div /Motion /AnimatePresence六、快速上手指南小结initial定起点不写则默认从animate状态直接呈现设为false可禁用入场动画。animate定终点支持属性对象、variant 标签、动画控制对象三种形态。transition定手感优先使用spring做交互反馈用duration ease做页面转场。善用默认过渡位移、缩放、透明度都有内置的合理默认值先跑起来再微调参数。svelte-motion 的 API 设计高度贴近 framer-motion如果你之前用过 React 的 framer-motion几乎可以零成本迁移到 Svelte 项目。从三剑客入手配合 Motion.svelte 与 types.d.ts 中的类型注释很快你就能写出手感一流的 Svelte 动效。快动手试试吧【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考