impress.js 使用總結

impress.js 使用總結

在美團參加 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-disabled is added to body element by the impress.js script
• impress-enabled after init() function is called

page 狀態

additional past, present and future classes are added to step elements。經過這三個狀態能夠作出很酷的動畫效果。

• future class appears on steps that were not yet visited
• present class appears on currently visible step - it's different from active class as present class is added when transition finishes (step is entered)
• past class is added to already visited steps (when the step is left)

插件推薦

• impress-progress.js 顯示 ppt 的進度條