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