折叠亭 · 已落地
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。 · 回到城市名录