JavaScript: Implementing a seamless spinning effect for an image [Compass needle]

Question

JavaScript: Implementing a seamless spinning effect for an image [Compass needle]

I have been working on developing a compass app for mobile devices and have successfully created a function that returns the change-values for the compass-needle rotation (e.g. 20). However, I have noticed that setting the 'image-transform' to 'rotate(x deg)' results in a slightly jumpy motion. To enhance the user experience, I am keen on adding a smooth animation for the needle to move.

Could you help me with coding a JavaScript function that can incorporate an animation for my compass needle?

Of utmost importance: How do I handle a situation where the function is called with a parameter '20', and 0.5 seconds later (while the initial animation is in progress) the function is called with a different parameter '-30'. I need the function to cancel the ongoing animation, add the new change-value ('-30') to the old one ('20'), and initiate a new animation seamlessly.

I hope my issue is clear. Below is the basic framework of my function:

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

javascript html css animation

Answer 1

Answer №1

Is this the solution you seek?

// Accessing DOM elements
var input = document.getElementById("angle");
var btn = document.getElementById("btnGo");
var needle = document.getElementById("needle");

// Setting up click event handler
btn.addEventListener("click", start_animation);

// Storing the previous angle
var lastAngle = "";

function start_animation(){ 
  // Updating the total angle required
  lastAngle = +lastAngle + +input.value;
  
  // For testing purposes:
  console.clear()
  console.log("Total current angle: " + lastAngle);

  // Moving the needle:
  needle.style.transform = "rotate(" + lastAngle + "deg)";
}

#needle {
  height:5px;
  background-color:#808080;
  width:100px;
  margin-top:100px;

  /* Initial rotate value required for smooth transition */
  transform:rotate(0);  

  /* CSS transition for 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>

Answer 2

Is this the solution you seek?

// Accessing DOM elements
var input = document.getElementById("angle");
var btn = document.getElementById("btnGo");
var needle = document.getElementById("needle");

// Setting up click event handler
btn.addEventListener("click", start_animation);

// Storing the previous angle
var lastAngle = "";

function start_animation(){ 
  // Updating the total angle required
  lastAngle = +lastAngle + +input.value;
  
  // For testing purposes:
  console.clear()
  console.log("Total current angle: " + lastAngle);

  // Moving the needle:
  needle.style.transform = "rotate(" + lastAngle + "deg)";
}

#needle {
  height:5px;
  background-color:#808080;
  width:100px;
  margin-top:100px;

  /* Initial rotate value required for smooth transition */
  transform:rotate(0);  

  /* CSS transition for 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: Implementing a seamless spinning effect for an image [Compass needle]

Answer №1

Similar questions

assistance in incorporating CSS classes using jQuery

utilizing class manipulation to trigger keyframe animations in react

splitting the array elements in JavaScript

Steps for removing a chosen file from several input files by clicking a button

Implementing dynamic components in Vuejs by passing props from objects

When you hit a certain point on the website, the scrolling momentarily pauses

Unable to click on links due to issues with the CSS and HTML

What is the best way to create a strip within an oval using CSS to achieve a partially filled vertical vessel effect?

JSOUP is cleverly filtering out specific tags while navigating through the HTML tree

Troubleshooting Java REST service integration in AngularJS for UPDATE and DELETE operations

Trying to replace all instances of a word in an HTML document with a <span> element, but only for <p>, <span>, and <div> tags. It shouldn't work if the parent node already contains

Maximize the performance of displaying images

Limit the vertical movement in Vue drag and drop operations

Tips for saving the ajax response to the browser cache using jquery

Implementing logic with multiple columns in JavaScript

Is it possible to create an HTML dropdown menu with integer values?

Changing a background image url using jQuery by clicking a button

A fatal error has occurred in Node as it is unable to set headers after

Is it true that loading "undefined" into an array can use up a significant amount of memory?

My onClick AngularJS function contains a for loop that is not functioning properly upon initial click