尧图网页设计 
d3-ease 缓动函数完全解析d3 中时间扭曲与动画质感的实现原理【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3在 d3 中缓动easing是一种通过扭曲时间来控制动画视觉运动的方法最常用于实现 slow-in、slow-out慢进慢出效果让 d3-transition 动画 更加平滑、更符合物理直觉。本文基于 d3 仓库的官方参考文档 docs/d3-ease.md 展开完整覆盖ease函数契约、全部九种缓动类型linear、poly、quad、cubic、sin、exp、circle、elastic、back、bounce及其 In/Out/InOut 变体、exponent/amplitude/period/overshoot等可配置参数的取值与默认值并结合仓库中的源码导出链与文档可视化组件讲清每一类缓动何时选、怎么配、底层怎么算。缓动函数一个把时间映射时间的函数契约d3-ease 模块中的每个缓动类型都实现同一个ease方法接收一个归一化时间t返回对应的缓动后时间tʹ。输入t与输出tʹ通常都在[0, 1]区间内0 代表动画起点1 代表动画终点一个合格的缓动函数应当满足ease(0) 0且ease(1) 1个别类型如easeElastic的缓动时间可能略微越出该区间——这正是回弹过冲等动画质感的来源。基本用法是给归一化时间直接套用某个缓动函数const te d3.easeCubic(t);自定义参数时先在动画开始前创建缓动函数const ease d3.easeElastic.period(0.4);再在动画过程中调用它const te ease(t);在 d3 生态中的位置从 src/index.js 可以看到d3顶层包通过export * from d3-ease将全部缓动函数并入统一命名空间因此d3.easeCubic等可以直接访问package.json 中声明的依赖为d3-ease: ^3.0.1当前 d3 版本 7.9.0在过渡动画中缓动函数由 transition.ease(value) 指定每一帧动画都会调用它一次传入 [0, 1] 之间的归一化时间t返回缓动时间tʹ不显式指定时默认为d3.easeCubictransition.ease(d3.easeCubic); transition.ease() // 读取当前缓动函数返回 d3.easeCubic文档中的交互式曲线图由 ExampleEase.vue 组件渲染该组件用d3.ticks(0, 1, 500)在 [0, 1] 上取 500 个采样点再用 Observable Plot 的Plot.lineX(ticks, ease)绘制每条缓动曲线因此每类缓动的曲线形状都可以直观复现。以下缓动类型大量参考了 Robert Penner 的经典 easing 公式体系。基础族easeLinear 与 easePolyeaseLinear恒等函数线性缓动即恒等函数linear(t)直接返回t时间完全不被扭曲。适合需要匀速运动的场景如进度条扫过、循环滚动。easePoly可配置指数的多项式缓动easePoly是easePolyInOut的别名。其三个变体的语义变体行为与 easePolyIn 的关系easePolyIn将t提升到指定指数默认指数 3等价easeCubicIn—easePolyOut反向多项式缓动等价1 - easePolyIn(1 - t)easePolyInOut对称多项式缓动t∈ [0, 0.5] 用 In 段、t∈ (0.5, 1] 用 Out 段各自缩放拼接通过easePoly.exponent(e)返回一个带指定指数e的新多项式缓动可精确复现 linear/quad/cubicconst linear d3.easePoly.exponent(1); const quad d3.easePoly.exponent(2); const cubic d3.easePoly.exponent(3);官方文档为指数提供了 0.5、1、1.5、2、3、4 六档对比曲线指数越大In 段前期越压平、末尾加速越猛Out 段则相反。easeQuad二次缓动easeQuad是easeQuadInOut的别名easeQuadIn等价easePolyIn.exponent(2)easeQuadOut反向等价1 - easeQuadIn(1 - t)也等价easePolyOut.exponent(2)easeQuadInOut对称前半段缩放easeQuadIn、后半段缩放easeQuadOut也等价easePoly.exponent(2)。easeCubic三次缓动d3 的默认easeCubic是easeCubicInOut的别名easeCubicIn等价easePolyIn.exponent(3)easeCubicOut等价1 - easeCubicIn(1 - t)也等价easePolyOut.exponent(3)easeCubicInOut对称拼接也等价easePoly.exponent(3)。由于transition.ease()未指定时默认就是easeCubic它是 d3 过渡动画中出场率最高的缓动也是最稳妥的默认选择。曲线族easeSin、easeExp 与 easeCircle三者都是 In / Out / InOut 三件套且 Out 一律是 In 的时间反转1 - fIn(1 - t)InOut 一律是前半 In、后半 Out的对称拼接。easeSin正弦缓动easeSinIn返回 sin(t)——以正弦曲线起势起步柔和easeSinOut1 - easeSinIn(1 - t)easeSinInOut对称拼接。easeExp指数缓动easeExpIn将 2 提升到10 × (t - 1)次幂即2^(10(t-1))——起点几乎静止、终点极陡加速感比三次缓动更强烈easeExpOut1 - easeExpIn(1 - t)常用于快速冲入、缓缓收尾的元素入场easeExpInOut对称拼接。easeCircle圆形缓动基于圆弧四分之一圆的斜率变化定义easeCircleIn圆形缓动easeCircleOut1 - easeCircleIn(1 - t)easeCircleInOut对称拼接。圆形缓动的拐点比正弦更硬接近抛物线末端行为适合强调果断感的 UI 动效。弹性族easeElastic 及其两个配置参数easeElastic是easeElasticOut的别名效果像橡皮筋允许缓动值在终点处来回振荡这正是前文所述缓动时间可略越出 [0, 1]的典型。easeElasticIn振幅与周期均可配置默认振幅 1、默认周期 0.3easeElasticOut1 - easeElasticIn(1 - t)是最常用的松手回弹形态easeElasticInOut前半段 In、后半段 Out 的对称形式。两个参数方法均返回新的缓动函数// 指定振幅注意约束 const ease d3.easeElastic.amplitude(1.2); // 指定周期 const ease d3.easeElastic.period(0.4);easeElastic.amplitude(a)振幅a必须 ≥ 1振荡偏离 [0, 1] 的程度随振幅增大而加剧官方文档的交互式滑块范围为 14easeElastic.period(p)周期p控制振荡频率滑块范围为 0.11.5周期越小振荡越密集。文档中为两个参数分别提供了 1.01.5 的振幅对比曲线可以看到振幅越大、回弹过冲越夸张。预期族easeBack 与过冲参数easeBack是easeBackInOut的别名属于预期anticipation类缓动——如同舞者起跳前先屈膝easeBackIn先向反方向蓄力再冲出去过冲度可配置默认 1.70158easeBackOut1 - easeBackIn(1 - t)easeBackInOut对称拼接。const ease d3.easeBack.overshoot(2.5); // 自定义过冲easeBack.overshoot(s)返回带指定过冲s的新 back 缓动官方示例用d3.ticks(0.5, 3, 6)生成 0.5、1、1.5、…、3 共 6 档过冲对比曲线交互式滑块范围为 05。过冲为 0 时退化为普通 In 行为过冲越大反方向的下探越深。弹跳族easeBounceeaseBounce是easeBounceOut的别名效果像一颗橡胶球落地反弹为分段折线式的非对称振荡easeBounceIn弹跳缓动先慢后快、末端以多次衰减反弹收束easeBounceOut1 - easeBounceIn(1 - t)即先落下、逐级弹跳衰减的经典形态easeBounceInOut前半段 In、后半段 Out 的对称拼接。弹跳族没有可配置参数是九类缓动中唯一不可调参的类型。选型速查与在 d3-transition 中的落地综合各类型的默认值与特性选型可按此速查表决策缓动族默认别名指向关键参数默认值典型观感easeLinear自身无匀速easePolyeasePolyInOutexponent3可调强度的多项式easeQuadeaseQuadInOut无即 exponent 2温和的二次曲线easeCubiceaseCubicInOut无即 exponent 3d3 默认平滑通用easeSineaseSinInOut无柔和的正弦起势easeExpeaseExpInOut无强烈的指数加减速easeCircleeaseCircleInOut无偏硬的圆弧转折easeElasticeaseElasticOutamplitude1须 ≥1、period0.3橡皮筋回弹easeBackeaseBackInOutovershoot1.70158先蓄力后过冲easeBounceeaseBounceOut无橡胶球弹跳在真实动画中的落地方式详见 docs/d3-transition/timing.md// 全局统一缓动 d3.select(.bar) .transition() .duration(750) .ease(d3.easeCubic) // 默认值可省略 .attr(height, newHeight); // 每个元素使用不同缓动easeVarying 接受工厂函数 selection.transition() .easeVarying((d) d3.easePolyIn.exponent(d.exponent));要点回顾缓动函数只负责时间 → 时间的映射每帧被transition.ease调用一次因此自定义缓动只需是纯函数即可所有*In/*Out/*InOut遵循统一构造规律Out 是 In 的时间反转InOut 是二者在 t 0.5 处的对称拼接记忆其中一半即可推导另一半可调参的三类——easePoly.exponent、easeElastic.amplitude/period、easeBack.overshoot——均以返回新函数的方式创建变体不修改原函数天然支持动画前批量预创建曲线形状可用 ExampleEase.vue 同款方式快速验证对任意缓动函数在d3.ticks(0, 1, 500)上采样绘图即可与官方文档中的曲线对照。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 d3-ease 缓动函数完全解析：d3 中时间扭曲与动画质感的实现原理
d3-ease 缓动函数完全解析d3 中时间扭曲与动画质感的实现原理【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3在 d3 中缓动easing是一种通过扭曲时间来控制动画视觉运动的方法最常用于实现 slow-in、slow-out慢进慢出效果让 d3-transition 动画 更加平滑、更符合物理直觉。本文基于 d3 仓库的官方参考文档 docs/d3-ease.md 展开完整覆盖ease函数契约、全部九种缓动类型linear、poly、quad、cubic、sin、exp、circle、elastic、back、bounce及其 In/Out/InOut 变体、exponent/amplitude/period/overshoot等可配置参数的取值与默认值并结合仓库中的源码导出链与文档可视化组件讲清每一类缓动何时选、怎么配、底层怎么算。缓动函数一个把时间映射时间的函数契约d3-ease 模块中的每个缓动类型都实现同一个ease方法接收一个归一化时间t返回对应的缓动后时间tʹ。输入t与输出tʹ通常都在[0, 1]区间内0 代表动画起点1 代表动画终点一个合格的缓动函数应当满足ease(0) 0且ease(1) 1个别类型如easeElastic的缓动时间可能略微越出该区间——这正是回弹过冲等动画质感的来源。基本用法是给归一化时间直接套用某个缓动函数const te d3.easeCubic(t);自定义参数时先在动画开始前创建缓动函数const ease d3.easeElastic.period(0.4);再在动画过程中调用它const te ease(t);在 d3 生态中的位置从 src/index.js 可以看到d3顶层包通过export * from d3-ease将全部缓动函数并入统一命名空间因此d3.easeCubic等可以直接访问package.json 中声明的依赖为d3-ease: ^3.0.1当前 d3 版本 7.9.0在过渡动画中缓动函数由 transition.ease(value) 指定每一帧动画都会调用它一次传入 [0, 1] 之间的归一化时间t返回缓动时间tʹ不显式指定时默认为d3.easeCubictransition.ease(d3.easeCubic); transition.ease() // 读取当前缓动函数返回 d3.easeCubic文档中的交互式曲线图由 ExampleEase.vue 组件渲染该组件用d3.ticks(0, 1, 500)在 [0, 1] 上取 500 个采样点再用 Observable Plot 的Plot.lineX(ticks, ease)绘制每条缓动曲线因此每类缓动的曲线形状都可以直观复现。以下缓动类型大量参考了 Robert Penner 的经典 easing 公式体系。基础族easeLinear 与 easePolyeaseLinear恒等函数线性缓动即恒等函数linear(t)直接返回t时间完全不被扭曲。适合需要匀速运动的场景如进度条扫过、循环滚动。easePoly可配置指数的多项式缓动easePoly是easePolyInOut的别名。其三个变体的语义变体行为与 easePolyIn 的关系easePolyIn将t提升到指定指数默认指数 3等价easeCubicIn—easePolyOut反向多项式缓动等价1 - easePolyIn(1 - t)easePolyInOut对称多项式缓动t∈ [0, 0.5] 用 In 段、t∈ (0.5, 1] 用 Out 段各自缩放拼接通过easePoly.exponent(e)返回一个带指定指数e的新多项式缓动可精确复现 linear/quad/cubicconst linear d3.easePoly.exponent(1); const quad d3.easePoly.exponent(2); const cubic d3.easePoly.exponent(3);官方文档为指数提供了 0.5、1、1.5、2、3、4 六档对比曲线指数越大In 段前期越压平、末尾加速越猛Out 段则相反。easeQuad二次缓动easeQuad是easeQuadInOut的别名easeQuadIn等价easePolyIn.exponent(2)easeQuadOut反向等价1 - easeQuadIn(1 - t)也等价easePolyOut.exponent(2)easeQuadInOut对称前半段缩放easeQuadIn、后半段缩放easeQuadOut也等价easePoly.exponent(2)。easeCubic三次缓动d3 的默认easeCubic是easeCubicInOut的别名easeCubicIn等价easePolyIn.exponent(3)easeCubicOut等价1 - easeCubicIn(1 - t)也等价easePolyOut.exponent(3)easeCubicInOut对称拼接也等价easePoly.exponent(3)。由于transition.ease()未指定时默认就是easeCubic它是 d3 过渡动画中出场率最高的缓动也是最稳妥的默认选择。曲线族easeSin、easeExp 与 easeCircle三者都是 In / Out / InOut 三件套且 Out 一律是 In 的时间反转1 - fIn(1 - t)InOut 一律是前半 In、后半 Out的对称拼接。easeSin正弦缓动easeSinIn返回 sin(t)——以正弦曲线起势起步柔和easeSinOut1 - easeSinIn(1 - t)easeSinInOut对称拼接。easeExp指数缓动easeExpIn将 2 提升到10 × (t - 1)次幂即2^(10(t-1))——起点几乎静止、终点极陡加速感比三次缓动更强烈easeExpOut1 - easeExpIn(1 - t)常用于快速冲入、缓缓收尾的元素入场easeExpInOut对称拼接。easeCircle圆形缓动基于圆弧四分之一圆的斜率变化定义easeCircleIn圆形缓动easeCircleOut1 - easeCircleIn(1 - t)easeCircleInOut对称拼接。圆形缓动的拐点比正弦更硬接近抛物线末端行为适合强调果断感的 UI 动效。弹性族easeElastic 及其两个配置参数easeElastic是easeElasticOut的别名效果像橡皮筋允许缓动值在终点处来回振荡这正是前文所述缓动时间可略越出 [0, 1]的典型。easeElasticIn振幅与周期均可配置默认振幅 1、默认周期 0.3easeElasticOut1 - easeElasticIn(1 - t)是最常用的松手回弹形态easeElasticInOut前半段 In、后半段 Out 的对称形式。两个参数方法均返回新的缓动函数// 指定振幅注意约束 const ease d3.easeElastic.amplitude(1.2); // 指定周期 const ease d3.easeElastic.period(0.4);easeElastic.amplitude(a)振幅a必须 ≥ 1振荡偏离 [0, 1] 的程度随振幅增大而加剧官方文档的交互式滑块范围为 14easeElastic.period(p)周期p控制振荡频率滑块范围为 0.11.5周期越小振荡越密集。文档中为两个参数分别提供了 1.01.5 的振幅对比曲线可以看到振幅越大、回弹过冲越夸张。预期族easeBack 与过冲参数easeBack是easeBackInOut的别名属于预期anticipation类缓动——如同舞者起跳前先屈膝easeBackIn先向反方向蓄力再冲出去过冲度可配置默认 1.70158easeBackOut1 - easeBackIn(1 - t)easeBackInOut对称拼接。const ease d3.easeBack.overshoot(2.5); // 自定义过冲easeBack.overshoot(s)返回带指定过冲s的新 back 缓动官方示例用d3.ticks(0.5, 3, 6)生成 0.5、1、1.5、…、3 共 6 档过冲对比曲线交互式滑块范围为 05。过冲为 0 时退化为普通 In 行为过冲越大反方向的下探越深。弹跳族easeBounceeaseBounce是easeBounceOut的别名效果像一颗橡胶球落地反弹为分段折线式的非对称振荡easeBounceIn弹跳缓动先慢后快、末端以多次衰减反弹收束easeBounceOut1 - easeBounceIn(1 - t)即先落下、逐级弹跳衰减的经典形态easeBounceInOut前半段 In、后半段 Out 的对称拼接。弹跳族没有可配置参数是九类缓动中唯一不可调参的类型。选型速查与在 d3-transition 中的落地综合各类型的默认值与特性选型可按此速查表决策缓动族默认别名指向关键参数默认值典型观感easeLinear自身无匀速easePolyeasePolyInOutexponent3可调强度的多项式easeQuadeaseQuadInOut无即 exponent 2温和的二次曲线easeCubiceaseCubicInOut无即 exponent 3d3 默认平滑通用easeSineaseSinInOut无柔和的正弦起势easeExpeaseExpInOut无强烈的指数加减速easeCircleeaseCircleInOut无偏硬的圆弧转折easeElasticeaseElasticOutamplitude1须 ≥1、period0.3橡皮筋回弹easeBackeaseBackInOutovershoot1.70158先蓄力后过冲easeBounceeaseBounceOut无橡胶球弹跳在真实动画中的落地方式详见 docs/d3-transition/timing.md// 全局统一缓动 d3.select(.bar) .transition() .duration(750) .ease(d3.easeCubic) // 默认值可省略 .attr(height, newHeight); // 每个元素使用不同缓动easeVarying 接受工厂函数 selection.transition() .easeVarying((d) d3.easePolyIn.exponent(d.exponent));要点回顾缓动函数只负责时间 → 时间的映射每帧被transition.ease调用一次因此自定义缓动只需是纯函数即可所有*In/*Out/*InOut遵循统一构造规律Out 是 In 的时间反转InOut 是二者在 t 0.5 处的对称拼接记忆其中一半即可推导另一半可调参的三类——easePoly.exponent、easeElastic.amplitude/period、easeBack.overshoot——均以返回新函数的方式创建变体不修改原函数天然支持动画前批量预创建曲线形状可用 ExampleEase.vue 同款方式快速验证对任意缓动函数在d3.ticks(0, 1, 500)上采样绘图即可与官方文档中的曲线对照。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考