Back to Details

avatar

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Avatar

Avatar 角色

This skill turns an object into a small living character. It draws one flat silhouette with two capsule eyes, then drives the whole body from one loop so it glances, blinks, breathes and reacts.
这个 skill 将对象变成一个小型动态角色。它先绘制一个带有两个胶囊形眼睛的扁平轮廓，再通过一个循环驱动整个身体，使角色能够瞥视、眨眼、呼吸和作出反应。

Measured eyes, a body that is never still

眼睛经过测量，身体永不停歇

The gaze, eye and blink values in face.js are measured off reference footage and are exact. The moods past idle are tuned starting points. A character whose eyes move while its body holds still is a finding.
Gathering references belongs to 
gather
. Taking a reference animation apart frame by frame belongs to 
deconstruct
. Offering silhouette variants belongs to 
prototype
. Interface motion and its 300ms budget belong to 
motion
, not a character's body. Frame cost belongs to 
frames
. Opening the result belongs to 
verify
.
face.js
中的视线、眼睛和眨眼数值均根据参考素材测量得出，必须精确使用。idle 之外的情绪状态只是经过调校的起点。眼睛在动而身体保持静止的角色属于一项检查问题。
收集参考素材属于 
gather
。逐帧拆解参考动画属于 
deconstruct
。提供轮廓变体属于 
prototype
。界面动效及其 300ms 预算属于 
motion
，而不属于角色身体。帧开销属于 
frames
。打开并检查结果属于 
verify
。

1. Study the reference

1. 研究参考素材

When the user names a reference character, open its source and step its recording at 10fps. Measure eye size, tilt, spacing and blink timing off the frames. A character drawn from one glance at the reference is 
avatar-measure-the-reference
.
Keep measured values as measured. Rounding a 
15.5°
eye spacing to 
15°
or a 
180ms
blink to 
200ms
is 
avatar-keep-the-measurements
. With no reference named, start from 
face.js
.
当用户指定一个参考角色时，打开其源素材，并以 10fps 逐步查看其录制内容。根据各帧测量眼睛尺寸、倾斜角度、间距和眨眼时间。仅凭对参考角色看一眼就绘制出的角色属于 
avatar-measure-the-reference
。
保持测量值原样。将 
15.5°
的眼睛间距四舍五入为 
15°
，或将 
180ms
的眨眼改为 
200ms
，均属于 
avatar-keep-the-measurements
。如果未指定参考素材，则从 
face.js
开始。

2. Draw the silhouette

2. 绘制轮廓

Reduce the object to one flat, solid shape in one saturated colour. Keep only the part that names it, such as a handle, a lid or a stem. An outline, shading, a mouth or a nose is 
avatar-flat-silhouette
.
It reads at its shipped size, usually 28–40px. Draw it on a small grid, such as a 14 by 17 viewBox, and crop the viewBox tight to the ink. A part that moves on its own, like a lid, gets its own path.
Colour comes from two variables, 
--avatar-body
and 
--avatar-eyes
, checked in both themes. A fill written into the path is 
avatar-colour-variables
.
将对象简化为一个单一、实心的扁平形状，并使用一种饱和色。只保留能够标识该对象的部分，例如把手、盖子或柄。轮廓线、阴影、嘴巴或鼻子均属于 
avatar-flat-silhouette
。
图形需要在最终交付尺寸下仍然清晰可辨，通常为 28–40px。在小型网格上绘制，例如使用 14×17 的 viewBox，并将 viewBox 紧密裁切至图形内容范围。会独立移动的部件，例如盖子，应拥有自己的 path。
颜色来自 
--avatar-body
和 
--avatar-eyes
这两个变量，并需要在两种主题中检查。直接写入 path 的填充色属于 
avatar-colour-variables
。

3. Put the eyes on a sphere

3. 将眼睛放在球面上

Two white capsules, each about 2.2 times as tall as wide, rest high and to the right. They lean like a backslash, with the head tilted about 12°.
The eyes sit on a sphere behind the face. A yaw, pitch and roll place them, so they narrow near the edge and fade as they turn behind. Eyes sliding flat across the face is 
avatar-eyes-on-a-sphere
. 
drawEyes
in 
face.js
does the projection.
Clip both eyes to the silhouette path, inside the group that moves the body. An eye drawn past the outline is 
avatar-clip-to-the-body
.
两只白色胶囊形眼睛各自的高度约为宽度的 2.2 倍，位于较高且偏右的位置。它们像反斜杠一样倾斜，头部约倾斜 12°。
眼睛位于面孔后方的球面上。通过 yaw、pitch 和 roll 放置眼睛，因此靠近边缘时眼睛会变窄，转到背面时会淡出。眼睛在面孔上平直滑动属于 
avatar-eyes-on-a-sphere
。
face.js
中的 
drawEyes
负责完成这种投影。
将双眼裁剪到轮廓 path 内，并置于驱动身体移动的 group 中。眼睛在宽幅瞥视时伸出轮廓之外，属于 
avatar-clip-to-the-body
。

