Scene.js 开源项目教程

1. 项目介绍

Scene.js 是一个基于 JavaScript 和 CSS 的时间线动画库，旨在帮助开发者创建复杂的动画效果。它支持两种动画播放方式：JavaScript 和 CSS 动画。Scene.js 提供了丰富的功能，包括对 SVG 动画的支持、多时间线控制、变量效果等。

2. 项目快速启动

安装

首先，通过 npm 安装 Scene.js：

npm install scenejs

基本使用

以下是一个简单的示例，展示如何使用 Scene.js 创建一个动画：

import Scene from "scenejs";

const scene = new Scene({
  ".element": {
    0: { left: "0px", top: "0px", transform: "translate(0px)" },
    1: { left: "100px", top: "0px", transform: "translate(50px)" },
    2: { left: "200px", top: "100px", transform: "translate(100px)" }
  },
  selector: true,
  easing: "ease-in-out"
});

scene.play();

添加媒体（音频/视频）

Scene.js 还支持添加视频和音频组件。首先，安装 @scenejs/media 库：

npm i @scenejs/media

然后，使用以下代码添加媒体：

import MediaScene from '@scenejs/media';

const mediaScene = new MediaScene();
mediaScene
  .addMedia("background", "/background.mp3")
  .seek(0, 40.79);

mediaScene
  .addMedia("video", "/video.mp4")
  .seek(0, 40.79)
  .setVolume(1)
  .setPlaySpeed(1)
  .setDelay(startTime);

scene.setItem("video", mediaScene);

3. 应用案例和最佳实践

案例1：网页加载动画

使用 Scene.js 创建一个网页加载动画，提升用户体验。

const loadingScene = new Scene({
  ".loading-bar": {
    0: { width: "0%" },
    1: { width: "100%" }
  },
  selector: true,
  easing: "linear"
});

loadingScene.play();

案例2：SVG 动画

Scene.js 支持 SVG 动画，可以用于创建复杂的图形动画。

const svgScene = new Scene({
  "svg .path": {
    0: { strokeDashoffset: "1000" },
    1: { strokeDashoffset: "0" }
  },
  selector: true,
  easing: "ease-in-out"
});

svgScene.play();

4. 典型生态项目

1. @scenejs/render

用于通过 Scene.js 生成 CSS 动画的视频。

2. @scenejs/effects

提供了一系列预设的动画效果，可以轻松应用于 Scene.js 动画中。

3. @scenejs/timeline

用于控制 Scene.js 的时间线，可以精确控制动画的时间和属性。

4. @scenejs/media

用于在 Scene.js 中添加和管理音频和视频组件。

通过这些生态项目，开发者可以更灵活地使用 Scene.js 创建复杂的动画效果。