R06.05.01.03 · 任务小类

标志与形状动画（Lottie）

Logo & shape animation with Lottie export

Animate vector logos and export Lottie that plays correctly.

20 条本项目编写的提案 · 分类 v1.1 · 新增基准运行 0 次。下方验证方式与部分得分规则是设计，不是执行结果。

典型应用: After Effects · Bodymovin · Rive
小类 GUI 需求标签: HY · 混合

任务提案 · 20

展开查看完整原文与建议检查方式；两种界面均保留提案英文原文。

R06.05.01.03-T01 Draw on an SVG logo with trim paths and export Lottie

原始指令

In After Effects, import input/logo.svg as shape layers (Create Shapes from Vector Layer) in a 512×512, 60 fps comp. Reveal all strokes with Trim Paths from 0% to 100% over 1.5 s with ease-out, then hold to 2 s. Export Lottie with Bodymovin to out/logo_draw.json (op = 120).

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: path · 连续路径 click · 指向与点击 geom · 精确几何
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 3 / 5

建议验证方式

JSON: fr = 60, op = 120, w/h = 512, only shape layers (no image assets), trim-path ('tm') items present. Render with lottie-web via headless browser: frame 90 matches the static logo (SSIM ≥ 0.97); stroke coverage monotonic from 0 to 100% over frames 0–90 with ease-out.

建议部分得分

25% JSON header spec; 15% vector-only; 35% draw-on progression; 25% final frame matches logo.

R06.05.01.03-T02 Morph one icon into another with matched vertices

原始指令

In After Effects (512×512, 30 fps), morph input/icon_play.svg into input/icon_pause.svg over 20 frames by keyframing a single path per shape with equal vertex counts and sensible first-vertex alignment (no twisting). Export Lottie to out/play_pause.json.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: path · 连续路径 geom · 精确几何 vis · 视觉判断
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 4 / 5

建议验证方式

JSON: path keyframes ('ks' with 2+ keys) whose start/end vertex counts match; lottie-web render: frame 0 IoU ≥ 0.97 with play icon, frame 20 IoU ≥ 0.97 with pause icon; intermediate frames have no self-intersections (polygon validity) and area changes monotonically.

建议部分得分

30% start/end shapes; 25% equal vertex counts; 30% no twisting/self-intersection; 15% export spec.

R06.05.01.03-T03 Make a looping Telegram sticker under 64 KB

原始指令

Animate the mascot in input/mascot.ai (After Effects, 512×512, 60 fps, 3 s) waving its arm in a seamless loop, and export with Bodymovin as Lottie, then convert to Telegram .tgs at out/wave.tgs (gzip). Constraints: ≤ 64 KB, ≤ 3 s, no raster images, no unsupported effects.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: geom · 精确几何 path · 连续路径 vis · 视觉判断
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 3 / 5

建议验证方式

File ≤ 65,536 bytes, valid gzip Lottie, 512×512, fr 60, op ≤ 180, no image assets or expressions; rlottie render: arm (GT region) moves (≥ 15° rotation range) and frame 0 vs final+1 SSIM ≥ 0.98 (seamless loop).

建议部分得分

30% size and format limits; 20% vector-only/no expressions; 25% wave motion; 25% seamless loop.

R06.05.01.03-T04 Build an interactive Rive button with a state machine

原始指令