4. Give the whole body life

4. 让整个身体充满生命力

Nothing holds still. The gaze drifts on layered sine waves and glances to a new spot every 1.5–4s, and big glances bring a blink. A gaze parked at rest between events is 
avatar-never-still
.
Blinks take 180ms and close in the first 45% of it. They land 1.9–4.6s apart, and 18% are doubles. A blink on a fixed interval is 
avatar-irregular-blinks
.
The body breathes 1.2% on a 3.4s cycle, floats slightly and leans toward its gaze a beat late. Eyes settle in about 60ms and the body in 220ms. Eyes moving inside a frozen body is 
avatar-whole-body
.
任何部位都不会静止。视线以分层叠加的正弦波漂移，并每隔 1.5–4s 瞥向一个新位置；大幅瞥视会触发一次眨眼。视线在事件之间停在静止位置，属于 
avatar-never-still
。
眨眼时长为 180ms，并在前 45% 的时间内闭合。眨眼之间的间隔为 1.9–4.6s，其中 18% 为连续两次眨眼。固定间隔的眨眼属于 
avatar-irregular-blinks
。
身体以 3.4s 为周期进行 1.2% 的呼吸起伏，同时略微浮动，并稍晚一拍向视线方向倾斜。眼睛约在 60ms 后稳定，身体约在 220ms 后跟上。只有眼睛在冻结的身体内移动，属于 
avatar-whole-body
。

5. Make moods from eye shapes

5. 使用眼睛形状表现情绪

A mood is one row of numbers: eye width, height, tilt, spacing, openness and a gaze offset. Moods blend over about 90ms on an exponential ease-out and never overshoot. A separate drawing swapped in per mood is 
avatar-moods-as-numbers
.
Start from idle, attentive, excited, happy, sleepy and asleep. Add one or two moves only this object can make, such as a lid that lags behind a hop. A character with no move of its own is 
avatar-object-move
.
一种情绪状态由一行数值定义：眼睛宽度、高度、倾斜角度、间距、睁开程度和视线偏移。情绪状态通过 exponential ease-out（指数缓出）在约 90ms 内混合，且不会发生过冲。为每种情绪切换一张单独绘图的实现属于 
avatar-moods-as-numbers
。
从 idle、attentive、excited、happy、sleepy 和 asleep 开始。再为这个对象增加一两个只有它能做出的专属动作，例如盖子的移动比跳跃稍晚一拍。角色没有任何专属动作，属于 
avatar-object-move
。

6. Wire the reactions

6. 连接交互反应

Each reaction answers one input from the page:
  • The pointer enters after 6s away. The eyes spin 360° round the back over 1.1s, then follow the pointer.
  • The pointer rests on the primary action. The eyes widen and the body bounces slightly.
  • The user presses the action or the character. It hops for 750ms with squash and stretch, then squints happily back out.
  • Nothing happens for 24s. It grows sleepy, falls asleep at 30s with slow deep breaths and wakes with a spin.
Clamp the followed gaze to ±45° of yaw so the eyes stay on the face, and ignore touch pointers for following. A character that ignores the page around it is 
avatar-react-to-the-page
.
When the character is the main toy on its page, it may also react to distance. It turns curious inside 640px, wary inside 260px and recoils inside 100px. A poked eye shuts while the other stays open.
每种反应都对应页面中的一种输入：
  • 指针离开 6s 后重新进入页面。双眼在 1.1s 内绕到后方旋转 360°，随后跟随指针。
  • 指针停留在主要操作项上时，双眼睁大，身体轻微弹跳。
  • 用户按下操作项或角色时，它会跳跃 750ms，并带有挤压与拉伸效果，随后眯眼笑着恢复原状。
  • 24s 内没有任何操作时，它会变得困倦，在 30s 时伴随缓慢而深沉的呼吸入睡，并在醒来时旋转一周。
