Scene.js 库：CSS创建动画基于时间轴的动画

Scene.js 是一个基于 JavaScript 时间轴的动画库，用于创建动画网站，作为一个动画时间轴库，它允许你创建对象的移动和位置的时间顺序。

此外，由于 Scene.js 的语法类似于 CSS 动画，同时还支持 JavaScript 和 CSS 的播放方法，因此使用起来简单又方便。在本文中，我将详细介绍它的主要特点。

可同时控制多个元素

要知道，动画元素很难控制，因为动画的开始和结束时间并不同。

来源：https://github.com/daybrush/scenejs-timeline

而 Scene.js 可以同时控制多个动画元素，即使开始和结束时间都不同，也可以进行重播。

你可以通过同时开始和结束来重播一个场景。

Scene.js 还可以让你完全控制时间，这样你就可以准确地显示当前时间的移动情况。

通过转换 CSS 语法很容易使用

Scene.js 类似于 CSS 使用关键帧的方式，允许按原样使用 CSS 属性。因此，那些用过 CSS 动画的人可以很容易地使用 Scene.js。以下是 CSS 关键帧的代码。

.animate {
  animation-name: keyframes1;
  animation-duration: 4;
  animation-iteration-count: 3;
  animation-timing-function: ease-in-out;
}
@keyframes keyframes1 {
  0% {
    left: 0%;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 30%;
  }
}

但是 CSS 动画可能会让人感到不适，因为它写入的相对时间（%）太长，而且名称也过长，还没有可用的自定义函数。因此 Scene.js 改进了这些缺陷：

使用绝对时间（s）而不是相对时间（%）

CSS 动画使用的是基于 100% 的相对时间（%）。如果你提前知道动画将持续多长时间，那么可以很容易地使用 % 来编写，但编写所需的时间可能比预期的要多或要少。每次使用相对时间，很是不便。但 Scene.js 使用的是绝对时间，因此不必再考虑这些不便之处。

new Scene({
  ".animte": {
      0: {
        left: "0%",
      },
      2: {
        left: "50%",
      },
      4: {
        left: "30%",
      },
  },
}, {
  selector: true,
  iterationCount: 3,
  easing: "ease-in-out",
}).playCSS();

CSS 是基于 100%，但 Scene.js 可以用绝对时间来编写。

支持交叉浏览并省略动画属性前缀

与动画相关的属性包括前缀 animation-。而且，名称更长，因为你甚至必须还要附加供应商前缀（如 -webkit- 、-moz-、-o-等），才能支持交叉浏览。

new Scene({
  ".animte": {
      0: {
        left: "0%",
      },
      2: {
        left: "50%",
      },
      4: {
        left: "30%",
      },
  },
}, {
  selector: true,
  iterationCount: 3,
  easing: "ease-in-out",
}).playCSS();

Scene.js 可以省略与动画相关的属性的前缀。而且，由于它支持交叉浏览，因此可以从供应商前缀中省掉三个属性：animation、transform 和 keyframes。

/* Scene.js */
new Scene({
  ".selector": {
    0: {
      transform: {
        tranlsate: "0px",
      },
    },
    1: {
      transform: {
        tranlsate: "100px",
      },
    },
  },  
}, {
  duration: 3,
  easing: "ease",
}).playCSS();

支持 JavaScript 和 CSS 播放方法都很方便

Scene.js 同时支持 JavaScript 和 CSS 的两种播放方法。这意味着你可以使用任何播放方法来表示相同的动画。然而，这两种语言的优势并不同，因此我建议你要根据自己的实际需求进行选择。

使用 JavaScript 播放动画的优势如下：

• 交互和内部控制： 有时动画需要通过交互（如鼠标、键盘、浏览器和其他 DOM 事件）进行动态更改。使用静态 CSS 动画的话很难控制，所以必须使用 JavaScript 动画。

• 支持无法用 CSS 表示的属性： HTML、DOM 属性不能实现为 CSS，且浏览器也不支持某些属性。比如，Internet Explorer 就不支持 CSS 动画，支持 CSS 动画的 SVG 动画浏览器非常有限，因此在这种情况下，就必须使用 JavaScript 动画。

