动画图像箭头，如 JS 中的速度计

Question

我有这个电流UI

箭头图像只是透明图像。

我正在尝试为该图像添加动画。

每次重新加载页面/加载页面后，它只会从低到高移动。

我的想法是使用 jquery

我在玩这个代码

 <img class="meter-arrow" src="{!! url('public/images/arrow.png') !!}" >
  
  <script src="{{url('public/js/libraries/jquery_file_3_1.js')}}"></script>
  <script>
    $(".meter-arrow").animate({left: '250px'});
   </script>

来源：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

是否可以这样做

Answer 1

这样的动画也可以通过 CSS 实现。看到这个 StackBlitz example.

参考 tranfsorm https://www.w3schools.com/cssref/css3_pr_transform.asp

Answer 2

奇怪的是，使用 jQuery 制作旋转动画非常困难。请参阅 here 了解操作方法。

我认为在纯 JS 中更容易：

// The image element
let arrow = document.querySelector(".arrow")

// It onload --rotation value
let rotation = parseInt(getComputedStyle(arrow).getPropertyValue("--rotation"))

// Rotation on an interval
let increase = setInterval(function(){
  rotation = (rotation>25) ? clearInterval(increase) : rotation+1
  arrow.style.setProperty("transform", `rotate(${rotation}deg`)
},20)

.arrow{
  --rotation: -90deg;
  margin: 5em;
  height: 160px;
  width: 150px;
  transform: rotate(var(--rotation));
  transform-origin: 68px 118px;  /* the position of the rotation point in the image */
}

<img src="https://i.imgur.com/crRJmHg.png" class="arrow">

动画图像箭头，如 JS 中的速度计

Animate image arrow like speedometer in JS

javascript

jquery

laravel

jquery-animate