如何创建具有椭圆形/圆形路径图案的动画Javascript

编程问答 2022-08-10

问题描述

如何创建具有椭圆形/圆形路径图案的动画Javascript？ 我想让它扭曲，但是我很难受。就像足球场上的一些移动物体一样，并沿着图案移动。

enter image description here

enter image description here

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Race Runing</title>
  <style>
  div {
    position: absolute;
    background-color: #EEE;
    left: 50px;
    width: 50px;
    height: 50px;
    margin: 5px;
    border-radius: 50%;
  }

  .block1{
    background-color: red;
  }

  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
    
<button id="leftobjek1">Go Back 1 Step</button>
<button id="rightobjek1">3 Step Forward</button>

<div class="block1"> Object 1</div>
 
<script>

//with conditions 1 step equals 50px

$( "#rightobjek1" ).click(function() {
  $( ".block1" ).animate({ "left": "+=150px" },"slow" );
});
 
$( "#leftobjek1" ).click(function(){
  $( ".block1" ).animate({ "left": "-=50px" },"slow" );
});


</script>
 
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-animationsjavascriptjqueryjquery-events