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 的进度条
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。