在美團參加 hackathon 時，使用 impress.js 做了一個商家上線流程的復盤工具。覺得 impress.js 很適合用于做 presentation， 因此進行一個簡單地總結。
what is impress.js
impress.js 是一個用于展示的前端框架，基于大量 css3 的動畫等特性。最大的特點是其基于 transform 來構建，通過空間位置的移動以及旋轉來體現變化，視覺沖擊性很強。
該庫需要有很好的 css 功底以及空間想象能力，因為整個 app 完全是靠代碼進行編輯，并不是像傳統的 ppt 工具進行拖拽以及鼠標點擊。
可以在github上查看 example 和 demo。
如何用 impress.js 設計 presentation
其實作者制作的 demo 就幾乎將所有可能用到的技巧都包含了，并在 github 中提供了源碼，不過如果不仔細讀源碼的話很可能走很多彎路。
基本思路
其實作者的想法很巧妙也很簡單，impress.js 會根據 html 中 step 的順序來渲染整個頁面，對于每個頁面來說只有三種重要的屬性——scale，position，rotate。
- scale 決定了該頁的大小。對應屬性 width，height
- position 決定了在三維空間中的坐標。對應屬性 transform
- rotate 則是旋轉方式。對應屬性 rotate[XYZ]
- 繞 X 軸
- 繞 Y 軸
- 繞 Z 軸
impress.js 會根據這些屬性將每一頁進行渲染，最后從第一頁開始一步步進行播放，因此這些屬性也就決定了補間動畫的形式。在開始寫代碼之前一定要想好空間結構。
技巧總結
雖然第一眼看過去很容易，可如果想做一個定制性很強的ppt還是會遇到很多問題，在這里總結一些經驗與技巧。
設置補間動畫
在 impress.js 文件中可以設置一些默認值，我會慢慢對這些參數進行說明。
// some default config values.
var defaults = {
width: 1024,
height: 768,
maxScale: 1,
minScale: 0,
perspective: 1000,
transitionDuration: 700
};
畫布大小
width與height是每頁的基準長度和寬度，與 scale 相乘之后才是該頁的大小，設置偏移量時需要對width與height進行參考。
以下是計算 window 真實比例的代碼。
var computeWindowScale = function ( config ) {
var hScale = window.innerHeight / config.height,
wScale = window.innerWidth / config.width,
scale = hScale > wScale ? wScale : hScale;
if (config.maxScale && scale > config.maxScale) {
scale = config.maxScale;
}
if (config.minScale && scale < config.minScale) {
scale = config.minScale;
}
return scale;
};
可以知道畫布會隨著window的縮放而自動進行縮放，maxScale決定了畫布最大值，而minScale決定了最小為多大。千萬不要將這里的scale與data-scale搞混淆。
透明度
.impress-enabled .step 調整 opacity 來控制非當前頁的透明度
漸變動畫時間
需要注意的是在更改 default transitionDuration之后還需要在 css 中修改 transitionDuration。這樣才能保證動畫的同步。
實用的 class
body 狀態
-
impress-disabledis added to body element by the impress.js script -
impress-enabledafter init() function is called
page 狀態
additional past, present and future classes are added to step elements。通過這三個狀態可以做出很酷的動畫效果。
-
futureclass appears on steps that were not yet visited -
presentclass appears on currently visible step - it's different from active class as present class is added when transition finishes (step is entered) -
pastclass is added to already visited steps (when the step is left)
插件推薦
- impress-progress.js 顯示 ppt 的進度條
