Question

我喜欢为移动设备构建指南针应用程序。我已经创建了一个函数，它返回罗盘针旋转的变化值。（例如20）但是如果我只是将'图像变换'设置为'旋转（x度）'它看起来有点跳跃，所以我的想法是为针移动添加平滑动画。

如何编写可以为指南针添加动画的js函数？

重要提示：使用参数“20”调用函数时会发生什么，并且使用不同的参数“-30”再次调用0.5秒（当转动20秒动画尚未结束时）。因此，该功能的一个特征必须是取消正在运行的动画，并将旧的变化值（'20'）添加到新的变化值（' - 30'）并启动另一个动画。

希望你能理解我的问题。这是我的基本功能：

var change_value=20;
function start_animation(change_value){ 
  $needle_element.css("-webkit-transform", "rotate(" + change_value + "deg)")
}

Answer 1

这是你在找什么？

// Get references to DOM elements
var input = document.getElementById("angle");
var btn = document.getElementById("btnGo");
var needle = document.getElementById("needle");

// Set up click event handler
btn.addEventListener("click", start_animation);

// Storage for the previous angle
var lastAngle = "";

function start_animation(){ 
  // Update the total angle needed
  lastAngle = +lastAngle + +input.value;
  
  // For testing:
  console.clear()
  console.log("Current total angle: " + lastAngle);

  // Move the needle:
  needle.style.transform = "rotate(" + lastAngle + "deg)";
}

#needle {
  height:5px;
  background-color:#808080;
  width:100px;
  margin-top:100px;

  /* Initial value for rotate is needed for transition to work */
  transform:rotate(0);  

  /* CSS transition creates smooth effect */
  transition:all 1.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="angle" value="20"><button type="button" id="btnGo">Go!</button>
<div id="needle"></div>

Javascript：如何为图像创建平滑的旋转动画？ [指南针]

1 个答案: