jQuery/CSS 3 动画 - 概念解决方案 - 沿着一条路进入地平线

Question

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

问题

我被要求研究时间线的导航 - 你沿着一条路走入地平线。

灵感图像如下所示:

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

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

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

我正在考虑如何制作这样的动画。我想过把画面分成4个区域，地平线、道路和两侧。

通过保持地平线静止，将两侧向道路方向移动，然后将道路笔直向下移动，同时使其更宽，我认为移动动画是可能的。看图:

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

请帮忙

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

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

Answer 1

这有点即兴的想法!为什么不为点击时将经过的道路移动制作 .gif 动画，在动画运行后，您可以使用应显示的新信息来更新道路和侧面，这些信息取决于您在道路上单击的位置？这更像是一种 JavaScript 方法。我不知道如何使用 CSS 以这种方式移动图像。

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