CengSin城市名录

折叠亭 · 已落地

Fold Studio

看清双屏折叠时,两面的内容应该怎样交接。

折叠亭
原来的想法
折叠不是把界面挤扁。不同角度下,哪一面显示半幅、哪一面承接投影,需要能直接试。
拿出来之后
A 屏绕中线向 B 屏折叠。角度改变时,半幅内容、投影和失焦跟着变。
我做的取舍
没有构建步骤。超过 90° 之后用 A 的背面作为显示面,这是不受硬件限制的模拟。光影是视觉近似,不是光线追踪。MIT。
材料
JavaScript

它解决什么问题

折叠不是把界面挤扁。不同角度下,哪一面显示半幅、哪一面承接投影,需要能直接试。

访客如何使用

打开线上原型,或直接打开仓库里的 index.html。可以拖动、指定角度、往返播放,也可以换背景。

关键交互

  • 0–10° 时,A 仍显示自己的一半,和 B 拼成完整界面。
  • 10–42°,半幅淡出,完整画布作为投影压到 A 面。
  • 42–90°,投影失焦变暗,90° 为黑场。90–180° 再过渡到 B。
  • 图片只在浏览器里处理,刷新后回到默认背景。

我做的取舍

没有构建步骤。超过 90° 之后用 A 的背面作为显示面,这是不受硬件限制的模拟。光影是视觉近似,不是光线追踪。MIT。

依据仓库 README。仓库名是 iphone-Duo-UI。 · 回到城市名录