impress.js 构建令人印象深刻的演讲

1. 简介

impress.js 是一个基于CSS3和现代浏览器，受Prezi.com的启发而创作出来的前端多功能演示js框架，可以用它来替代PowerPoint制作更加酷炫的PPT，官方项目。

impress.js 也有一些缺点：编辑方式繁琐需要学习的东西较多，至少需要一些HTML和CSS的基础知识，其是想要获得一些特殊效果时，更需要了解一些javascript的使用，对于非开发者来讲存在一定门槛。

impress.js比较适合以演讲内容为主的展示，单页只放一个名词或句子，或是一张图片，这样会带来比较出众的效果。

2. 核心

impress 页面间转场的实现是依赖于 CSS3 的 translate3d 属性完成。

impress 的水平移动是改变了 translateX 坐标，垂直移动是改变 translateY 坐标，缩放的绚丽效果是改变 translateZ 的坐标实现，而这些转化样式的事件监听是通过 js 来实现的。

3. 函数

函数名函数作用

pfx

给css3属性加上当前浏览器可用的前缀

arrayify

将Array-Like对象转换成Array对象

css

将指定属性应用到指定元素上

toNumber

将参数转换成数字，如果无法转换返回默认值

byId

通过id获取元素

返回满足选择器的第一个元素

返回满足选择器的所有元素

triggerEvent

在指定元素上触发指定事件

translate

将translate对象转换成css使用的字符串

rotate

将rotate对象转换成css使用的字符串

scale

将scale对象转换成css使用的字符串

perspective

将perspective对象转换成css使用的字符串

getElementFromHash

根据hash来获取元素，hash就是URL中形如#step1的东西

computeWindowScale

根据当前窗口尺寸计算scale因子，用于放大和缩小

empty

什么用都没有的函数，当浏览器不支持impress的时候会用到，一点用都没有

impress

主函数，构造impress对象，这是一个全局对象

onStepEnter

用于触发impress:stepenter事件

onStepLeave

用于触发impress:stepleave事件

initStep

初始化给定step

init

主初始化函数

getStep

获取指定step

goto

切换到指定step

切换到上一个step

切换到下一个step

throttle

可以延后运行某个函数

4. 事件

事件是 impress.js 运行的基础，分别是

impress:init 是初始化事件

impress:stepenter 是进入下一步事件

impress:stepleave 是离开上一步事件

init事件只在初始化时候触发，且只被触发一次，impress.js内部有一个initialized变量，初始化之后这个变量会置 true，从而保证只初始化一次。

impress 切页实际上触发了两个事件：stepleave和stepenter，这两个事件中间的就是 css
的动画效果。也就是说，先触发stepleave事件，然后运行css动画，然后触发stepenter。这两个事件的作用主要就是设定一些标志位和变量，比如设置当前活跃 step。

5. 说明

引入impress.js文件并初始化

<script type="text/javascript" src="impress.js"></script>
<script>impress().init();</script>

根结点

impress.js需要一个id为impress的根元素，演示文档的所有内容都包含在该元素中。

<div id="impress"></div>

结点

步骤元素包含将在屏幕中呈现的内容，是演示文档的基本单元，相当于一张幻灯片，每个步骤元素包含名为step的class

<div class="step">
    <q>这是第一张页面</q>
</div>

在该元素中可以定义各种精彩呈现效果的属性，用来表示页面以怎样的方式出现到屏幕中央。

data-x = 幻灯片x坐标
data-y = 幻灯片y坐标
data-scale = 缩放比例
data-rotate = 平面旋转角度
data-rotate-x = x轴旋转角度(3D)
data-rotate-y = y轴旋转角度(3D)
data-rotate-z = z轴旋转角度(3D)

现在你已经了解了基本的动画属性，可以大胆发挥你的创意创建令人惊奇的幻灯片效果。

CSS class

future

.future {
    display：none;
}

该类添加在还未展示的步骤结点，当该元素被导航时会自动删除future类，显示页面。

present
该类会被自动添加到目前位于屏幕中央的步骤结点，这对幻灯片展示时的动画效果非常有用。

.present .rotating {
  transform: rotate(-10deg);
  transition-delay: 0.25s;
}

past

.past {
    display：none;
}

该类会在步骤元素被导航过后自动添加。

active
该类会被自动添加到当前的步骤元素，与presentclass类似

.step {
  opacity: 0.3;
  transition: opacity 1s;
}
  .step.active {
  opacity: 1
}

impress-on-*
用于定义每个步骤结点的样式，步骤结点的id可以在URL中看到，如#/step-1，例如：

.impress-on-overview .step {
    opacity: 1;
    cursor: pointer;
}
.impress-on-step-1,
.impress-on-step-2,
.impress-on-step-3 {
  background: LightBlue;
}

JavaScript

impress([id])
一个用于创建 ImpressAPI 的工厂方法，可以自定义根结点，然后调用该方法进行初始化：

var impressAPI = impress( "root" );

impress().init()
初始化impress

next()
导航到下一页

var api = impress();
    api.init();
    api.next();

prev()
导航到上一页

var api = impress();
    api.init();
    api.prev();

goto( stepIndex | stepElementId | stepElement, [ duration ] )
导航到特定页面

var api = impress();
    api.init();
    api.goto(7);    //Number ID
    api.goto( "overview" );     //String ID
    
    var overview = document.getElementById( "overview" );
    api.goto( overview );   //HTMLElement