LuminTrace v19 更新:足迹地图还能这么玩?这回我们做了个“电影级”的独立地图
之前的版本里,LuminTrace 一直是以一张“宏大的全国/世界地图”来展示大家的足迹。这很酷,能看到点亮的城市连成一片很有成就感。
但有时候,我只想讲一次旅行的故事。
比如我刚去了趟成都,写了一篇游记。在文章里塞一张密密麻麻的全国地图显得有点喧宾夺主,而单纯放几张照片又觉得不够生动。
所以,v19 版本我憋了个大招,搞出了这个「独立地图 (Independent Map)」功能。说实话,为了调这个动画的丝滑度,我把代码里的毫秒数改了几十遍,现在的效果,终于有点“那个味儿”了。
1. 拒绝瞬移,我们要的是“运镜”感
以前的地图定位是“刷”一下直接跳过去的,生硬得很。
这次的独立地图,打开时会先展示中国全貌,让你看清楚目标城市在哪里闪烁。紧接着,镜头会以一种极慢速、非线性的节奏推进。
这不是简单的放大,而是一种类似电影开场的运镜(Camera Movement)。你会感觉自己是从上帝视角慢慢降落,飞向那个城市。
2. 照片是“炸”出来的
这是我最喜欢的一个细节。
在镜头推进的过程中,并没有等到画面完全静止才显示图片。而是在镜头快要锁定的那一瞬间,相关的旅行照片会像烟花或者飞牌一样,从中心点向四周带有弹性地“炸”开。
这种视觉上的视差感,配合刚才的慢速运镜,会让整张地图看起来是“活”的,而不是一张死板的 JPG。
3. 强迫症级别的 UI 细节
为了让画面更干净,这次我们做了两点“减法”和一点“加法”:
- 减法:去掉了城市名字后面那个难看的白色背景块,文字悬浮在地图上,干净清爽。
- 减法:重写了灯箱(Lightbox)。以前点开图片可能有白边,或者超出屏幕。现在?点开图片就是全屏沉浸,没有多余的边框,手机电脑都适配得刚刚好。
4. 逻辑更直觉了
现在的交互逻辑非常符合直觉:
- 点中间的城市名/圆点/徽标:直接跳转到该城市的游记文章页。
- 点周围漂浮的照片:直接在当前页面放大查看照片细节。
怎么用?
极其简单,不需要复杂的配置。只要你的文章标题或内容里包含了城市名,在文章任意位置插入短代码:
|lumin-成都-map|
插件就会自动抓取该文章里的图片,生成这个带有丝滑运镜的独立地图。
这次更新其实就是为了解决一个痛点:让地图不再只是数据的堆砌,而是情绪的延伸。 哪怕只是盯着那个运镜看几遍,都觉得这次旅行没白去。
干得漂亮,真厉害