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 的进度条