Material Components Web 动画体系指南material/animation 的缓动曲线、过渡函数与浏览器前缀处理【免费下载链接】material-components-webModular and customizable Material Design UI components for the web项目地址: https://gitcode.com/gh_mirrors/ma/material-components-webMaterial in motion is responsive and naturalMaterial 的运动应当响应且自然——这是 Material Design 对动效设计的基本要求。在 Material Components WebMDC Web中这一要求落地为packages/mdc-animation这个基础工具包它提供了一套统一的缓动曲线timing function变量、一组可复用的过渡/关键帧辅助函数以及两个自动处理浏览器前缀的 JavaScript 工具函数。无论你是想为自己的组件加上符合 Material 规范的动效还是想在监听animationend、transitionend等事件时免于手写兼容代码本文都会给出可直接落地的用法与源码级原理。读完本文你将掌握如何用 Sass 变量和函数拼出规范的animation/transition值、四个标准缓动曲线各自适用的场景以及如何用getCorrectEventName/getCorrectPropertyName在不同浏览器中拿到正确的属性名与事件名。安装material/animation是独立发布的 npm 包当前仓库内版本为 14.0.0详见 package.json安装方式npm install material/animation包本身只依赖tslib不携带任何 DOM 组件依赖因此可以放心地作为其他组件的动效基础设施使用。在仓库内部几乎所有交互组件如 mdc-checkbox/component.ts都直接引用了该包导出的前缀处理函数。Sass 用法缓动曲线变量MDC Web 为 Material Design 动效规范中定义的四条标准缓动曲线提供了 Sass 变量可以直接用于animation或transition属性。use material/animation; .my-element--animating { animation: foo-keyframe 175ms animation.$standard-curve-timing-function; }四条曲线变量的完整说明如下这是 Material Design 动效规范的四种标准“速度曲线”变量说明实际值源码定义$deceleration-curve-timing-function减速曲线用于元素进入画面、从快变慢cubic-bezier(0, 0, 0.2, 1)$standard-curve-timing-function标准曲线快速加速后缓慢减速用于最常见的入场/退场cubic-bezier(0.4, 0, 0.2, 1)$acceleration-curve-timing-function加速曲线用于元素离开画面、从慢变快cubic-bezier(0.4, 0, 1, 1)$sharp-curve-timing-function锐利曲线快速加速又快速减速用于列表中元素的临时退场cubic-bezier(0.4, 0, 0.6, 1)上表中的“实际值”并非推测而是 packages/mdc-animation/_animation.scss 中的真实定义$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default; $standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default; $acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default; $sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;四个变量都带有!default标记意味着你在自己的样式表中可以先用同名的自定义值覆盖再引入本模块从而整体替换主题动效曲线。另外注意历史文件 _variables.scss 与 _functions.scss 已标记为deprecated仅通过forward转发_animation.scss的内容新代码请直接依赖_animation.scss。Sass 用法enter / exit 过渡与关键帧函数除了裸变量本包还提供了一组函数用于把「动画名/属性名 时长 延迟」拼装成一条完整的transition或animation简写值。函数签名统一为$name, $duration, $delay其中$delay默认为0ms$name既可以是keyframes的名称也可以是transition中的 CSS 属性名如opacity、transform。示例一用于 transition 的入场/永久退场use material/animation; .my-element { transition: animation.exit-permanent(/* $name: */ opacity, /* $duration: */ 175ms, /* $delay: */ 150ms); opacity: 0; will-change: opacity; --animating { transition: animation.enter(/* $name: */ opacity, /* $duration: */ 175ms); opacity: 1; } }这个例子展示了最常见的模式元素默认处于隐藏态opacity: 0通过exit-permanent定义“永久退场”的过渡一旦加上--animating修饰类就切换到enter定义的“入场”过渡。will-change: opacity则提示浏览器提前为opacity属性建立合成层减少动画过程中的布局/重绘开销。示例二用于 animation 的自定义关键帧use material/animation; keyframes fade-in { from { transform: translateY(-80px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .my-element { animation: animation.enter(/* $name: */ fade-in, /* $duration: */ 350ms); }这里$name传入的是keyframes fade-in的名称函数会把它拼成fade-in 350ms 0ms deceleration 曲线作用于animation简写属性实现一个自顶部滑入并淡入的效果。函数族完整清单官方 README 给出了三个核心函数而从源码 packages/mdc-animation/_animation.scss 看该模块实际提供五个函数函数说明内部使用的缓动曲线源码依据enter($name, $duration, $delay)定义进入画面frame的过渡$deceleration-curve-timing-functionexit-permanent($name, $duration, $delay)定义永久退出画面的过渡$acceleration-curve-timing-functionexit-temporary($name, $duration, $delay)定义暂时退出画面还会回来的过渡$sharp-curve-timing-functionstandard($name, $duration, $delay)标准过渡README 未列出源码提供$standard-curve-timing-functionlinear($name, $duration, $delay)线性过渡README 未列出源码提供linear这些函数的实现非常直观——本质上只是字符串拼接$name $duration $delay $timing-function例如enter实际返回$name $duration $delay $deceleration-curve-timing-function。理解这一点后你就能明白为什么$name既能当 keyframe 名又能当 CSS 属性名两者在animation/transition简写语法中占据的是同一个位置。JavaScript 用法浏览器前缀自动处理在 JavaScript 侧本包提供两个函数用于“根据运行环境自动返回带或不带-webkit-前缀的属性名/事件名”。这在监听 CSS 动画事件时尤其重要——旧版 WebKit 浏览器把animationstart叫作webkitAnimationStart把transitionend叫作webkitTransitionEnd。import {getCorrectEventName} from material/animation; const eventToListenFor getCorrectEventName(window, animationstart); // 在旧版 WebKit 中返回 webkitAnimationStart在现代浏览器中返回 animationstart两个函数的签名与能力如下方法签名说明getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) StandardJsEventType \| PrefixedJsEventType返回 JavaScript 事件名必要时自动加前缀。支持的取值见 types.tsgetCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) StandardCssPropertyName \| PrefixedCssPropertyName返回 CSS 属性名必要时自动加前缀。支持的取值见 types.ts支持的类型范围types.tstypes.ts 中明确定义了可传入的合法值标准 CSS 属性名StandardCssPropertyNameanimation、transform、transition带前缀 CSS 属性名PrefixedCssPropertyName-webkit-animation、-webkit-transform、-webkit-transition标准 JS 事件类型StandardJsEventTypeanimationend、animationiteration、animationstart、transitionend带前缀 JS 事件类型PrefixedJsEventTypewebkitAnimationEnd、webkitAnimationIteration、webkitAnimationStart、webkitTransitionEnd也就是说这两个工具函数只服务于与动画/过渡相关的三个属性和四个事件使用前请确认传入的字符串在以上枚举范围内。底层原理运行时特性检测前缀处理不是靠硬编码 UA 字符串而是运行时特性检测feature detection核心逻辑位于 packages/mdc-animation/util.ts先通过isWindow校验传入对象确实是包含document.createElement的浏览器 Window用document.createElement(div)创建一个测试元素检查标准属性如animation是否存在于该元素的style对象上存在则返回标准名不存在则返回映射表中对应的-webkit-前缀名。const {standard, prefixed} cssPropertyNameMap[cssProperty]; const isStandard standard in el.style; return isStandard ? standard : prefixed;事件名的判定同理但更巧妙它通过检查该事件对应的CSS 属性如animationend对应animation是否受支持来推断事件名是否带前缀因为事件监听能力无法像样式属性一样直接探测。当传入对象不是合法 Window比如测试环境或某些 SSR 场景时函数会原样返回传入值保证调用不抛错。测试用例验证packages/mdc-animation/test/component.test.ts 完整覆盖了上述行为可直接作为行为契约阅读现代浏览器style.animation存在下getCorrectEventName(window, animationstart)返回animationstartgetCorrectPropertyName(window, animation)返回animation不加前缀旧版 WebKit 环境style上只有webkitTransform下三个属性分别返回-webkit-animation、-webkit-transform、-webkit-transition四个事件分别返回webkitAnimationStart、webkitAnimationEnd、webkitAnimationIteration、webkitTransitionEnd传入不含 DOM 节点的windowObj时函数原样返回传入值保证健壮性。附赠工具AnimationFrame 动画帧管理器除了 README 主打的变量、函数与前缀处理外index.ts 还导出了AnimationFrame类源码见 animationframe.ts。它是对requestAnimationFrame/cancelAnimationFrame的键控封装request(key, callback)以key为标识请求一帧若同一key已有未执行的请求会先取消旧请求再注册新请求从而避免快速连续触发时的冗余帧cancel(key)取消指定key的待执行回调cancelAll()清空所有排队回调getQueue()返回尚未执行的回调 key 列表。值得留意的一个实现细节回调执行前会先把key从内部 Map 中删除这样回调内部若再次以相同 key 调用request不会误删自己刚注册的新帧。这类“同一时刻只保留一帧”的管理方式非常适合在滚动、拖拽等高频交互场景中做节流。在项目中的组合使用建议综合以上能力一个符合 Material 动效规范的最小实践可以这样组织// 1. 用曲线变量做自定义动画 use material/animation; .card { transition: opacity 200ms animation.$standard-curve-timing-function; } // 2. 或用 enter/exit 函数直接拼装 .sheet { transition: animation.enter(transform, 250ms); }// 3. 监听动画结束事件时先解析出正确的浏览器事件名 import {getCorrectEventName} from material/animation; const transitionEndEvent getCorrectEventName(window, transitionend); element.addEventListener(transitionEndEvent, () { // 动画结束后的清理逻辑 });再结合AnimationFrame对高频回调做合并即可获得一套跨浏览器、符合规范的动效基础设施。需要继续深入时可以在仓库内阅读 util.ts 与 _animation.scss 的完整实现以及 component.test.ts 中的行为测试作为最权威的行为参考。【免费下载链接】material-components-webModular and customizable Material Design UI components for the web项目地址: https://gitcode.com/gh_mirrors/ma/material-components-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考