免费在 GitHub 公开

example-lottie

Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.

中文简介正在准备中。当前显示原文说明。

BintzGavin/helios星标 123(GitHub 123 + cccskills 0)

实测评分未实测

查看安装方法

包含的文件（1）

SKILL.md1.5 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Lottie + Helios

Integrate Lottie (lottie-web) with Helios by manually seeking the Lottie instance based on the Helios timeline.

Quick Start

import { Helios } from '@helios-project/core';
import lottie from 'lottie-web';
import animationData from './animation.json';

const helios = new Helios({ fps: 30, duration: 5 });

const container = document.getElementById('lottie-container');

// 1. Load Animation (Autoplay OFF)
const anim = lottie.loadAnimation({
  container,
  renderer: 'svg', // or 'canvas'
  loop: false,
  autoplay: false, // Critical
  animationData
});

// 2. Drive with Helios
helios.subscribe(({ currentFrame, fps }) => {
  // Convert to milliseconds
  const timeMs = (currentFrame / fps) * 1000;

  // Seek to exact time
  // Second arg 'false' means "time based", not "frame based"
  // (Lottie frames != Helios frames usually)
  anim.goToAndStop(timeMs, false);
});

Key Patterns

Time-Based Seeking

Lottie animations have their own internal frame rate. It is usually safer and smoother to seek by time (milliseconds) rather than trying to map Helios frames to Lottie frames, unless you strictly control both.

anim.goToAndStop(timeMs, false);

Renderer Choice

svg: Good for crisp vectors in DOM mode.
canvas: Better for performance in Canvas mode or complex scenes.

Source Files

Example: examples/lottie-animation/

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

animated-video-philosophy

免费

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

中文简介正在准备中。当前显示原文说明。