在美团参加 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 的进度条
