Databases
StackOverflow2013
Postsdbo
POd3/Javascript animations are not playing when they should be
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POd3/Javascript animations are not playing when they should be
    primarykey
    data
    text
    <p>I have the following code to animate an object ("tag") along its path, which is an array of coordinates (x, y, t, where t is the time in between this coordinate and the next one, in ms -- to account for the acceleration/deceleration of the object. The path is generated from a user's mouse movements, and high precision is desirable). The project uses d3.js to animate SVGs.</p> <pre><code>function Animation(tag,path) { this.tag = tag; this.path = path; } Animation.prototype = { start : function () { console.log('Animation created'); var i = 0; var nextTime = this.path[0].t; var thisClass = this; setTimeout(function(){}, nextTime ); console.log('Beginning animation'); function step() { setTimeout( function(){ if(i == thisClass.path.length -1 ) { var now = new Date(); console.log('Animation for '+ thisClass.tag.attr('id') + ' played at ' + (now - globalTimer) + 'ms.'); return; } if(i === 0) { var now = new Date(); console.log('Animation for '+ thisClass.tag.attr('id') + ' started at ' + (now - globalTimer) + 'ms.'); } thisClass.tag .attr('cx', thisClass.path[i].x) .attr('cy', thisClass.path[i].y); i++; requestAnimationFrame(step); }, thisClass.path.t); } requestAnimationFrame(step); } }; </code></pre> <p>Another class is responsible for scheduling when each animation is supposed to be played. For example, in a 30-second period, 3 animations have to be played, at times :03, :09, :25. When an animation is needed to be played, the scheduler calls it:</p> <pre><code>new Animation(Tag, Path).start(); </code></pre> <p><strong>The problem:</strong> Although the scheduler calls each animation properly on time, no instance of the function <code>step()</code> is executed on time -- they all seem to happen at the very end of the recorded period, all at once. So while one would hope my log to look something like this:</p> <blockquote> <p>Animation created<br> Beginning animation<br> Animation played<br> Animation created<br> Beginning animation<br> Animation played<br> ... </p> </blockquote> <p>... instead, it looks like this:</p> <blockquote> <p>Animation created<br> Beginning animation<br> Animation created<br> Beginning animation<br> <code>(2)</code> Animation Played </p> </blockquote> <p>(Edit: <a href="http://puu.sh/4Ucw9.png" rel="nofollow">http://puu.sh/4Ucw9.png</a> for more details. "Animation pushed" appears on the line immediately after <code>new Animation(...)</code>, so in theory, after animation had been completed. As you can see, the three tags (c0, c1, c2) were supposed to be called at different ms marks each, but the animation for all three started at 7019ms)</p> <p>Animations should play when they are called, not at the end of the time period. It seems like they're queueing up and then all executing at once, but as far as I understand, I didn't tell them to do that. I suspect <code>requestAnimationFrame</code> is somehow the key, but I just started using it yesterday, so I'm still not 100% sure what it does and how to use it. Does anyone know what's going on?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsg.cc
    1. USsg.cc
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIs there a particular reason for using raw animation frames? You could do all of this with D3's transitions.
      singulars
      1. POd3/Javascript animations are not playing when they should be
      1. USLars Kotthoff
    2. COI'm not 100% certain I'll keep using the raw animation frames, but so far, they are the easiest to manage and implement. They are a little messy, yes, but I'd rather get the basics of the prototype working first, and then make the code good, quick, and pretty.
      singulars
      1. POd3/Javascript animations are not playing when they should be
      1. USsg.cc
    3. COI'm saying that this would be much easier with transitions.
      singulars
      1. POd3/Javascript animations are not playing when they should be
      1. USLars Kotthoff
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload