Would like to understand the Animate function (calculation and stepping) - javascript

I would like to know how does the jQuery .animate() function work? - calculation and stepping (how much it jumps)

When the animation starts, a timestamp is taken. Then everytime a step triggers (depends on browser and how much stuff is going on), it is calculated how much time has passed since the animation started and the progress is calculated from that.
For example, animation started at 1322338364714, and the animation is supposed to last 5000ms. Once a step is triggered the progress is calculated like so:
Get current time, say 1322338366714.
Normalize = 1322338366714 - 1322338364714 = 2000
Progress is 2000 / 5000 = 0.4 = 40%. So a div that is being animated from 0px to 100px, gets 40px height.

Related

Run function just before jQuery animation ends

I have a scroller that animates scrolling using prev/next buttons. The duration of the animation is calculated based on the distance moved, so the duration is variable.
$c.animate({ scrollLeft: scrollLeft },
duration, 'easeInOutExpo', function () {
if (showPrev === 0) $s.attr("data-prev", showPrev);
if (showNext === 0) $s.attr("data-next", showNext);
});
After the animation is done, I want to refresh the user interface (the buttons), which you can see is done by updating two data attributes.
To date, I've tried two different options:
1. Update the data attributes before the animation
I use a CSS transition delay to make updates happen later but cannot fully co-ordinate it with the variable duration of the animation - sometimes it can be way out.
2. Update the data attributes after the animation
I attach the update function directly after the animation, which works, but there is an obvious delay after the animation is finished before the updates kick in.
Neither is perfect.
Ideally what I would like to do is kick off the function just before the scroll animation is finished - so if the scroll duration is 1s I would like to update the attributes at duration - 0.2s (0.8s).
This seems entirely possible given that I have full control of the duration.
What I don't know is how to implement this using jQuery - possibly kick off two tasks in parallel?
I'm not a jQuery expert by any stretch of the imagination so any help would be appreciated.
Please try with this code
$c.animate({ scrollLeft: scrollLeft },
duration, 'easeInOutExpo', function () {
if (showPrev === 0) $s.attr("data-prev", showPrev);
if (showNext === 0) $s.attr("data-next", showNext);
time = setTimeout(function () {
//keep your code here
}, duration-0.2s);
});
duration-0.2s => make it correct, i just mentioned it as an example.

JavaScript Velocity do not wait until animation finishes

I am using JavaScript with the VelocityJS library to animate a pointer on my screen. The thing is that I get my input for how many degrees I have to rotate the pointer way more often than it can process.
The code that I have right now is:
function changePointer(msg){
kmh = parseInt(msg.payloadString);
degreesToTurnTo = Math.round(kmh * stapgrote);
$("#pointer").velocity({
rotateZ: degreesToTurnTo+"deg"
});
console.log(degreesToTurnTo);
}
The function is getting called about 5 times a second, but 1 animation already takes about half a second.
So my question is, how can I make an if statements that checks if the previous animation is ready (so that I can update it again once its finished). Or how can I cancel the current animation and start the next one (this method would be preferred since I am making a speedometer).
Thanks in advance!
With kind regards,
Mats de Waard
From: http://velocityjs.org/#stop
/* Prior Velocity call. */
$element.velocity({ opacity: 0 });
/* Later, midway through the call... */
$element
/* Stop animating opacity. */
.velocity("stop")
/* Animate opacity back to 1. */
.velocity("reverse");
So in your case something like:
$("#pointer")
.velocity("stop")
.velocity({
rotateZ: degreesToTurnTo+"deg"
});

Counting the number of times a user scrolled and moved his mouse using JS / Jquery

I'm trying to count the number of times a user scrolled the page (any direction) and moved his mouse using this jquery code:
$(window).bind('scroll',function(e){
scrolling++;
});
$(window).bind('mousemove',function(e){
mouse_moved++;
});
The problem with this is one scroll event or one mouse movement gives the variables 'scrolling' and 'mouse_moved' a very high amount instead of just incrementing it by one.
It seems whenever the scrubber / mouse position changed it is counting it as one event already, even though the original event isn't done yet.
How can I do this correctly? Count one scrolling and mouse movement event properly?
You need to track your state, e.g. detect when scrolling/moving starts, then again when it ends. And you need to decide what "ending" means — how long does the mouse have to be stationary again before you decide it's stopped moving? 5ms? 10? 15?
var scrolling = 0;
var scrollTimeout = 0;
$(window).bind('scroll',function(e){
cancelTimeout(scrollTimeout);
scrollTimeout = setTimeout(doneScrolling, 10); // 10 = 10ms
});
function doneScrolling() {
scrollTimeout = 0;
++scrolling;
}
...and similarly with the mouse move (with its own separate timer).

JavaScript/jQuery: Animated Cursor/Light Effect

Recently, I found an SVG with an animated cursor element (like the kind of cursor you see when you're typing text on a screen, like I am now). The JavaScript behind this basically switches the visibility of the target element between on and off. The "cursor" element was the only part of the SVG file that the JavaScript affected. I've found that it can target HTML document objects, too.
Here's the original JavaScript, with id="cursor" (#cursor) marking the target element:
var visible = true;
setInterval(function () {
document.querySelector('#cursor').style.opacity = visible ? 0 : 1;
visible = !visible;
}, 550);
What I want to do is alter this code to make it fade in and out. The resulting effect would be like this:
Fade in quickly (250 ms)
Stay visible for less than half a second (500 ms)
Fade out (250 ms)
Repeat 1.~3.
In other words, steps 1 through 3 would all take place in one second, every second.
The question I have about this is: how do I do this in either JavaScript or jQuery?
(P.S.: is there a jQuery equivalent to the above code?)
Using jQuery, you could do the following
setInterval(function () {
$("#cursor").fadeIn(500, function(){
$(this).fadeOut(500);
});
}, 1000);
Using an interval like you mentioned to start the fade in (utilizing jQuery functions). Passing a callback to fade back out. You can mess with the timing to fit your feel

Synching animations, or calling at the halfway point of an animation

I have a somewhat difficult animation to do in JQuery, and I haven't found a good way to handle it. I have a mobile site with a scene on the screen which displays a series of choices. When a choice is made, the choices slide off screen, and simultaneously a new scene of a city is brought in (it's supposed to simulate driving) - and this scene, instead of stopping in the center of the screen, it passes all the way through the opposite end of the screen. The problem is, when it gets to the center, I want to trigger a new div to come in just behind it, matching the speed, etc, so everything appears in synch.
If I set the animation for the city scene to be in two parts, once to the center where it could trigger the new choice scene coming in, and once to go off screen, there is a noticeable jerk. And I haven't found a way to trigger a delay, because at the end of the delay I need to make a call to a custom function, not a jquery function. So this is my code:
Driving Scene (called when choices begin animating out):
$('#interlude').animate({marginLeft: -viewportW + "px"},3000,'linear',function(){
$('#interlude').remove();
displayScene(sceneID); //need to figure out how to call this at the halfway point
});
Use setTimeout() right before your animation to trigger the second animation halfway through the first animation.
var animateTime = 3000;
setTimeout("displayScene(" + sceneId + ")", animateTime / 2);
$('#interlude').animate({marginLeft: -viewportW + "px"},animateTime,'linear',function(){
$('#interlude').remove();
});

Categories

Resources