Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30632

Re: Animated vector field...

Show all headers | View raw

Chris M. Thomasson wrote:

> I forgot to mention that it will not work if your browser does not have
> (requestAnimationFrame). I do not have a workaround function for this as
> of yet.  :^o

Several of us have been doing rather smooth animations with 
window.setTimeout() since the beginning of the previous decade.
One pattern is:

  /* Should not be less than 10 ms */
  var step = 10;

  var timeout = window.setTimeout(function animate () {
    window.clearTimeout(timeout);

    /* modify properties according to a timing function */

    if (!stopCondition)
    {
      timeout = window.setTimeout(animate, step);
    }
  }, step);

More elaborate example:

<http://PointedEars.de/scripts/test/ani>

Note that the script console slows everything down, so you do not want to 
have it open when you test those animations.

That said, consider doing animations with pure CSS now.  My favorite example 
so far:

<http://codepen.io/yukulele/pen/Bheou>

Another one:

<https://cssanimation.rocks/spheres/>

A great one that only uses CSS 3D transformations and scripting (no Canvas):

<http://www.michaelbromley.co.uk/experiments/css-space-shooter/>

Some nice pure-CSS animations and transitions can also be found in the LCARS 
interface on my Web site.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Animated vector field... "Chris M. Thomasson" <nospam@nospam.no> - 2016-06-03 22:12 -0700
  Re: Animated vector field... "Chris M. Thomasson" <nospam@nospam.no> - 2016-06-03 22:15 -0700
    Re: Animated vector field... Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-06-04 13:45 +0200
      Re: Animated vector field... "Chris M. Thomasson" <nospam@nospam.no> - 2016-06-05 14:13 -0700
        Re: Animated vector field... "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-06-05 21:33 -0700
        Re: Animated vector field... Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-06-06 21:55 +0200
  Re: Animated vector field... Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-06-04 10:47 +0100
    Re: Animated vector field... "Chris M. Thomasson" <nospam@nospam.no> - 2016-06-05 14:16 -0700
  Re: Animated vector field... chris.m.thomasson.1@gmail.com - 2016-06-05 21:37 -0700
  Re: Animated vector field... "Chris M. Thomasson" <nospam@nospam.com> - 2016-06-09 16:02 -0700

csiph-web