Real Estate Map Animation Tutorial

7 阅读9分钟

我按纯观察画面里作者实际点击的界面整理了这支教程。
这支视频里,真正被演示出来的内容,主要是用 GEOlayers 3 创建并摆好地图底图;开头那段带有彩色线路、黑色楼盘主标、多个地名标注的成片效果,更像是先展示结果,但在后面的操作里没有完整演示这些元素的制作过程

所以这次我会分成两部分:

  1. 视频里能确定作者真的做了什么
  2. 开头成片效果里有、但这支视频里没完整演示的部分,我只能按结果反推

一、视频里能确定作者实际做了什么

1)先展示成片参考画面

开头几秒,作者先播放了最终效果参考。
从画面上能看出成片包含:

  • 一个浅色 3D 倾斜地图
  • 多条彩色路线
  • 中央黑色品牌标牌
  • 多个地点说明标签
  • 若干圆点和引线

但这段只是预览,不是具体操作。


2)新建主合成

作者随后回到空项目,打开 Composition Settings

从画面里能直接确认:

  • 合成名:main comp
  • 预设:HD · 1920x1080 · 25 fps
  • 宽度:1920 px
  • 高度:1080 px
  • Pixel Aspect Ratio:Square Pixels
  • Frame Rate:25
  • Resolution:Full
  • Duration:00:00:15:00
  • Background Color:Black

也就是说,这支教程的主工程是:

  • 1920×1080
  • 25fps
  • 15 秒

3)打开 GEOlayers 3 面板

作者全程明显在用:

  • GEOlayers 3

左侧能看到 GEOlayers 3 面板标签,后面也一直在这个面板里操作。


4)在 GEOlayers 3 中创建地图合成

作者点击的是:

  • Create Mapcomp

在这个创建窗口里,能确认到这些参数:

  • Name:看起来是 map layer
  • Size:1920 px × 1080 px
  • Framerate:25 fps
  • Duration:15 seconds

这说明作者不是先手工拉一个普通图片进来,而是:

  • 直接用 GEOlayers 3 生成一个地图合成

5)选择地图风格

创建地图时,作者在 GEOlayers 3 的风格库里挑样式。

画面里能明确看到一个样式名:

  • CASPIAN WHITE

从最终生成的地图外观看,也确实符合这个风格特点:

  • 海洋是浅蓝
  • 陆地是暖灰白
  • 绿地偏浅绿
  • 整体很干净,很适合后面叠加房产路线和标注

所以这一部分我判断为:

  • 作者选的是浅色系地图样式
  • 很大概率就是画面里出现的 Caspian White

6)点击 Create 生成地图

样式确定后,作者点击:

  • Create

然后 AE 里自动生成了一个地图相关合成。

从后面时间线能看到,插件自动创建了至少这两层:

  • map lay_anchor
  • map layer

并且当前查看的合成名出现过:

  • containing map layer

也就是说,GEOlayers 自动帮他搭了一个地图容器结构,而不是单层平图。


7)把地图从全球视角切到 Houston 一带

这是视频里最明确的主操作。

作者在 GEOlayers 面板左边的地图预览区中,不断进行:

  • 拖动
  • 缩放
  • 定位

最后把地图中心落到:

  • Houston
  • 周边还可见 PasadenaSugar LandGalveston

所以实际操作逻辑是:

  1. 先从全球视角开始
  2. 用 GEOlayers 左侧预览不断缩放
  3. 最后把目标区域定位到 Houston 都市区
  4. 右侧 AE 视图同步更新

8)最后点击 Finalize

定位好城市和范围后,作者点了:

  • Finalize

这一步通常表示:

  • 把当前地图视图和插件参数固定下来
  • 结束这一轮 GEOlayers 的编辑状态

9)打开 Mapcomp Settings 再检查地图参数

后面作者又点进了地图设置页。
这里能清晰看到一些参数:

  • Name:map layer
  • Duration:15 seconds
  • Language:English - United States
  • Max Zoom:23
  • Min Zoom:0
  • Attribution:none

下面仍然是地图风格选项区,也能继续换样式。

这一页说明作者至少检查了:

  • 地图语言
  • 最大缩放级别
  • 最小缩放级别
  • 是否显示 Attribution

10)右侧最终底图状态

在教程可见部分结束前,右侧地图已经是一个完成度很高的底图:

  • 浅色底
  • 暖灰城市块
  • 白色主干路/路网
  • 浅绿绿地
  • 浅蓝水域

这个底图本身已经很适合后面做地产项目展示。


二、这支视频里没有完整演示,但成片里出现了什么

这一部分很重要。
我不能假装作者演示了这些,因为从画面里看,他后面并没有把这些层一步步搭出来

开头成片里能看到,但本视频里没有完整操作过程的内容包括:

  • 多条蓝/绿/黑/红路线

  • 中央黑色品牌牌子 GABLES RESIDENTIAL

  • 多个地点标签
    例如:

    • Memorial Park
    • River Oaks Country Club
    • Macy's
  • 圆点定位和细引线

  • 中间那一圈淡白色脉冲圆环

  • 可能还有轻微发光和景深感

所以这些部分,我不能说“作者点了哪个控件、参数是多少”,因为这支文件里确实没展示清楚


三、基于画面结果,反推这套成片大概率怎么补完

