首页 > 交互 > 关键词  > 产品设计最新资讯  > 正文

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

2013-03-04 17:23 · 稿源: 一淘UX

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

一、缘起

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

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

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

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

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

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

图1:Stripe截图

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

二、原理详解

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

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

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

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

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

举报

  • 相关推荐
  • 无事发生!日本辟谣:我们今天不会发生大地震 没科学依据

    近日网络疯传"日本7月5日将发生毁灭性大地震"的谣言,引发广泛关注。该谣言导致不少外国游客取消赴日行程,影响日本旅游业。日本政府和专家纷纷辟谣,强调该传言缺乏科学依据。气象厅专家指出,目前科技水平尚无法准确预测地震时间、地点和规模,此类传言纯属骗局。东京大学教授也表示,目前没有科学证据支持这一预言。专家呼吁公众理性看待,勿信谣言。从目前情况看,日本一切正常,民众生活未受影响。

  • 发声就会发生:猛玛以科技之力赋能社会创新表达

    文章探讨了声音在社会创新中的新价值,通过猛玛品牌在瓶行宇宙大会发起的"发声就会发生"活动,展现科技如何赋能个体表达。活动使用轻量化设备LARK A1麦克风,降低技术门槛,让公益倡导和社会观察更易传播。青年群体通过声音接龙等创新形式,将个体表达编织成公共讨论网络。科技回归人的尺度,让善意萌芽被看见,使汇聚的声音成为行动可能。活动留下的竹编喇叭装置将持续推动从发声到行动的创变循环。

  • 意大利一男子被吸入飞机引擎身亡 网友:最害怕的事情发生了

    ​当地时间7月8日上午,意大利米兰贝加莫机场发生一起骇人事故:一名男子突破安保防线闯入机场跑道,被正在滑行准备起飞的空客A319客机吸入发动机,当场死亡。这起突发事件导致机场紧急关闭数小时,19个航班被迫取消,所幸机上154名乘客与6名机组人员均未受伤。 据意大利媒体披露,遇难者是52岁的贝加莫省建筑商安德烈亚·罗索。监控录像显示,当日罗索独自驾车抵达�

  • 云南多名男子吃菌子前先喊免责声明:发生意外 与现场人员无关

    ​近日,在云南红河发生了一件趣事。一名男子与朋友一同食用野生菌前,竟郑重其事地喊出一段“免责声明”:“本人自愿参与吃野生菌,若发生任何意外,与现场人员无关。” 当事人后续回应称,前一天他们结伴去采摘野生菌,然而其中有些菌子他们也不确定是否可以食用。朋友便开玩笑表示,食用后若出现任何状

  • 史上变化最大iPhone!曝iPhone17苹果Logo位置改变:继续下移

    在外观设计方面,iPhone17Pro系列将采用横向大矩阵DECO。后置三摄被安排在左侧,闪光灯和LIDAR激光雷达扫描仪则位于矩阵相机右侧,整体外观与小米11Ultra有几分相似。 核心配置上,iPhone17Pro系列也有显著升级。该系列将首次配备12GB内存,并搭载全新的A19Pro芯片。与A18和A18Pro芯片相比,A19系列芯片将采用台积电第三代3nm制程N3P工艺。据相关数据,在相同功耗条件下,N3P工艺能使

  • 健合合生元携星合荟伙伴参会,赋能儿童营养素养助力健康中国

    中国健康促进与教育协会在上海举办第二届中国健康促进大会,聚焦"营养赋能健康"主题。会议围绕"国民营养素养提升计划"展开研讨,推动营养健康知识转化为实际行动。合生元旗下品牌小小斯维诗参与论坛,分享儿童精准营养实践经验,并与多家母婴机构达成战略合作,共同推进0-6岁儿童营养提升行动。大会发布了《0-6岁儿童精准营养补充指南》,并开展系列科普活动,助力建立儿童营养标准体系。未来将通过专业人才培养、科普教育等多维度举措,持续提升国民健康素养,为"健康中国2030"建设贡献力量。

  • 思看科技联合浙江大学机械工程学院产教融合研讨会顺利举行

    2025年6月6日,思看科技与浙江大学机械工程学院联合举办第二届"智能制造创新人才培养与三维视觉技术产教融合研讨会"。会议汇聚学界和产业界专家,围绕智能制造人才培养策略与三维视觉数字化技术应用展开深入探讨。浙大机械工程学院党委书记刘振宇强调智能测量是智能制造基础,思看科技董事长江峰回顾校企合作成果。会议通过"上午实践展示+下午理论探讨"的创新模式,推动产教深度融合。与会专家就三维视觉技术在工业设计、质量检测等领域的创新应用进行交流,为智能制造人才培养提供新思路。活动搭建了"产学研用"高端对话平台,为产业变革注入创新动能。

  • 梦幻同框!周星驰晒与周杰伦合照 网友猜测将合作电影《女足》

    日前,演员、导演周星驰在ins上晒出他与歌手周杰伦的合照,被网友称为梦幻同框”。 周星驰配文,称听说做人没有梦想,就跟咸鱼没分别。所以我头戴周杰伦的帽,眼戴周杰伦的酷墨镜,挡住俗世风沙!他脚踩少林足球,手捧一壶梦想,我们周周俩,一起冲走现实的苦涩,泡出人生的香甜!” 照片中,周星驰与周杰伦两人姿态轻松,手持茶具,周杰伦脚下还踩着足球。 �

  • 健合集团合生元发布乳源研究新突破 母乳化配方再攀科技高峰

    5月20日,"2025年母乳科学研究进展学术研讨会"在京召开。会议聚焦母乳营养与婴幼儿健康研究,发布了《母乳科学研究认知新十条》,标志着我国母乳研究进入新阶段。合生元作为高端婴幼儿营养品牌受邀参会,展示了其在乳桥蛋白LPN等关键成分的研究成果。会议还重点探讨了诺曼底牛乳("熊猫牛")的营养优势,其蛋白质含量达3.97%,含丰富乳活性蛋白和7种乳源低聚糖,更接近母乳成分。合生元与东北农业大学合作成立"乳品创新研究中心",通过"产学研用"模式推动配方奶粉品质升级。企业将持续深化母乳活性成分研究,加速科研成果转化,为婴幼儿健康提供科学保障。

  • 表情包自由!腾讯搜狗输入法联合腾讯混元 推出AI表情合成

    不用再为微信、QQ回消息而烦恼,目前毫秒级AI生成表情包已经实现。 近日,搜狗输入法版推出AI合成表情”和候选表情”两大功能,用AI技术提升用户社交沟通体验。 其中,AI合成表情”基于腾讯混元大模型技术,用户输入文字描述或表情描述,便可毫秒级生成个性化表情包。 候选表情”则是用户在输入常用文字时,候选区自动推荐高匹配度表情包,一键即可发送,告别手