将跟随视线的 yaw 限制在 ±45°，确保眼睛始终位于面孔上。忽略触摸指针的跟随。角色完全忽略周围页面及其交互，属于 
avatar-react-to-the-page
。
当角色是页面上的主要玩物时，它还可以根据距离作出反应。距离 640px 以内时它会感到好奇，260px 以内时会保持警惕，100px 以内时会退缩。被戳到的一只眼睛会闭合，另一只眼睛则保持睁开。

7. Run it from one loop

7. 使用一个循环运行

One 
requestAnimationFrame
loop steps 
createAvatar
from 
face.js
and writes SVG attributes through refs. The step caps at 64ms so a returning tab does not jump. Per-frame state updates belong to 
frames
.
Run the loop only while the character is on screen, through an 
IntersectionObserver
. A loop that keeps running offscreen is 
avatar-pause-offscreen
.
Render the resting pose on the server from 
restingEyes
, so the first paint already has eyes. A face that pops in on hydration is 
avatar-render-the-rest
.
Under 
prefers-reduced-motion: reduce
, the character holds its resting pose and starts no loop. A character that still glances and hops is 
avatar-still-when-reduced
. The character is decorative, so its SVG takes 
aria-hidden="true"
.
一个 
requestAnimationFrame
循环推进 
face.js
中的 
createAvatar
，并通过 refs 写入 SVG 属性。单步时间上限为 64ms，避免返回标签页时发生跳变。逐帧状态更新属于 
frames
。
仅在角色位于屏幕上时运行循环，并使用 
IntersectionObserver
进行控制。在屏幕外仍持续运行的循环属于 
avatar-pause-offscreen
。
在服务器端使用 
restingEyes
渲染静止姿势，使首次绘制时就已经包含眼睛。角色在 hydration 后才突然出现，属于 
avatar-render-the-rest
。
在 
prefers-reduced-motion: reduce
下，角色保持静止姿势，并且不启动循环。在减少动态效果时仍然瞥视和跳跃，属于 
avatar-still-when-reduced
。该角色仅用于装饰，因此其 SVG 应使用 
aria-hidden="true"
。

8. Prove it on a contact sheet

8. 使用 contact sheet 进行验证

A single screenshot cannot show motion, and a hidden tab throttles the loop. Run sheet.js through the browser's evaluate call, then call 
window.__avatarSheet.start({ selector })
.
Drive each mood with pointer events: idle, enter, hover, press and leave. Call 
window.__avatarSheet.stop()
and screenshot the sheet it lays out. One still frame offered as proof is 
avatar-contact-sheet
.
A 
warning
in the result means the tab was hidden or the loop stalled, so frames repeat or gaps widen. Keep the tab visible and sample again. Sleep needs 30s without input, so sample it once on its own.
Finish with the character at its shipped size in both themes, then call 
window.__avatarSheet.clear()
.
单张截图无法展示运动效果，而隐藏的标签页会节流循环。通过浏览器的 evaluate 调用运行 sheet.js，然后调用 
window.__avatarSheet.start({ selector })
。
使用指针事件驱动每种情绪：idle、enter、hover、press 和 leave。调用 
window.__avatarSheet.stop()
，并截取其生成的 sheet 页面。仅提供一张静止帧作为证明，属于 
avatar-contact-sheet
。
结果中出现 
warning
意味着标签页曾被隐藏或循环已经停滞，因此画面中的帧会重复或间隔变宽。保持标签页可见并重新采样。睡眠状态需要 30s 无输入，因此应单独采样一次。
最后以最终交付尺寸在两种主题下检查角色，然后调用 
window.__avatarSheet.clear()
。

The pair

成对检查项