下面这一段不是“视频里直接看见的操作”,而是我根据成片结果,给你的最接近原效果的复刻方案
我会明确按“反推方案”来写。


1)彩色路线

从成片看,这几条线路很像是 AE 里手动画的 Shape 路径,而不是地图自带高亮。

更像这样做:

  1. 新建 Shape Layer

  2. Pen Tool 按地图道路走向描路径

  3. 只保留 Stroke

  4. 分别设成:

    • 蓝色
    • 绿色
    • 黑色
    • 红色
  5. 把端点改成圆角:

    • Round Cap
    • Round Join
  6. 需要出现动画时,加:

    • Trim Paths

想做出更接近成片的质感,建议:

  • 线宽做成 2 层
    一层粗一点、透明一点做底
    一层细一点、颜色更实做主线

这样不会显得太扁。


2)中央黑色楼盘标牌

中间那个 GABLES RESIDENTIAL 的牌子,看起来像:

  1. 一个黑色圆角矩形
  2. 左边加白色 logo
  3. 右边是两行白字
  4. 整体加轻微阴影或高光

复刻方式:

  1. 画圆角矩形
  2. Fill 设黑色
  3. 用白色 logo 图片或矢量图放左侧
  4. 文字右侧排两行
  5. 字体用偏正式的衬线体或品牌字
  6. 整体轻微加阴影

这个牌子下方再接一条细引线,连到地图上的圆点。


3)地点标签

这些标签明显是独立图层,不是地图原生地名。

结构大概率是:

  1. 一条细线
  2. 线底端接一个空心或描边圆点
  3. 上方接一个窄长矩形标签
  4. 标签里放文字

你可以这样复刻:

  1. Pen Tool 画引线
  2. 线底部画一个小圆
  3. 再画一个横向窄矩形
  4. 填入地名文字
  5. 整体配色用蓝灰色或冷灰色
  6. 给标签和线条统一 2D 样式

成片里这类标签比较细长,不是厚重的卡片风格。


4)白色脉冲圆环

成片里主楼盘点位附近有一圈淡白色环扩散。

这通常可这样做:

  1. 画一个圆
  2. Fill 关掉
  3. Stroke 开白色
  4. Scale
  5. Opacity

一组常用逻辑:

  • 起始:

    • Scale 小
    • Opacity 高
  • 结束:

    • Scale 变大
    • Opacity 变 0

再复制 1 到 2 层,错帧一点,就会更像脉冲。


5)地图倾斜的 3D 视角

成片里的地图不是平视,是有明显俯视倾角的。

视频里能看出作者最终底图有透视感,说明很可能用了:

  • GEOlayers 自带视角控制
  • 或 AE 里的 3D Camera / 倾斜父层

如果你自己补做,比较稳的方式是:

  1. 把地图预合成
  2. 开 3D 图层
  3. X Rotation 略微倾斜
  4. 再用 Camera 微调

但因为这支视频里没完整展示这一步的参数,所以我不能给你一个确定数值。


四、这支视频里目前能确认的关键参数总表

把真正能从画面里看清的值单独给你:

主合成

  • 名称:main comp
  • 分辨率:1920 × 1080
  • 帧率:25 fps
  • Duration:00:00:15:00
  • Pixel Aspect Ratio:Square Pixels
  • Background:Black

GEOlayers 创建地图

  • Name:map layer
  • Size:1920 × 1080
  • Framerate:25 fps
  • Duration:15 seconds

Mapcomp Settings

  • Language:English - United States
  • Max Zoom:23
  • Min Zoom:0
  • Attribution:none

地图风格

  • 画面可见样式名:CASPIAN WHITE
  • 结果风格:浅灰白底、浅蓝水、浅绿绿地

目标区域

  • Houston
  • Pasadena
  • Sugar Land
  • Galveston

五、如果你要复刻这支视频,最稳的做法

按这支视频里真正能确定的流程,你可以这样做:

A. 先把底图做对

  1. 新建主合成 1920×1080 / 25fps / 15秒
  2. 打开 GEOlayers 3
  3. Create Mapcomp
  4. 设地图大小 1920×1080
  5. Duration 15 seconds
  6. 选浅色地图样式,优先试 Caspian White
  7. 定位到 Houston
  8. Finalize

B. 再自己补成片元素

  1. 手动画 4 条彩色路线
  2. 做中心黑色楼盘牌子
  3. 做 3~4 个地点标签
  4. 做主点位脉冲圆环
  5. 最后统一做一点 3D 倾斜和镜头微调

六、这支视频的局限

这句我得说清楚:

如果你要求“作者点击了哪些控件、数据调成多少都要告诉我”,那这支视频本身做不到像前几支带字幕那样精确。

因为从纯画面观察来看,这支视频真正清楚展示的是:

  • 建主合成
  • 用 GEOlayers 3 建地图
  • 选地图样式
  • 定位城市
  • 调地图设置

而开头成片里最吸引人的那部分:

  • 路线
  • 品牌牌子
  • 地点标签
  • 脉冲圈

这支文件里没有完整的逐步制作画面

所以我这里已经把:

  • 能确认的部分写实
  • 不能确认的部分明确区分为“反推方案”

这样你照着做时不会被误导。

如果你愿意,我下一条可以直接把这支内容整理成一份更适合你实操的版本:
“AE 施工单”格式,按「先做地图底图、再补路线、再补标签」给你列成一步一步的执行清单。