jQuery 模拟 ubuntu 3D desktop 的 Dodge Effect 效果

  昨天在微博上看到一个 ubuntu 3D desktop 的演示视频,就是上面那个,大家可以看看。我对其中一个效果非常感兴趣,查了下资料,应该是叫 Dodge Effect。心血来潮当晚就做了一个demo来实现这种效果。看下面的demo,你可以分别点击每个色块,就当作是不同窗口切换就行。

  下面我就简单把我开发时的思路给大家介绍一下。因为这不是单纯的修改某个 div 的 z-index 值就能实现,加上动画效果,所以我们第一步一定要先理清思路。

  首先我们先做个最简单的,也就是不带动画效果的。这一步没什么好说的,也没技术含量,直接看演示吧。

  做好这一步后,我们回过头想一想动画效果是怎样的?当我点击底下某个窗口后,覆盖在其上面的窗口依次滑动到对象下面。

  ok,知道接下来要做什么了,就是如何判断哪些窗口是点击对象上面的,因为窗口可能并排排放,没有叠加在一起,这样在切换的时候就不应该出现动画效果。

  至于如何判断,其实很简单,依据四角坐标,看下图

  我们假设要点击蓝色窗口,那么覆盖在其上面一共有4个红色窗口,我们可以看到这4个红色窗口都有一个角是处于蓝色窗口里面的。

  这样我们就大致可以理出思路了,就是只要当窗口的z-index值大于被点击的窗口,并且窗口只要其中一个角的坐标处于被点击窗口内部,则就可以判断该窗口是覆盖在被点击窗口之上的(判断窗口是否覆盖的算法已更新,地址:http://www.cnblogs.com/hooray/p/3193801.html)。具体可以看下这个演示,当点击某个窗口时,会以此alert出覆盖在其上方的窗口的颜色。

  完成上面功能,我们已经能筛选出哪些窗体是覆盖在被点击窗体上方的,按剧情发展,接下来是做动画了么?

  且慢,先别着急,还有一个工作没做。让我们回上面,再看一遍动画效果。(滚动条的“滚”)

  可以观察到,有的窗口动画是往左移,有的则是往右移,那应该如何判断哪些往左,哪些又往右呢?对了,就是用中心轴来判断。

  假设我们点击红色窗口,覆盖在其上方的一共有蓝黄两个窗口,其中心轴一个位于红色窗口中心轴左边,一个位于右边,则我们就可以按照这个来判断执行动画的窗口应该往哪个方向移动。

  下面这个演示可以尝试点击不同窗口,看下提示信息。

  除了知道往哪个方向移动之外,我们还要知道移动多少距离,这个我就不细说了,直接看演示吧。

  完成上面几步,我们终于要开始写动画了。(上面统计的一些信息,我们都可以放到一个数组对象里,比如需要移动的窗体ID,或者class名,往什么方向移动,移动多少距离)

  思路无非就是循环对象数组,依次对需要移动的窗体进行绑定animate动画。唯一需要关注的就是,因为动画效果是有个持续时间的,什么时候修改被点击窗口的z-index尤其重要,如果做不好,观赏性就大大下降了。

  下面我的做法就是用setTimeout来延迟执行。

  似乎还是有点不一样,继续滚回上面看原版动画,好像被移动的窗口是有个先后顺序的,不是一起开始执行移动动画。

  ok,我们用delay方法来实现这个需求。我们初始一个dalayTime,默认为0,每次循环对象数组时给它加100,然后再用这个值去延迟执行的动画效果,这样每个窗体之间就有100毫秒的间隔了。

  至此,我们已经一步步完成了 Dodge Effect 效果的模拟了,当然你也可以加上拖动代码,甚至判断什么情况下窗口是上下滑动的,下面直接看,就不做思路分析了:http://runjs.cn/detail/pav1hhdb

posted @ 2013-05-29 12:31  胡尐睿丶  阅读(7429)  评论(18编辑  收藏  举报