<div dir="ltr"><div>I'll try to use the inspector whenever I run into serious animation issue. Thanks.</div><div><br></div>Indeed, looks like all this concern seems very difficult without using at least a tweening library.<div>
Tween.js/Easel.js looks to be a very good one (it is recommanded to use the ticker function from easel.js, or to write one from scratch), and I am very interested in developping  activities with it. </div><div><br></div><div>
But :</div><div><ul><li>it does not seem to be AMD-ready : which, I think can be easily solved, looking again at Require.js documentation</li><li>the minified version (about 80 ko) seems to be the only way to avoid increasing significantly activity size when using it : again, I think I can go for it.</li>
</ul><div>Regards</div></div><div><br></div><div>Laurent Bernabe</div></div><div class="gmail_extra"><br><br><div class="gmail_quote">2014/1/8 Manuel Quiñones <span dir="ltr"><<a href="mailto:manuq@laptop.org" target="_blank">manuq@laptop.org</a>></span><br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">2014/1/8 laurent bernabe <<a href="mailto:laurent.bernabe@gmail.com">laurent.bernabe@gmail.com</a>>:<br>
><br>
><br>
> 2014/1/8 James Cameron <<a href="mailto:quozl@laptop.org">quozl@laptop.org</a>><br>
>><br>
>> On Wed, Jan 08, 2014 at 11:49:56AM +0100, laurent bernabe wrote:<br>
>> True, but if you make a simple test available, others can test it for<br>
>> you.<br>
>><br>
>> Especially so if you can figure a way to give the test report on<br>
>> screen, like a frame rate achieved.<br>
><br>
><br>
><br>
> If I've well understood, I should give a way to turn on/off the frame rate<br>
> display ?<br>
> (Like in some games / 3D frameworks).<br>
<br>
A display with the current FPS is great for testers.<br>
<br>
For your own tests, there are impressive debugging tools in web<br>
technologies that I never seen before.  The inspector timeline in<br>
Chrome, for example:<br>
<a href="https://developers.google.com/chrome-developer-tools/docs/timeline" target="_blank">https://developers.google.com/chrome-developer-tools/docs/timeline</a><br>
<br>
There you can see how much takes your app for painting and for other<br>
calculations, so you can find the bottleneck in your code.  You can<br>
even click on a paint record and it will highlight the area of the<br>
screen that was changed.<br>
<br>
><br>
><br>
>><br>
>> Yes, it is not practical to have a suggested range given the number of<br>
>> variables.<br>
>><br>
>> However, designing for higher values can have benefits ... in research<br>
>> for Netrek it was found that:<br>
>><br>
>> - five frames per second is a minimum for perception of motion, but<br>
>>   most users will perceive the steps and use them as the basis for<br>
>>   their reaction, such that when the rate is increased their training<br>
>>   has to be redone,<br>
>><br>
>> - ten frames per second is preferable, with most users still<br>
>>   perceiving the steps,<br>
>><br>
>> - 25 frames per second is very good, with most users not perceiving<br>
>>   the steps,<br>
>><br>
>> - 50 frames per second is excellent.<br>
><br>
><br>
><br>
> Thank you very much for this guideleness.<br>
> So, in my case, I should keep a frame rate around 50, if I really need to<br>
> fix it myself (I am thinking about the javascript requestAnimationFrame()<br>
> function).<br>
<br>
With requestAnimationFrame you don't force a constant FPS.  Instead,<br>
the callback is called as fast as your machine can.  So is good to<br>
decouple the duration of your animation from the frame rate.<br>
<br>
If you move your image 2 pixels each frame, the velocity will vary in<br>
diferent systems.  Instead, you should calculate how many milliseconds<br>
have passed since the last frame, and move your imave accordingly.<br>
Here is when interpolation comes into play, and a tweener lib becomes<br>
handy.<br>
<br>
>><br>
>> > And also, as I've been told on this mailing list, there is a new<br>
>> > Javascript API in order to let the computer(web browser ?) hold this<br>
>> > value for the programmer.<br>
>> ><br>
>> > So I think the "issue" can easily be solved : at least with this<br>
>> > requestAnimationFrame() function.<br>
>><br>
>> Great.<br>
>><br>
>> --<br>
>> James Cameron<br>
>> <a href="http://quozl.linux.org.au/" target="_blank">http://quozl.linux.org.au/</a><br>
><br>
><br>
> Regards<br>
><br>
> Laurent Bernabe<br>
><br>
><br>
> _______________________________________________<br>
> Sugar-devel mailing list<br>
> <a href="mailto:Sugar-devel@lists.sugarlabs.org">Sugar-devel@lists.sugarlabs.org</a><br>
> <a href="http://lists.sugarlabs.org/listinfo/sugar-devel" target="_blank">http://lists.sugarlabs.org/listinfo/sugar-devel</a><br>
><br>
<span class="HOEnZb"><font color="#888888"><br>
<br>
<br>
--<br>
.. manuq ..<br>
</font></span></blockquote></div><br></div>