Every check is a pair. The broken line sits beside the line that replaces it.
RuleBrokenReplacement
avatar-measure-the-reference
Eyes placed from one look at the referenceSize, tilt, spacing and blinks measured off frames at 10fps
avatar-keep-the-measurements
split: 15
, rounded to look tidy
split: 15.5
, as measured
avatar-flat-silhouette
A cup with an outline, shading and a smileOne solid shape and two eyes
avatar-colour-variables
fill="#c27a3e"
in the path
fill="var(--avatar-body)"
, set per theme
avatar-eyes-on-a-sphere
translate(dx, dy)
on both eyes
drawEyes(face, gaze, lid, head)
from yaw, pitch and roll
avatar-clip-to-the-body
An eye hanging past the outline on a wide glanceEyes inside a 
clipPath
of the body path
avatar-never-still
Eyes parked at rest between blinksLayered drift and a glance every 1.5–4s
avatar-irregular-blinks
animation: blink 5s infinite
180ms blinks 1.9–4.6s apart, 18% doubles
avatar-whole-body
Only the eyes moveThe body breathes, floats and leans 220ms behind the gaze
avatar-moods-as-numbers
{happy ? <HappyFace /> : <Face />}
happy: { eyes: pair(0.522, 0.217, 18) }
, blended over 90ms
avatar-object-move
A cup that moves like any blobThe lid lifting a beat behind the hop
avatar-react-to-the-page
One idle loop whatever the pointer doesSpin on enter, follow, widen on hover, hop on press, sleep when left
avatar-pause-offscreen
A loop running below the foldThe loop started and stopped by an 
IntersectionObserver
avatar-render-the-rest
Eyes appearing after hydration
restingEyes(head)
in the server HTML
avatar-still-when-reduced
Glancing and hopping under reduced motionThe resting pose and no loop
avatar-contact-sheet
One screenshot of the idle poseA 
sheet.js
sheet through every mood, then shipped size in both themes
每一项检查都是成对出现的。问题写法紧挨着替代写法。
规则问题写法替代写法
avatar-measure-the-reference
仅凭看一眼参考图就放置眼睛以 10fps 逐帧测量尺寸、倾斜角度、间距和眨眼时间
avatar-keep-the-measurements
split: 15
，为了美观而四舍五入
split: 15.5
，保持实测值
avatar-flat-silhouette
带轮廓、阴影和微笑的杯子一个实心形状加两只眼睛
avatar-colour-variables
在 path 中直接写入 
fill="#c27a3e"
使用 
fill="var(--avatar-body)"
，并按主题设置
avatar-eyes-on-a-sphere
对双眼使用 
translate(dx, dy)
通过 yaw、pitch 和 roll 使用 
drawEyes(face, gaze, lid, head)
avatar-clip-to-the-body
大幅瞥视时眼睛悬在轮廓之外双眼置于身体 path 的 
clipPath
内
avatar-never-still
双眼在两次眨眼之间停在静止位置分层漂移，并每隔 1.5–4s 瞥视一次
avatar-irregular-blinks
animation: blink 5s infinite
眨眼时长 180ms，间隔 1.9–4.6s，其中 18% 为连续两次眨眼
avatar-whole-body
只有眼睛在动身体呼吸、浮动，并在视线之后 220ms 才倾斜跟随
avatar-moods-as-numbers
{happy ? <HappyFace /> : <Face />}
happy: { eyes: pair(0.522, 0.217, 18) }
，在 90ms 内混合
avatar-object-move
像普通斑点一样移动的杯子盖子的抬起比跳跃稍晚一拍
avatar-react-to-the-page
无论指针做什么都只运行一个 idle 循环进入时旋转、跟随、悬停时睁眼、按下时跳跃、离开后入睡
avatar-pause-offscreen
在首屏以下持续运行的循环由 
IntersectionObserver
启动和停止循环
avatar-render-the-rest
hydration 后眼睛才出现在服务器 HTML 中使用 
restingEyes(head)
avatar-still-when-reduced
在减少动态效果时仍然瞥视和跳跃保持静止姿势且不运行循环
avatar-contact-sheet
idle 姿势的单张截图通过 
sheet.js
展示每种情绪的 sheet，最后以最终交付尺寸展示两种主题

Reporting

报告

Severity. 
HIGH
is a body that never moves, eyes escaping the silhouette or motion under reduced motion. 
MEDIUM
is flat sliding eyes, a fixed blink, swapped mood drawings, an offscreen loop, a missing reaction or proof from one screenshot. 
LOW
is a rounded measurement, a fill in the path, a rest pose that pops in or a character with no move of its own.
Format. One finding per root cause:
file:line - [rule-id] what is wrong
Then a 
Rule | Count | Severity
summary. 
Block
when any 
HIGH
remains, 
Approve
otherwise. Mark a reference you could not open or step through as 
Not verified
.
严重程度。 
HIGH
表示身体完全不动、眼睛超出轮廓，或者在减少动态效果时仍执行动效。
MEDIUM
表示眼睛平面滑动、眨眼间隔固定、为情绪切换单独绘图、屏幕外仍运行循环、缺少某种反应，或者仅凭单张截图提供证明。
LOW
表示测量值被四舍五入、path 中直接写入填充色、静止姿势在 hydration 后突然出现，或者角色没有任何专属动作。
格式。 每个根本原因输出一个问题：
file:line - [rule-id] what is wrong
然后给出一个 
Rule | Count | Severity
汇总。只要仍有任何 
HIGH
，就标记为 
Block
；否则标记为 
Approve
。如果无法打开或逐步查看某项参考素材，请将其标记为 
Not verified
。