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

当视差滚动与视错觉结合，会发生怎样奇特的变化？ 当视差滚动与视错觉结合，会发生怎样奇特的变化？视错觉是否会我们带来了新的创想？本文动静结合，详解了视错觉动画的原理，并结合视差滚动做了一些前瞻性的设计。 一、缘起 之前在广告产品钻石展位新版的首页中尝试了视差滚动（Parallax Scrolling），对于这两年比较流行的视差滚动有了一些基本的了解。我们知道，视差滚动通过移动页面有层次地展现内容，整个过程中各视觉元素移动速 度不同固得“视差”之名。一般分为背景、主内容、前景3个层次，至少也要2个层次才能体现速度差。 机缘巧合，在一次下午茶上凌征同学分享了一系列视错觉现象。其中一组动态效果吸引了我的注意：简单的两张图，一张做了特殊设计的底图，一张由规则条纹组成 的栅栏，通过相互水平位移可以出现动态的效果。 对于这一系列神奇的动态视觉效果为了便于下文分析不妨先给它取个名字，称之为栅栏特效吧。栅栏特效之所以能吸引我的好奇心不仅是隐藏在它背后神秘的 原理，更重要的是它与视差滚动可以非常自然的结合。视差滚动离不开界面的自然移动，在滚动操作中加入栅栏特效，便赋予了其更为生动丰富的体验，而非单纯的 视觉流行效果。具体设想如下：假设在前一个页面中包含一张栅栏特效的底图，而栅栏在后续的页面中，随着滚动栅栏经过底图时便产生动态效果，而实现这种效果 并不需要复杂的技术，只需要准备两张静态的图像即可。那么，如何设计能够产生视错觉特效的图形呢？必须先分解其背后的原理。 二、原理详解 经过仔细的观察并结合逐帧动画的原理，下面配合插图讲解具体的原理如下：首先我们知道动画是利用了视觉暂留（Persistence of vision）现象，即用有限的帧数可以表现无限连贯的动态。由此推理可知，栅栏特效能出现动画效果必定是将一串序列的动画帧合成一张静态的图，并利用栅 栏的移动逐步出现不同的帧。即先出现第一帧，随着移动出现第二帧，然后第三第四第五…完成一个动画后再回到第一帧，如此循环。那么为什么这一系列的动画帧 会依次展现而不会重叠在一起呢？这便是栅栏的功能了，栅栏部分相当于一个公共区域，它填充了每一帧的大部分内容，随着栅栏移动一个单位的空隙区域，前一帧 的底图必须消失为下一帧让位。这就意味这一序列的帧必须根据相应的栅栏的位置进行镂空，再将每一帧叠在一起形成一张静态底图。为了便于直观理解，下面以行 走的人为实例分解了详细的步骤图： 1、传统的动画逐帧分解，获得多张图像作为底图的原图（实例中暂定为6帧一个循环） 2、先将这些一系列的动画帧叠在一起，有待进步一处理 3、先处理第一帧，隐藏其他帧数，我们看到第一帧的图像叠在栅栏之下 4、随着栅栏移动必须逐帧替换底图才能看到动态变化。每张底图对应一个单位的移动（一个单位等于一个空隙的间距）。下图中的深色像素条纹部分代表底 图，玫瑰紫条纹部分代表栅栏。如果栅栏叠在底图之上，那么空隙部分才是人眼能够看到的底图细节。栅栏每移动一个单位，下一帧图像取而代之。依次类推制作一 系列然后循环即可，下一个循环开始即第一帧经过了一条栅栏的宽度而出现下一个空隙。：） 5、承接步骤3，我们继续处理第一帧。第一帧在栅栏移动到下一个单位时将不可见，因此需要将与对应位置的栅栏部分内容去除。（图A）为栅栏移动一个 单位空隙后第一帧的底图被遮挡隐藏；（图B）为第一帧底图的实际面貌，即在完整图像的基础上需要去除一个单位移动以后的栅栏部分与其重叠的内容。 图A 图B 6、在（图A）的基础上第二帧图像出现 7、同第一帧，第二帧的实际图像如下 8、将一二两帧的图像合并为一张底图，该底图中包含了两帧的动画内容 9、按照这样的规律，将一系列所有的帧数（共6帧）合成一张静态底图如下 10、在此基础上添加栅栏移动效果便可以展现动画，如下图。从动图中可以发现，栅栏移动的速度影响动画的速度，栅栏移动越快人走的频率越快，反之人走的频率变慢，这也意味着屏幕滚动的速度对动画的影响。用户可以根据不同的滚动速度体会动画的频率。 三、视觉特性分析 （一）参数的权衡 在掌握了原理的基础上，不禁思考栅栏的宽度、空隙宽度、动画帧数等这些参数该如何定义，因为这些会影响最终的视觉展现。这些参数会是固定的值么？还 是可以在一定的范围内调整？它们可调整的空间又有多大？首先根据之前原理可以得出相应的公式：（栅栏宽度＋空隙宽度）／空隙宽度＝帧数，（其中栅栏宽度必 须是空隙宽度的整数倍） （H+h)/h=N 即 H/h+1=N 其中：H代表栅栏的宽度，h代表空隙的宽度，N代表动画帧数 根据公式可知： a、帧数越多，动画越流畅。在相同空隙宽度下，栅栏越宽，可支持的帧数越多。 b、但是同等空隙宽度下，栅栏越宽，底图的细节损失越大。底图的细节曲线被替代成了栅栏的直线，增加了符号的模糊性。 c、同等栅栏宽度下，空隙留