typecho足迹插件 LuminTrace v19.0更新日志(重点更新:全新独立城市地图)

LuminTrace v19 更新:足迹地图还能这么玩?这回我们做了个“电影级”的独立地图

之前的版本里,LuminTrace 一直是以一张“宏大的全国/世界地图”来展示大家的足迹。这很酷,能看到点亮的城市连成一片很有成就感。

但有时候,我只想讲一次旅行的故事。

比如我刚去了趟成都,写了一篇游记。在文章里塞一张密密麻麻的全国地图显得有点喧宾夺主,而单纯放几张照片又觉得不够生动。

所以,v19 版本我憋了个大招,搞出了这个「独立地图 (Independent Map)」功能。说实话,为了调这个动画的丝滑度,我把代码里的毫秒数改了几十遍,现在的效果,终于有点“那个味儿”了。

成都
LuminTrace Collection

萍乡
LuminTrace Collection

1. 拒绝瞬移,我们要的是“运镜”感

以前的地图定位是“刷”一下直接跳过去的,生硬得很。

这次的独立地图,打开时会先展示中国全貌,让你看清楚目标城市在哪里闪烁。紧接着,镜头会以一种极慢速、非线性的节奏推进。

这不是简单的放大,而是一种类似电影开场的运镜(Camera Movement)。你会感觉自己是从上帝视角慢慢降落,飞向那个城市。

2. 照片是“炸”出来的

这是我最喜欢的一个细节。

在镜头推进的过程中,并没有等到画面完全静止才显示图片。而是在镜头快要锁定的那一瞬间,相关的旅行照片会像烟花或者飞牌一样,从中心点向四周带有弹性地“炸”开。

这种视觉上的视差感,配合刚才的慢速运镜,会让整张地图看起来是“活”的,而不是一张死板的 JPG。

3. 强迫症级别的 UI 细节

为了让画面更干净,这次我们做了两点“减法”和一点“加法”:

  • 减法:去掉了城市名字后面那个难看的白色背景块,文字悬浮在地图上,干净清爽。
  • 减法:重写了灯箱(Lightbox)。以前点开图片可能有白边,或者超出屏幕。现在?点开图片就是全屏沉浸,没有多余的边框,手机电脑都适配得刚刚好。

4. 逻辑更直觉了

现在的交互逻辑非常符合直觉:

  • 点中间的城市名/圆点/徽标:直接跳转到该城市的游记文章页。
  • 点周围漂浮的照片:直接在当前页面放大查看照片细节。

怎么用?

极其简单,不需要复杂的配置。只要你的文章标题或内容里包含了城市名,在文章任意位置插入短代码:

|lumin-成都-map|

插件就会自动抓取该文章里的图片,生成这个带有丝滑运镜的独立地图。


这次更新其实就是为了解决一个痛点:让地图不再只是数据的堆砌,而是情绪的延伸。 哪怕只是盯着那个运镜看几遍,都觉得这次旅行没白去。

无标签
评论区
头像
    头像
    格子老师
      

    干得漂亮,真厉害

文章目录