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