ImpressJS是一个用来创建幻灯片的基于CSS3D的JavaScript库,那么,我们能不能自己也制作一个呢?
那么,我们首先要想好需求:
- 现在CSS3D的支持已经基本都有了,所以在不考虑老版本IE浏览器的情况下,我们不需要考虑运营商前缀名.
- 我们要支持转场动画,页内动画.
那么,我们首先要了解一些基础的知识.
基础知识
CSS3D的变换主要有几个关键属性:
- transition:控制两个状态之间切换的过渡,也就是当元素样式发生变换时,不会直接发生改变,而是在指定时间内以指定的缓动函数变换.
- transform:控制变换,我们将使用的属性值包括:
| 函数 | 效果 | 实例 | 备注 |
|---|---|---|---|
| rotateX() | 绕X轴旋转一定度数 | rotateX(10deg) | / |
| rotateY() | 绕Y轴旋转一定度数 | rotateY(10deg) | / |
| rotateZ() | 绕Z轴旋转一定度数 | rotateZ(10deg) | / |
| translate3d() | 平移一个3D坐标 | translate3d(10px,10px,10px) | / |
| scale() | 缩放指定倍数 | scale(x) | 如果是负数会翻转 |
- perspective:控制透视,也就是决定你观测的位置距离屏幕的距离,一般情况下,我们设置它为幻灯片页面的z值.
了解原理
其实,实现3D切换的原理非常简单,就是
- 通过CSS3D将每个页面变换到相对位置
- 通过JS将所有页面的一个父对象的变换设置为当前浏览的页面的变换的相反的位置,也就是用父对象的变换抵消子对象的变换.
- 通过transition的过渡效果营造出3D切换中的动画效果.
实现
首先,我们要明确页面的结构:
- box_father:控制perspective和scale
- box:用于抵消页面本身的3D位移
- page:页面
元素的关系是
box_father -> box -> pages
// 将数据转化为页面的css
function obj_to_page_css(pos,rotation,scale){}
// 将数据转化为那个用于抵消的父对象的css
function obj_to_box_css(pos,rotation){}
那么,只需要在页面切换时根据页面位置重设css即可,具体代码你们可以自己实现,我就不把我丑陋236行的代码贴上来了.
有人可能要问了,为什么要定义两个函数呢?直接把页面的数据全部取反不就行了吗?事实上,是不行的,因为
CSS的3D变换是有顺序的!旋转在平移和平移在旋转是两个位置!必须严格按照相反的顺序才可以抵消!
比如说,如果page的是
{
transform:translate3D() rotateX() rotateY() rotateZ() scale();
}
那么box的就是
{
transform:rotateZ() rotateY() rotateX() translate3D()
}
页内动画的实现
实现了前两步之后,就可以实现一些页内动画了.我们选择使用CSS动画实现,比如说,一个从顶部飞入的效果会是这样的:
@keyframes fly-top{
0%{
transform:translateY(-1000px);
}
100%{
trnasform:translateY(0);
}
}
.fly-top{
animation:fly-top 1s;
}
那么,问题就在于如何让动画复位,这里科普一个小技巧:
- 删除对象设置了动画的类
- 让对象的offsetWidth=offsetWidth
- 重新把刚才删除的类添加回去
代码:
function reset_animation(el) {
var list = to_array(el.classList);
for (var i = 0; i < list.length; i++) {
el.classList.remove(list[i]);
}
el.offsetWidth = el.offsetWidth;
for (var i = 0; i < list.length; i++) {
el.classList.add(list[i]);
}
el.style.animationPlayState="paused";
}
其中to_array用于将类数组对象转换为普通数组.
最后,要在每次进入动画的时候设置元素开始播放,因为我们选择在切换到下一页面时重设这个页面的动画,所以要设置动画播放状态位paused,也就是暂停,在进入页面时再复位到running.
以上是这篇文章的全部,错误的地方恳请指正.
QQ:8955859,希望能和大家一起学习.
最后,都看到这了,赞赏一下呗!(^ ~ ^||).