CSS 动画的优势在于拥有比 JavaScript 动画更好的性能。因为 JavaScript 动画是在主线程上运行的，因此如果你要进行大量处理的话，动画看起来可能很棘手。但是，CSS 动画可以做到看起来更平滑流畅，因为它们是在不同的线程上运行的。

那么，我可以在 Scene.js 中使用 CSS 属性和格式吗？因为它是一个 JavaScript 库，所以不能按原样来使用 CSS 属性和格式，但 JavaScript 格式的实现类似如下：

支持各种值类型

CSS 属性支持多种类型，并转换为值以便在浏览器中进行计算。Scene.js 还可以通过替换浏览器内部的转换来处理不同类型的 JavaScript。

• number: 它必须是一个数字才能进行计算。

不透明度： 0 ~ 1

• string(number + unit): 在某些情况下，10px、10%、10em 等都是带有数字和单位的字符串。在这种情况下，数字是通过除以数字和单位来计算的。（但是，单位必须相同。）

平移：100% to 0%

• color: 它支持 hex、rgb(a) 和 hsl(a) 等颜色模型。全部由 rgba 替换并计算为 rgba 的数值。

• string: 字符串无法计算，在时间为 1 之前指明第一个值，并在到达 1 时指明第二个值。

打字

提供 CSS 使用的缓动

easing(timing-function) 会改变进度的速度。你可以为动画元素赋予一种速度感，例如快节奏的第一个节奏和慢节奏的最后一个节奏。

了解更多有关缓动（easing）不同之处，请查阅：

https://daybrush.com/scenejs/features.html#easing

Scene.js 以常量的形式提供了 CSS 所支持的缓动，无论 JavaScript 和 CSS 如何播放，都可以显示出相同的外观。即使 CSS 不支持，你也可以创建并使用自己的缓动。

/* CSS Easing */
{
  easing: Scene.EASE_IN, // EASE_OUT, EASE_IN_OUT, ...
}
/* Custom */
{
  easing: t => 1 - Math.pow(t, 3),
}

支持各种效果预设

即使你使用了一个使 CSS 动画易于编写的库，你也有可能不知道 CSS。有些人可能比 CSS 属性名称更熟悉动画效果的名称。@scenejs/effects使用 CSS 属性预设流行的动画，来帮助简化编写代码。

以下是 Scene.js 提供的效果预设：

• wipeIn / wipeOut

• zoomIn / zoomOut

• fadeIn / fadeOut

• blink

• flip / flipX / flipY

• shake / shakeX / shakeY

• transition

transition 有助于在场景之间进行过渡，如下图的演示所示：

Scene.js 支持的框架

Scene.js 支持主流框架：React、Angular、Vue 和 Preact 框架。使用每个框架的正确语法比仅仅使用它更加容易。

• 在 React 中使用：react-scenejs

• 在 Angular 中使用：ngx-scenejs

• 在 Vue 中使用：vue-scenejs

• 在 Preact 中使用：preact-scenejs

说明

你可以使用这个库自由创建任何内容，不存在任何限制。你可以创建简单的动画和复杂的场景动画，也可以使用他们进行创建各种项目。

代码和项目都可以在 GitHub 上找到：https://github.com/daybrush/scenejs

CSS 动画和示例，都可在 CodePen 上找到：https://codepen.io/collection/DLWxrd/2/

要与 nmp 或脚本一起使用，请运行如下命令：

• npm

 

npm install scenejs

• script

<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>

请参阅 Scene.js features 来了解它的主要特性：
https://daybrush.com/scenejs/features.html

请参阅 Scene.js API 文档来了解有关如何使用方法 / 事件等的说明：
http://daybrush.com/scenejs/release/latest/doc/

参考文献

CSS Types: Color：https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

CSS Properties: timing-function：https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

英文原文：https://medium.com/@daybrush/introducing-scene-js-library-to-create-timeline-based-animation-fcb955458c35

来源：oschina

链接：https://my.oschina.net/u/3472480/blog/3068596