samedi 21 février 2015

How to mimic a shake animation effect using pure javascript


I create a function that when mouseover trigger a shake animation. Now I need to make sure it shakes for ever after the mouseover. Thank you guys.



function shake(e, oncomplete, distance, time) {
var time = 500;
var distance = 5;

var start = (new Date()).getTime();
animate();

function animate() {
var now = (new Date()).getTime();
// Get current time
var elapsed = now - start;
// How long since we started
var fraction = elapsed / time;
// What fraction of total time?
if (fraction < 1) {
var x = distance * Math.sin(fraction * 4 * Math.PI);
e.style.left = x + "px";
// We're aiming for a smooth 40 frames/second animation.
setTimeout(animate, Math.min(25, time - elapsed));
} else {
// Otherwise, the animation is complete
if (oncomplete) oncomplete(e);
// Invoke completion callback
}
}
}

function shakeme(event1) {
shake(event1.target);
}

document.getElementById("wood").addEventListener("mouseover", shakeme, false);

<button id="wood">Hello World</button>




Aucun commentaire:

Enregistrer un commentaire