当视差滚动与视错觉结合，会发生怎样奇特的变化？

当视差滚动与视错觉结合，会发生怎样奇特的变化？视错觉是否会我们带来了新的创想？本文动静结合，详解了视错觉动画的原理，并结合视差滚动做了一些前瞻性的设计。

一、缘起

之前在广告产品钻石展位新版的首页中尝试了视差滚动（Parallax Scrolling），对于这两年比较流行的视差滚动有了一些基本的了解。我们知道，视差滚动通过移动页面有层次地展现内容，整个过程中各视觉元素移动速度不同固得“视差”之名。一般分为背景、主内容、前景3个层次，至少也要2个层次才能体现速度差。 机缘巧合，在一次下午茶上凌征同学分享了一系列视错觉现象。其中一组动态效果吸引了我的注意：简单的两张图，一张做了特殊设计的底图，一张由规则条纹组成的栅栏，通过相互水平位移可以出现动态的效果。 具体效果可观看下面的视频：

http://v.youku.com/v_show/id_XNDYzNjEzMjQw.html

http://v.youku.com/v_show/id_XNDYzNjA3ODky.html

http://v.youku.com/v_show/id_XNDYzNjA4MDUy.html

http://v.youku.com/v_show/id_XNDUxNDkzOTQ4.html

目前还有一个趣味应用名叫Stripe在App store上，里面也收录了不少趣味的视错觉图，有兴趣的同学不妨去体验下（见图1）。

图1：Stripe截图

对于这一系列神奇的动态视觉效果为了便于下文分析不妨先给它取个名字，称之为栅栏特效吧。栅栏特效之所以能吸引我的好奇心不仅是隐藏在它背后神秘的原理，更重要的是它与视差滚动可以非常自然的结合。视差滚动离不开界面的自然移动，在滚动操作中加入栅栏特效，便赋予了其更为生动丰富的体验，而非单纯的视觉流行效果。具体设想如下：假设在前一个页面中包含一张栅栏特效的底图，而栅栏在后续的页面中，随着滚动栅栏经过底图时便产生动态效果，而实现这种效果并不需要复杂的技术，只需要准备两张静态的图像即可。那么，如何设计能够产生视错觉特效的图形呢？必须先分解其背后的原理。

二、原理详解

经过仔细的观察并结合逐帧动画的原理，下面配合插图讲解具体的原理如下：首先我们知道动画是利用了视觉暂留（Persistence of vision）现象，即用有限的帧数可以表现无限连贯的动态。由此推理可知，栅栏特效能出现动画效果必定是将一串序列的动画帧合成一张静态的图，并利用栅栏的移动逐步出现不同的帧。即先出现第一帧，随着移动出现第二帧，然后第三第四第五…完成一个动画后再回到第一帧，如此循环。那么为什么这一系列的动画帧会依次展现而不会重叠在一起呢？这便是栅栏的功能了，栅栏部分相当于一个公共区域，它填充了每一帧的大部分内容，随着栅栏移动一个单位的空隙区域，前一帧的底图必须消失为下一帧让位。这就意味这一序列的帧必须根据相应的栅栏的位置进行镂空，再将每一帧叠在一起形成一张静态底图。为了便于直观理解，下面以行走的人为实例分解了详细的步骤图：

1、传统的动画逐帧分解，获得多张图像作为底图的原图（实例中暂定为6帧一个循环）

2、先将这些一系列的动画帧叠在一起，有待进步一处理

3、先处理第一帧，隐藏其他帧数，我们看到第一帧的图像叠在栅栏之下

4、随着栅栏移动必须逐帧替换底图才能看到动态变化。每张底图对应一个单位的移动（一个单位等于一个空隙的间距）。下图中的深色像素条纹部分代表底图，玫瑰紫条纹部分代表栅栏。如果栅栏叠在底图之上，那么空隙部分才是人眼能够看到的底图细节。栅栏每移动一个单位，下一帧图像取而代之。依次类推制作一系列然后循环即可，下一个循环开始即第一帧经过了一条栅栏的宽度而出现下一个空隙。：）

标签： 产品设计 视差滚动 交互设计原则 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。