js库为汽车制作动画'It’在jpg格式的地图上移动

js library to animate car's moving on a map in jpg format

本文关键字：jpg 格式 移动 地图 It 为汽车 动画 js      更新时间：2023-09-26

我有一张jpg格式的地图图像（而不是svg），以及一系列（x，y）点，表示汽车在地图上的移动位置。

我想创建一个html页面来动画这辆车在地图上的移动。

你能推荐一个可以轻松实现这一点的js库吗？

非常感谢！

虽然我会用css3来防止不必要的http请求，但您可以使用此javascript库来使用html5 canvas kinetickJS

您不一定需要JavaScript来实现这一点。查看CSS动画。产生这种效果的确切CSS将与用于显示图像和汽车的HTML相结合。

如果你有一些HTML，比如：

<div class="wrapper">
  <img class="car" src="/car.jpg" />
  <img src="/map.jpg" />
</div>

还有一些CSS：

.wrapper {
  position: relative;
}
.wrapper .car {
  position: absolute;
  top: #; // initial top offset
  left: #; // initial left offset
  animation: car-path 5s 0s 1 normal forwards; // shorthand
}
// define keyframes for the car animation.
// add as many intermediate states as you want.
// in each state simply define the position and 
// rotation of the car to simulate turning/acceleration
// change "0%" with the position you want the car in
@keyframes car-path {
  0% {
    top: 0%; 
    left: 0%;
    transform: rotate(0deg);
  }
  // add as many intermediate positions as you want
  100% {
    top: 0%;
    left: 0%;
    transform: rotate(0deg);
  } 
}

你可以通过这种方式获得一些有趣的结果。

相关文章：