jQuery/CSS 3 动画 - 概念性解决方案 - 沿着一条通往地平线的道路前进

Question

从一开始就明确 - 我正在寻找的是一个概念性解决方案/方法，而不是工作代码。

问题

有人要求我查看时间轴的导航 - 您沿着一条路走向地平线。

灵感图片看起来像这样:

一般的想法是，每条黄/红线定义了一个时间地点，当你点击它时，你应该沿着路走到那个时间地点。

实际图形可能会有很大不同。

到目前为止我的想法/方法

我在想如何制作这样的动画。我考虑将图片切割成 4 个区域，地平线、道路和两侧。

通过保持地平线不动，将两侧向道路方向移动，将道路直线向下移动，同时使道路变宽，我认为移动动画是可能的。看图:

这是一个非常简单的方法，但我确实看到了一些问题，比如向下移动时如何向图形添加细节。这可能可以通过更换沿途的图像来解决，当您一口气沿着这条路走很远时，这将很容易看到。

请帮忙

我正在寻找的是执行此类操作的概念性方法，而不是实际的解决方案。代码片段也很棒。

• 我有明智的方法吗？
• 能否以更智能的方式完成此操作？
• 我是否漏掉了一些明显的东西？
• 有什么好的工具可以帮我解决这个问题吗？

Answer 1

这是一个有点即兴的想法!为什么不制作一个 .gif 动画，当你点击它时，它会经过，在动画经过后，你可以根据你在道路上点击的位置，用应该显示的新信息更新道路和两侧？这更像是一种 javascripted 方法。我不知道如何使用 CSS 以这种方式移动图像。

我认为如果快速完成它看起来会很平滑，效果有点像当您移动到一个新区域时谷歌地图的道路 View 。它会运行一个运动动画，然后更新周围环境。