在美團參加 hackathon 時供鸠，使用 impress.js 做了一個商家上線流程的復(fù)盤工具畦贸。覺得 impress.js 很適合用于做 presentation， 因此進行一個簡單地總結(jié)回季。
what is impress.js
impress.js 是一個用于展示的前端框架家制，基于大量 css3 的動畫等特性。最大的特點是其基于 transform 來構(gòu)建泡一，通過空間位置的移動以及旋轉(zhuǎn)來體現(xiàn)變化，視覺沖擊性很強觅廓。
該庫需要有很好的 css 功底以及空間想象能力鼻忠，因為整個 app 完全是靠代碼進行編輯，并不是像傳統(tǒng)的 ppt 工具進行拖拽以及鼠標(biāo)點擊。
可以在github上查看 example 和 demo帖蔓。
如何用 impress.js 設(shè)計 presentation
其實作者制作的 demo 就幾乎將所有可能用到的技巧都包含了矮瘟，并在 github 中提供了源碼，不過如果不仔細讀源碼的話很可能走很多彎路塑娇。
基本思路
其實作者的想法很巧妙也很簡單澈侠，impress.js 會根據(jù) html 中 step 的順序來渲染整個頁面，對于每個頁面來說只有三種重要的屬性——scale埋酬，position哨啃，rotate。
- scale 決定了該頁的大小写妥。對應(yīng)屬性 width拳球，height
- position 決定了在三維空間中的坐標(biāo)。對應(yīng)屬性 transform
- rotate 則是旋轉(zhuǎn)方式珍特。對應(yīng)屬性 rotate[XYZ]
- 繞 X 軸
- 繞 Y 軸
- 繞 Z 軸
impress.js 會根據(jù)這些屬性將每一頁進行渲染祝峻，最后從第一頁開始一步步進行播放，因此這些屬性也就決定了補間動畫的形式扎筒。在開始寫代碼之前一定要想好空間結(jié)構(gòu)莱找。
技巧總結(jié)
雖然第一眼看過去很容易，可如果想做一個定制性很強的ppt還是會遇到很多問題嗜桌，在這里總結(jié)一些經(jīng)驗與技巧奥溺。
設(shè)置補間動畫
在 impress.js 文件中可以設(shè)置一些默認值，我會慢慢對這些參數(shù)進行說明症脂。
// some default config values.
var defaults = {
width: 1024,
height: 768,
maxScale: 1,
minScale: 0,
perspective: 1000,
transitionDuration: 700
};
畫布大小
width與height是每頁的基準長度和寬度谚赎，與 scale 相乘之后才是該頁的大小，設(shè)置偏移量時需要對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 調(diào)整 opacity 來控制非當(dāng)前頁的透明度
漸變動畫時間
需要注意的是在更改 default transitionDuration之后還需要在 css 中修改 transitionDuration琳省。這樣才能保證動畫的同步迎吵。
實用的 class
body 狀態(tài)
-
impress-disabledis added to body element by the impress.js script -
impress-enabledafter init() function is called
page 狀態(tài)
additional past, present and future classes are added to step elements。通過這三個狀態(tài)可以做出很酷的動畫效果针贬。
-
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 的進度條
