impress.js 源码分析

  之前做展示用幻灯片,我一直热衷于使用PPT,刚开始学习PPT时总是强行使用各种页面特效,越做越复杂。现在看来,学技术大概都要经历一个从简到繁再到简的过程吧。后来,无意间接触到prezi,被它强大的展示逻辑所折服,但用了段时间,发现使用prezi破解版有诸多不便,最关键的是,除了很炫的转场特效,单页的设计感不及PPT,总感觉不尽如人意。   总结下,PPT的单页设计感强,普及率高;prezi的展示思路清晰,变现力强,跨平台,但制作流程稍显不便。   最近,学习H5+CSS3时我突发奇想,为何不用H5来做幻灯片展示呢?刚开始两天,纯靠自己手写页面和转场,不是一般累。我试图去抽取常用的公共方法,尝试做成框架组件的形式,发现工作量巨大,而且以自己目前水平,写出来的代码通用性很差。在Google上搜索时,我发现了impress.js的存在,与我的设想不谋而合,于是乎……不再自己造轮子,又花了两天时间熟悉使用impress.js来设计幻灯片,效果完全超越了我的预期。   impress.js简单来说仅仅是实现了幻灯片的转场特效的框架,虽说将单页限制在框架之内,但所有单页还是需要自己用代码设计。虽然花费的时间远远超过了PPT和prezi,但是能够完全使用代码来定制幻灯片,能够使用几乎每台电脑必备的浏览器放幻灯片,何尝不是一种幸福!   花了一天探索了下impress.js源码,其实并不复杂,个人感觉收获颇丰,以下阐述我的收获。

1. impress.js华丽效果实现方法概述

  通过审查元素发现,页面间转场的实现全部是依赖于CSS3,准确说是translate3d属性完成的。impress的水平移动是改变了translateX坐标,垂直移动是改变translateY坐标,而变小变大的绚丽效果是改变translateZ的坐标实现,而这些转化样式的事件监听是通过js来实现的。

2. impress.js具体的技术实现

2.1 动效参数的获取

(line307):参数获取 官方提供了一个demo:index.html,首先从data-* 属性入手。这是html5的新增api,允许用户自定义数据,通过dataset方法取出数据

var data = el.dataset, //el是通过getElememtById()获得的元素
step = {   //定义了一个step对象,里面有4个css样式属性
    translate: {
        x: toNumber(data.x),
        y: toNumber(data.y),
        z: toNumber(data.z)
    },  //toNumber函数将参数转换成数字,如果无法转换返回默认值
    rotate: {
        x: toNumber(data.rotateX),
        y: toNumber(data.rotateY),
        z: toNumber(data.rotateZ || data.rotate)
    },
    scale: toNumber(data.scale, 1),
    el: el
};

在浏览器的console调试代码,元素的dataset 得到的是一个数组,可以依次取出x,y,z值,这就是动效实现的核心。

2.2 通用函数定义

(line1-line174):通用函数定义

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,用于放大和缩小

2.3 主函数与5大api

(223line~):主函数与5大api API: goto(), init(), next(), prev(), initStep() 主函数: var impress = window.impress = function ( rootId ) {……} 在index.html中调用了init()函数

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

源码中的init()函数,分析写在注释中

