使用CSS 3D制作炫酷PPT——impress.js基础与应用 03-实现原理篇《使用CSS 3D制作炫酷PPT——i

背景：由于本人是一名前端开发工程师，而且平时喜欢把收获到的开发知识和经验进行技术分享，于是就产生了直接使用前端技术进行在线PPT制作的想法。就这样、我发现了两个非常优秀的制作在线PPT的JS库——reveal.js和impress.js。接下来我会分别以系列文章的形式进行reveal.js和impress.js的基础与应用分享，希望能帮到有同样需求的朋友。

本系列文章主要是介绍impress.js的基础和应用，而关于reveal.js的基础与应用，可以访问我之前写的reveal.js系列文章：

使用前端技术制作在线PPT：reveal.js基础与应用 01-快速上手篇

使用前端技术制作在线PPT：reveal.js基础与应用 02-定制样式篇

使用前端技术制作在线PPT：reveal.js基础与应用 03-插件应用篇

《使用CSS 3D制作炫酷PPT——impress.js基础与应用》会以系列文章的形式，有步骤、有重点地分享我使用impress.js实现在线PPT相关的知识和经验，目前该系列文章有如下3篇：

以下是《使用CSS 3D制作炫酷PPT——impress.js基础与应用 03-实现原理篇》的文章正文。

1、背景

到目前为止，我们已经在快速上手篇掌握了使用impress.js的基本代码结构；在基础使用篇，我们详细学习了根元素(Root Element)和步骤元素(Step Element)的基础配置和使用。接下来我们将一起学习一下impress.js的源代码，看看它的实现原理。

2、实现原理

2.1 核心实现

回顾基础使用篇中的内容，我们通过使用HTML数据属性(data)在每个步骤元素(Step Element)上设置各种效果：

位置: 通过属性data-x, data-y, data-z设置步骤的位置；
旋转: 通过属性data-rotate设置步骤的旋转角度；
缩放: 通过属性data-scale设置步骤的缩放比例。

在impress.js的dataset()方法中，最终被转换为CSS 3的transform样式：

var data = el.dataset,
  step = {
    translate: {
        x: lib.util.toNumberAdvanced( data.x ),
        y: lib.util.toNumberAdvanced( data.y ),
        z: lib.util.toNumberAdvanced( data.z )
    },
    rotate: {
        x: lib.util.toNumber( data.rotateX ),
        y: lib.util.toNumber( data.rotateY ),
        z: lib.util.toNumber( data.rotateZ || data.rotate ),
        order: validateOrder( data.rotateOrder )
    },
    scale: lib.util.toNumber( data.scale, 1 ),
    transitionDuration: lib.util.toNumber(
        data.transitionDuration, config.transitionDuration
    ),
    el: el
};
css( el, {
    position: "absolute",
    transform: "translate(-50%,-50%)" +
               translate( step.translate ) +
               rotate( step.rotate ) +
               scale( step.scale ),
    transformStyle: "preserve-3d"
} );

比如我们如下设置的一个步骤元素(Step Element)：

<div id="slide3" class="step slide" data-x="0" data-y="300" data-z="0" data-scale="6" >
    <div><h2>Step 3</h2></div>
</div>

经过impress.js的dataset()转换之后，会添加如下包含transform的样式：

style {
    position: absolute; 
    transform: translate(-50%, -50%) translate3d(0px, 300px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(6); 
    transform-style: preserve-3d;
}

2.2 提供的JS API

在快速上手篇中，我们通过创建一个impress的实例，调用init方法进行PPT的初始化：

import 'impress.js@1.1.0';
var ppt = impress(); // 1. 生成PPT实例
ppt.init(); // 2. 初始化PPT
// 3. 添加键盘事件
document.addEventListener('keypress', function (event) {
    if (
        event.keyCode === 13 ||
        event.code === 'Enter' ||
        event.keyCode === 27 ||
        event.code === 'Escape'
    ) {
        ppt.goto('overview');
    }
});

其实除了init()方法，impress还提供了包括goto(), next(), prev()等等方法，方便我们进行步骤之间的跳转：

方法	说明
`init()`	初始化`impress`实例，初始化后会触发`impress:init`事件
`next()`	调用`goto()`跳转到下一个步骤
`prev()`	调用`goto()`跳转到上一个步骤
`goto(stepIndex｜stepElementId｜stepElement)`	跳转到指定步骤

3、总结

通过以上步骤，我们简单地研究了impress.js的实现原理：

核心逻辑在dataset()方法中，impress.js将我们设置的位置、旋转和缩放，转换为包含transform的CSS 3样式；
而且通过impress.js提供的goto(), next(), prev()等等方法，方便我们进行步骤之间的跳转。

以上是实现原理篇的全部内容，欢迎同步阅读本系列的其他文章：