像 JS 中的速度计一样动画图像箭头答案

【问题标题】：Animate image arrow like speedometer in JS像 JS 中的速度计一样动画图像箭头
【发布时间】：2021-03-12 01:42:51
【问题描述】：

我有这个当前的用户界面

箭头图像只是一个透明图像。

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

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

我的想法是使用 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

这样可以吗

【问题讨论】：

标签： javascript jquery laravel jquery-animate

【解决方案1】：

使用 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 */
}

&lt;img src="https://i.imgur.com/crRJmHg.png" class="arrow"&gt;

【讨论】：

【解决方案2】：

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

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

【讨论】：