3

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
    };
画布大小

widthheight是每页的基准长度和宽度,与 scale 相乘之后才是该页的大小,设置偏移量时需要对widthheight进行参考。

以下是计算 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决定了最小为多大。千万不要将这里的scaledata-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 的进度条

YeatsZhang
720 声望26 粉丝

frontend developer


下一篇 »
React使用总结