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