·design·FEATURED
CSS 动画与 Arknights UI — 打造游戏级 Web 动效
分析明日方舟 UI 动效系统的设计语言，用纯 CSS 复现弹性曲线、几何入场、滚动驱动动画。
CSS 动画与 Arknights UI — 打造游戏级 Web 动效
明日方舟的 UI 动效系统以其克制和精确著称。本文将分析其动效语言并用 CSS 复现。
动效哲学
方舟的动效不是"炫技"，而是服务于信息的清晰传达：
- 确定感 — 面板以 spring 曲线弹入，给人明确的"已完成"反馈
- 方向性 — 列表从下向上入场，暗示层级关系
- 微反馈 — 按钮点击时微小缩放，确认操作已接收
核心曲线
css13 L
:root {
/* 弹性收尾 — 面板入场、按钮反馈 */
--ease-endfield-spring: cubic-bezier(0.33, 1, 0.68, 1);
/* 柔和减速 — 段落入场 */
--ease-endfield-gentle: cubic-bezier(0.22, 0.61, 0.36, 1);
/* 超平滑 — 滚动驱动动画 */
--ease-endfield-smooth: cubic-bezier(0.76, 0, 0.24, 1);
/* 减速停止 — 覆盖层退出 */
--ease-endfield-decel: cubic-bezier(0, 0, 0.2, 1);
}几何入场动画
css15 L
/* 六边形 mask 展开 */
@keyframes hex-reveal {
0% {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
opacity: 0;
}
100% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
opacity: 1;
}
}
.geo-entrance {
animation: hex-reveal 0.8s var(--ease-endfield-smooth) forwards;
}滚动驱动动画
css11 L
/* 段落差分入场 — 无需 JS！ */
.prose-ark p {
animation: para-reveal 0.5s var(--ease-endfield-gentle) both;
animation-timeline: view();
animation-range: entry 5% cover 20%;
}
@keyframes para-reveal {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0); }
}性能考量
重要：在移动端禁用滚动驱动动画。
animation-timeline: view()在低端设备上可能造成卡顿。
css6 L
@media (max-width: 640px) {
.prose-ark p {
animation: none !important;
opacity: 1;
}
}这些动效已应用于 ARKNEXUS 博客系统。