跳到正文
GuideMake
指南
Getting started Assets
标识
Logo Brand attributes Co-branding
色彩
Foundation colors 基础渐变
字形
Chinese typeface English typeface
图形
Diagrams Iconography Illustration
品牌感受
Long image themes Moodboard Presentations Social Swag
动效
Overview
用户_84520…免费
MCP 服务
生活号 BrandKit/动效

动效,用进入、响应与重新排列让生活号的生长感被看见,并以统一参数复现。

README 约束 Skill

Enter

内容从下方轻微上移并放大进入,用于页面、模块和重点信息首次出现。进入完成后保持稳定,不循环漂浮。

In motion

Move

元素沿明确路径重新排列,用于筛选、排序和状态切换。路径只解释状态变化,不制造多余轨迹。

Responsive motion

Motion Tokens

微交互、常规切换和场景进入使用统一时长与缓动参数,设计稿和前端实现直接复用同一组数值。

Micro160ms
Default240ms
Scene360ms
Easingcubic-bezier(0.2, 0.8, 0.2, 1)

这条规范如何写成代码

{
  "brand.motion.duration.micro": {
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "brand.motion.duration.default": {
    "$value": {
      "value": 240,
      "unit": "ms"
    }
  },
  "brand.motion.duration.scene": {
    "$value": {
      "value": 360,
      "unit": "ms"
    }
  },
  "brand.motion.easing.standard": {
    "$value": [
      0.2,
      0.8,
      0.2,
      1
    ]
  }
}

brand.motion.duration.micro按钮反馈和极小范围变化。

brand.motion.duration.default模块切换和常规进入。

brand.motion.duration.scene较大场景或内容编排进入。

brand.motion.easing.standard默认缓动:快速响应,平稳收尾。

本页

EnterMoveMotion Tokens