In the Rive editor, from input/button.svg build an artboard 'Button' with animations Idle, Hover (scale 1.05, 150 ms) and Press (scale 0.95 + color #1D4ED8), a state machine 'ButtonSM' with Boolean input 'isHover' and Trigger 'press', and export out/button.riv.

平台: web · 任意系统（网页） mac · macOS win · Windows
应用: Rive
交互表面: brow · 浏览器 desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 drag · 拖放 geom · 精确几何
工作产物: WP05 · 时序媒体
条件: 未声明
提案难度: 4 / 5

建议验证方式

Rive runtime test harness: state machine 'ButtonSM' exists with inputs isHover (bool) and press (trigger); setting isHover true → rendered scale 1.05 ± 0.01 after 150 ms; firing press → scale 0.95 and fill ΔE2000 ≤ 2 to #1D4ED8; returns to idle.

建议部分得分

25% animations exist; 25% inputs defined; 35% runtime behavior; 15% export valid.

R06.05.01.03-T05 Create a seamless loading spinner Lottie under 20 KB

原始指令

In After Effects, create a 200×200, 60 fps spinner: an arc with trim paths whose length oscillates while the whole arc rotates 360° per second, looping seamlessly over 2 s. Export out/spinner.json with Bodymovin, ≤ 20 KB, no expressions.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: geom · 精确几何 click · 指向与点击
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 2 / 5

建议验证方式

JSON ≤ 20,480 bytes, fr 60, op 120, no 'x' expression fields; lottie-web render: arc angle advances 360° ± 5° per 60 frames; arc length varies ≥ 30%; frame 0 equals frame 120 (SSIM ≥ 0.99).

建议部分得分

25% size/no expressions; 25% rotation rate; 25% length oscillation; 25% seamless loop.

R06.05.01.03-T06 Make an AE logo animation render identically as Lottie

原始指令

fixtures/logo_fx.aep uses features Lottie renders poorly (Gaussian Blur, Merge Paths, expressions, a luma matte). Rework it so the Bodymovin export out/logo_fx.json looks like the AE render in lottie-web and lottie-android (SSIM ≥ 0.95 per frame vs input/ae_reference.mp4) while keeping duration and timing.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: HY · 混合
交互原语: geom · 精确几何 path · 连续路径 vis · 视觉判断
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件 long · 长流程
提案难度: 5 / 5

建议验证方式

Render JSON in lottie-web (headless Chrome) and lottie-android (emulator harness): mean per-frame SSIM ≥ 0.95 and min ≥ 0.9 vs reference in both; JSON contains no expressions or merge-path items; same op and fr as reference.

建议部分得分

40% lottie-web parity; 35% lottie-android parity; 15% unsupported features removed; 10% timing preserved.

R06.05.01.03-T07 Export a title animation with text converted to shapes

原始指令

In After Effects comp 'Hello' (fixtures/hello.aep), the animated text uses a licensed font. Convert the text to shape layers (Create Shapes from Text) keeping the per-letter animation, and export out/hello.json so it renders without the font installed.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 vis · 视觉判断
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 3 / 5

建议验证方式

JSON: no text layers (ty 5) and no 'fonts' list; lottie-web render on a machine without the font: per-frame SSIM ≥ 0.95 vs the AE reference render; per-letter animation timing preserved (letter-box onset within 1 frame).

建议部分得分

35% no text/font dependency; 45% visual parity; 20% per-letter timing.

R06.05.01.03-T08 Recolor and retime a Lottie in the LottieFiles editor

原始指令

In the LottieFiles web editor (test account), open input/success_check.json, replace its 4 colors with the brand palette in input/palette.json (map by role: primary, accent, background, stroke), set playback speed to 1.5× by changing frame rate or timing, and export out/success_brand.lottie (dotLottie).

平台: web · 任意系统（网页）
应用: LottieFiles
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 type · 文字与表单
工作产物: WP05 · 时序媒体
条件: 未声明
提案难度: 2 / 5

建议验证方式

Unzip .lottie: animation JSON colors equal palette by role (exact RGB); duration = original / 1.5 (± 1 frame); render frames otherwise match recolored reference (SSIM ≥ 0.97).

建议部分得分

50% colors mapped by role; 30% speed change; 20% valid dotLottie.

R06.05.01.03-T09 Export a Lottie with intro, loop and outro markers

原始指令

In After Effects comp 'Toggle' (fixtures/toggle.aep, 60 frames), add comp markers named 'intro' (0–20), 'loop' (20–40) and 'outro' (40–60) with durations, and export out/toggle.json so that an app can play the named segments.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: click · 指向与点击 type · 文字与表单
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 3 / 5

建议验证方式

JSON 'markers' array has 3 entries with cm names and tm/dr exactly as specified; lottie-web playSegments by marker name plays frames in those ranges (harness check); animation unchanged otherwise.

建议部分得分

60% three markers exact (20 points each); 30% playback by name works; 10% animation unchanged.

R06.05.01.03-T10 Rig a Rive character with blink and look-at inputs

原始指令

In the Rive editor, from input/robot_face.riv (static artboard), add bones/constraints so the pupils follow a Number input 'lookX' (−1…1) via a blend state, a random-interval blink animation (every 2–5 s), and a Trigger 'surprise' that widens the eyes for 600 ms. State machine 'FaceSM'; export out/robot_face.riv.

平台: web · 任意系统（网页） mac · macOS win · Windows
应用: Rive
交互表面: brow · 浏览器 desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: geom · 精确几何 drag · 拖放 path · 连续路径
工作产物: WP05 · 时序媒体
条件: long · 长流程
提案难度: 5 / 5

建议验证方式

Runtime harness: lookX = −1/0/1 moves pupil centers to GT positions (± 3 px) with linear blend; blink occurs 2–5 s apart over 30 s; surprise scales eye whites ≥ 1.2× for 600 ± 50 ms then returns.

建议部分得分

40% look-at blend; 25% blink timing; 25% surprise trigger; 10% state machine structure.

R06.05.01.03-T11 Reveal a logo with a shape-layer mask wipe

原始指令

In After Effects (1080×1080, 30 fps) reveal input/logo.svg with an animated shape-layer track matte wiping diagonally from bottom-left to top-right over 24 frames, followed by the tagline sliding up 40 px with opacity 0→100 over 12 frames. Export out/logo_reveal.json.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: geom · 精确几何 path · 连续路径 click · 指向与点击
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 3 / 5

建议验证方式

lottie-web render: revealed logo area grows monotonically along the diagonal (centroid moves bottom-left→top-right) and is complete at frame 24; tagline starts after 24, rises 40 ± 3 px and fades in over 12 frames; matte present (tt/td) in JSON.

建议部分得分

45% diagonal wipe; 35% tagline motion; 20% matte in JSON and valid export.

R06.05.01.03-T12 Animate a consistent six-icon set and export each

原始指令

Animate the 6 icons in input/icons/*.svg in After Effects as separate comps (96×96, 60 fps), each a 500 ms 'activate' animation with the same easing (cubic-bezier 0.4,0,0.2,1) and stroke width 2 px, and export each as out/icons/icon_<name>.json.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: geom · 精确几何 path · 连续路径 click · 指向与点击
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 3 / 5

建议验证方式

6 JSON files named correctly; each op = 30 at 60 fps; stroke widths = 2 in all shape strokes; motion progress curves (from render tracking) fit the specified bezier (RMS ≤ 0.04) in all 6; final frame equals static icon (SSIM ≥ 0.97).

建议部分得分

20% files/naming; 20% duration; 15% stroke width; 45% shared easing and end state.

R06.05.01.03-T13 Write on a signature in stroke order

原始指令

In After Effects, from input/signature.svg (7 strokes, order given in input/stroke_order.txt), animate a write-on with Trim Paths so strokes draw sequentially in that order at constant pen speed (800 px/s), total under 3 s. Export out/signature.json.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: path · 连续路径 click · 指向与点击 geom · 精确几何
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 3 / 5

建议验证方式

lottie-web render: per stroke (GT masks) start time ordering equals stroke_order; no two strokes drawing simultaneously; drawn length rate 800 ± 80 px/s; complete signature matches SVG (IoU ≥ 0.95).

建议部分得分

40% stroke order; 30% constant speed; 15% no overlap in time; 15% final match.

R06.05.01.03-T14 Fix rendering differences across Lottie players

原始指令

input/promo_banner.json renders correctly in lottie-web but differs in lottie-ios and lottie-android (gradient fills, rounded-corner modifiers, a precomp time remap). Edit the source fixtures/promo_banner.aep and re-export so all three renderers match the AE reference within SSIM ≥ 0.95.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: vis · 视觉判断 click · 指向与点击 geom · 精确几何
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件 hidden · 隐藏 / 过期状态
提案难度: 4 / 5

建议验证方式

Harness renders with lottie-web, lottie-ios (simulator) and lottie-android (emulator): mean SSIM vs AE reference ≥ 0.95 in all three; per-frame min ≥ 0.9; duration unchanged.

建议部分得分

30% web parity; 35% iOS parity; 35% Android parity.

R06.05.01.03-T15 Export a procedural Cavalry animation as Lottie

原始指令

In Cavalry, build a 600×600, 30 fps, 4 s animation: 12 circles on a ring (Duplicator, radius 200) that pulse in scale with a stagger wave travelling around the ring once per 2 s, looping. Export Lottie to out/pulse_ring.json.

平台: mac · macOS win · Windows
应用: Cavalry
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: click · 指向与点击 drag · 拖放 geom · 精确几何
工作产物: WP05 · 时序媒体
条件: 未声明
提案难度: 3 / 5

建议验证方式

lottie-web render: 12 circles centered on a 200 ± 2 px ring; per-circle scale phase offset = i/12 of the 2 s period (±2 frames); loop: frame 0 equals frame 120 (SSIM ≥ 0.99); JSON valid with op = 120.

建议部分得分

25% ring layout; 40% stagger wave phases; 20% loop; 15% export validity.

R06.05.01.03-T16 Shrink a heavy Lottie to under 150 KB without visual change

原始指令

input/hero_anim.json is 1.2 MB (hidden layers, unused precomps, dense baked keyframes, a raster image). Starting from fixtures/hero_anim.aep, optimize and re-export so out/hero_anim_opt.json is ≤ 150 KB, vector-only, and visually identical (per-frame SSIM ≥ 0.98 vs original render).

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI term · 终端
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: HY · 混合
交互原语: click · 指向与点击 code · 代码与命令 vis · 视觉判断
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 4 / 5

建议验证方式

File size ≤ 153,600 bytes; no image assets; lottie-web per-frame SSIM ≥ 0.98 (mean) and ≥ 0.95 (min) vs original JSON render; same op/fr.

建议部分得分

40% size target (half credit at ≤ 300 KB); 15% vector-only; 35% visual parity; 10% timing unchanged.

R06.05.01.03-T17 Control: hand-author the T05 spinner Lottie JSON

原始指令

Control pair of T05 (CLI half). Without After Effects, write out/spinner_code.json (Lottie schema) by hand or with a script: same spec as T05 (200×200, 60 fps, 2 s seamless loop, rotating arc with oscillating trim length, ≤ 20 KB, no expressions).

平台: lin · Linux mac · macOS win · Windows
应用: Python · lottie-web
交互表面: term · 终端
GUI 需求 · 任务设定: CL · CLI 足够
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: code · 代码与命令
工作产物: WP05 · 时序媒体
条件: 未声明
提案难度: 2 / 5

建议验证方式

Same checks as T05 with lottie-web render. Paired with T05 to measure GUI authoring vs direct schema authoring for simple motion.

建议部分得分

25% size/no expressions; 25% rotation; 25% length oscillation; 25% loop.

R06.05.01.03-T18 Author a dotLottie with a hover/click state machine

原始指令

Using the LottieFiles editor (or dotLottie tooling), package input/heart.json into out/heart.lottie with a state machine: Idle loops segment 0–30, Hover plays 30–45 and holds, Click plays 45–90 once then returns to Idle; and a dark theme that swaps the heart fill to #FF6B81.

平台: web · 任意系统（网页）
应用: LottieFiles
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: click · 指向与点击 type · 文字与表单
工作产物: WP05 · 时序媒体
条件: 未声明
提案难度: 4 / 5

建议验证方式

dotLottie manifest lists the state machine and theme; dotlottie-web player harness: pointer events reproduce the 3 states with frame ranges ±1; theme applied → fill ΔE2000 ≤ 2 to #FF6B81.

建议部分得分

20% package valid; 50% state machine behaviors; 30% theme.

R06.05.01.03-T19 Animate a four-part logo lockup to a timing spec

原始指令

From input/brand_logo.ai (mark, wordmark, tagline, underline) build the lockup animation in After Effects per input/motion_spec.csv (start, duration, easing per element; mark rotates in 90°→0°, wordmark letters stagger 2 frames, underline draws 0→100%). Export out/lockup.json and out/lockup.mp4 (1920×1080).

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: geom · 精确几何 path · 连续路径 click · 指向与点击 vis · 视觉判断
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件
提案难度: 4 / 5

建议验证方式

Tracking on both lottie-web render and MP4: per element start/end within ±1 frame of spec; easing curve RMS ≤ 0.05 of specified bezier; mark rotation 90→0; letter stagger 2 frames; underline progress; final frame SSIM ≥ 0.97 vs static logo.

建议部分得分

35% element timing; 25% easing; 20% specific motions; 20% final lockup and both exports.

R06.05.01.03-T20 Produce a three-scene onboarding Lottie under 250 KB

原始指令

From input/onboarding_frames.fig exports (3 scenes, SVG assets) create in After Effects a 375×600, 30 fps onboarding animation: each scene 3 s with elements entering per input/storyboard.pdf, scene transitions, a looping idle in scene 3, markers 'scene1'–'scene3'. Export out/onboarding.json ≤ 250 KB rendering identically on web, iOS and Android.

平台: mac · macOS win · Windows
应用: After Effects · Bodymovin
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: geom · 精确几何 path · 连续路径 drag · 拖放 vis · 视觉判断
工作产物: WP05 · 时序媒体
条件: licensed · 授权专业软件 long · 长流程
提案难度: 5 / 5

建议验证方式

Size ≤ 256,000 bytes; vector-only; markers exact; per scene element entrance windows within ±2 frames of storyboard and settled positions within 6 px; scene 3 loop seamless; cross-renderer SSIM ≥ 0.95.

建议部分得分

15% size/vector; 15% markers; 35% storyboard timing/layout; 35% loop and renderer parity.

已有研究映射

当前映射未给此小类指定基准参考。

标志与形状动画（Lottie）

任务提案 · 20

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

已有研究映射

同工作流族的小类