Alibaba.com UED

用JS开发页面动画效果时的一个设计思路

Salan Posted in Web Developer at 12月 10, 2007 |

首先说明下范围

1. 用Javascript来开发WEB页面的动画效果
2. 该思路同时考虑页面效率、SEO，如果数据大，也可以缓解后端压力。
3. 这个是程序设计思路
4. 还谈不上思想，只是自己实践使用过的一个方法

我们经常看到网页上有各种各样的动画，例如下图

有N条记录，需要在页面上滚动显示，并且需要循环。

我们先假设一下条件

1. 这些记录都需要被搜索引擎收录
2. 直接对页面元素做动画有困难（这里可能比较简单，但是困难的情况还是很多的）
3. 信息需要循环显示
4. 数据比较多，N条

这个时候出现问题

1. 数据必须是HTML标签，不能直接写入JS
2. 直接对页面元素控制，并做动画有难度。由于要循环，得拆分子元素
3. 数据比较多，控制子元素会出现效率问题

第一个问题呢，我们这么做，让HTML载入，然后用JS来读取HTML信息作为数据控制。这个应该比较简单的。

第二个问题怎么搞呢，我们在读完数据之后，再搞出一个代理层来，比如叫A层。那么A层仅仅是提供显示，JS控制这个层来做动画。每次动画的时候呢把新的数据填进去，再做动画。

第三个问题迎刃而解，控制A层就OK了。

Y方案：具体看看流程吧：（我把JS读取数据的步骤省略不说了，这个相信大家都知道怎么搞）

第一步，元素的层次结构：

 A层  z-index:2;————   隐藏  //负责动画
真层 z-index:1;————  显示  //给爬虫看，且负责显示的当前信息

第二步动画：完成后返回第一步既可。

A层填入数据–》显示–》动画 
动画结束之后，B层直接设置坐标，到标准位置
A层隐藏。

上面这样做的理由是，填数据的过程，是会造成页面抖动的，所以我们把这个过程隐藏的来完成。

 更升级的问题，如果真层直接设置坐标也比较困难，怎么办？那么就再搞个B层出来

X方案： 

A层  z-index:3;————   隐藏 //负责动画
 B层  z-index:2;————   显示 //只显示当前信息
真层 z-index:1;————  隐藏 //仅仅给爬虫看，以及读取数据用，之后不再显示

动画的时候，A填入数据–》A显示–》A动画–》B填入数据–》A隐藏

再升级下问题：如果数据实在太多，没法一次用HTML载入完成，怎么办？那么用AJAX来搞吧，具体做法和上面一样

从具体到抽象：设计的思路是数据和表现分离。
给用户看的其实是一个JS创建出来的层，不断的更新数据，不断的隐藏显示来造成假象，然后做动画。

注意的问题：如果每个item中，图片比较多，可能会浪费浏览器的渲染时间和增加HTTP请求。适合用Y方案。如果数据需要异步，且比较难控制坐标的时候，那么适合用X方案。