var init = function() {
    if (initialized) {
        return; } //初始值initialized=false;
    //使用viewport支持移动设备
    var meta = $("meta[name='viewport']") || document.createElement("meta");
    // 定义的$风格函数,类似于jQuery
    //  var $ = function ( selector, context ) {
    //      context = context || document;
    //      return context.querySelector(selector);
    //  };

    meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";
    if (meta.parentNode !== document.head) { //判断meta的parentNode节点是不是<head>
        meta.name = 'viewport'; //如果不是head标签,就js添加一个meta标签
        document.head.appendChild(meta);
    }
    //初始化配置root (243line & 269line)
    var rootData = root.dataset; //获取到初始化的root数据,即id=“impress”的div标签里的内容
    config = {
        width: toNumber(rootData.width, defaults.width),
        height: toNumber(rootData.height, defaults.height),
        maxScale: toNumber(rootData.maxScale, defaults.maxScale),
        minScale: toNumber(rootData.minScale, defaults.minScale),
        perspective: toNumber(rootData.perspective, defaults.perspective),
        transitionDuration: toNumber(rootData.transitionDuration, defaults.transitionDuration)
    };
    windowScale = computeWindowScale(config);
    // wrap steps with "canvas" element
    arrayify(root.childNodes).forEach(function(el) {
        canvas.appendChild(el);
    });
    root.appendChild(canvas);

    // arraify函数把类数组对象转化为真正数组(69line)

    document.documentElement.style.height = "100%";

    css(body, {
        height: "100%",
        overflow: "hidden"
    });

    var rootStyles = {
        position: "absolute",
        transformOrigin: "top left",
        transition: "all 0s ease-in-out",
        transformStyle: "preserve-3d"
    };

    css(root, rootStyles);
    css(root, {
        top: "50%",
        left: "50%",
        transform: perspective(config.perspective / windowScale) + scale(windowScale)
    });
    css(canvas, rootStyles);

    body.classList.remove("impress-disabled");
    body.classList.add("impress-enabled");

    // get and init steps
    steps = $$(".step", root);
    steps.forEach(initStep);
    // 找到每一个class为”step“的元素,返回root(id=“impress”)的数组
    // forEach遍历每一个数组,对每个div用initstep()函数初始化
    //即我们一开始分析的那个函数。主要是把data-*自定义的数据获得,附上transtion样式。
    // set a default initial state of the canvas
    currentState = {
        translate: { x: 0, y: 0, z: 0 },
        rotate: { x: 0, y: 0, z: 0 },
        scale: 1
    };
    //当前的状态。位移为0,旋转为0,缩放为1.   
    initialized = true;
    //初始化为true,即完成初始化
    //triggerEvent()自定义事件监听函数
    //其中,第一个参数为要处理的事件名
    //第二个参数为表明事件是否冒泡
    //第三个参数为表明是否可以取消事件的默认行为
    //第四个参数为细节参数
    triggerEvent(root, "impress:init", { api: roots["impress-root-" + rootId] });
};

总结:初始化过程分为两个阶段,第一个阶段是运行init()函数,第二个阶段是运行绑定到impress:init上的函数。在init()函数的结尾触发impress:init事件,这样绑定上去的函数就会全部触发。

2.4 事件对象绑定与监听

root.addEventListener("impress:init", function() {
    // STEP CLASSES
    steps.forEach(function(step) {
        step.classList.add("future");
    });
    root.addEventListener("impress:stepenter", function(event) {
        event.target.classList.remove("past");
        //利用html5 classList属性对class类增删改查
        event.target.classList.remove("future");
        event.target.classList.add("present");
    }, false);
    root.addEventListener("impress:stepleave", function(event) {
        event.target.classList.remove("present");
        event.target.classList.add("past");
    }, false);

}, false);

init是初始化事件,stepenter是进入下一步事件,stepleave是离开上一步事件

var onStepEnter = function(step) {
    if (lastEntered !== step) {
        triggerEvent(step, "impress:stepenter");
        lastEntered = step;
    }
};
var onStepLeave = function(step) {
    if (lastEntered === step) {
        triggerEvent(step, "impress:stepleave");
        lastEntered = null;
    }
};

一个step就是一个页面,按一次键盘上的left键或者right键就会切换一次step,同时绑定键盘事件

document.addEventListener("keyup", function ( event ) {...}
document.addEventListener("keydown", function ( event ) {...}
document.addEventListener("click", function ( event ) {...}
window.addEventListener("resize", throttle(function () {...}
document.addEventListener("touchstart", function ( event ) {...}

函数简单总结

impress 主函数,构造impress对象,为全局对象
onStepEnter 用于触发impress:stepenter事件
onStepLeave 用于触发impress:stepleave事件
initStep 初始化给定 step 
init 主初始化函数
getStep 获取指定 step 
goto 切换到指定step
prev 切换到上一个 step 
next 切换到下一个step

3 总结

  总体看来,impress.js源码简洁明了,并不复杂,作者的本意也是构建一个基础的框架,让使用者自由发挥,正合吾意!很多技术单独实现都很简单,综合运用起来,如何保证命名空间不污染,代码的重用复用,js和css代码的兼容性等细节都是值得学习的地方。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券