impress.js 使用总结

隐身守侯 提交于 2019-12-01 18:52:11

在美团参加 hackathon 时,使用 impress.js 只做了一个商家上线流程的复盘工具。觉得 impress.js 很适合用于做 presentation, 因此进行一个简单地总结。

what is impress.js

impress.js 是一个用于展示的前端框架,基于大量 css3 的动画等特性。最大的特点是其基于 transform 来构建,通过空间位置的移动以及旋转来体现变化,视觉冲击性很强。
可以在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
    };

大专栏  impress.js 使用总结>画布大小

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 的进度条
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!