Path: csiph.com!weretis.net!feeder4.news.weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Animated vector field...
Date: Sat, 04 Jun 2016 13:45:10 +0200
Organization: PointedEars Software (PES)
Lines: 52
Message-ID: <1650761.fOrR8oP7AL@PointedEars.de>
References: <nitnvj$mko$1@gioia.aioe.org> <nito4t$mo7$1@gioia.aioe.org>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding: 7Bit
X-Trace: solani.org 1465040712 14179 eJwFwYEBgDAIA7CXVKCFcxij/59gEoYXQ0fAQ6GbzB1vPvQJ6m6l8nARsipUXzP29qfFWfwnHRHC (4 Jun 2016 11:45:12 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Sat, 4 Jun 2016 11:45:12 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwFwYEBwDAEBMCVEt5jHFL2H6F3prx8Dhpha5vtX5ZiRupFCoMttFyc276yO6Us+4aqPQnvhuY8aY/A+QFegBWt
Cancel-Lock: sha1:BXXlr4MMYuAImkVXIP+ZsWlji6E=
X-NNTP-Posting-Host: eJwFwQEBADAEBMBKNjziYPSPsDtlHLQJFKKr6+zJiGjKaZ13nvjGpjlzOW5MOV0k1d5isg8ehBEN
Xref: csiph.com comp.lang.javascript:30632

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.