Re: [css3-animations] Complex animations

On 30/03/2011 8:23 AM, Rik Cabanier wrote:
> On Tue, Mar 29, 2011 at 12:13 PM, Robert O'Callahan<robert@ocallahan.org>wrote:
>
>> On Wed, Mar 30, 2011 at 6:30 AM, Rik Cabanier<cabanier@gmail.com>  wrote:
>>
>>> The second part of your problem is a little different. In order to do
>>> that, you need to have a precise timing event so you can determine if your
>>> character is colliding with something else.
>>> Mozilla's proposal could be part of the solution:
>>> http://hacks.mozilla.org/2010/08/more-efficient-javascript-animations-with-mozrequestanimationframe/
>>> This proposal lets you call a JS function at precise intervals much like
>>> Flash's onEnterFrame function. If you combine this with my request to pause
>>> all animations on the page, you would know the precise state of everything
>>> in the DOM.
>>>
>>
>> I think requestAnimationFrame is tremendously useful (I helped design it)
>> but it can't be a complete solution since when animations are carried out
>> off the HTML5 event loop thread (which you want for smoothness), JS may not
>> be able to run at the moment the animation finishes.
>>
>
> This is why being able to pause all animations is important.
> I don't think that this will give many issues with smoothness as long as you
> use animations for the bulk of the motion and keep you JavaScript to a
> minimum.
> The Flash player pauses all rendering during its ActionScript phase and real
> world performance of games and animations is fine.
>
>
>> SMIL animations can easily express what you need to express here. Perhaps
>> we don't need to make CSS animations cover this use case.
>>
>
> I have to admit that I'm not that familiar with SMIL. I just glanced at the
> spec and it seems overly complicated. Maybe it's better to extend the CSS
> animation spec to allow for true keyframe animation.
>
> Rik


I remember in the 1990s playing Tomb raider on PS1. You could end up in 
loops by falling in the wrong place and you could look through walls if 
you had an odd perspective. Games have developed much since then and the 
most stunning games are those that are 3D.

CSS animation can be coded with CSS and it could be used for so many 
purposes. At this moment architecture design software is quite 
expensive. Scientist use software to rotate things in 3D space but this 
is now possible with CSS animations. How many game write may look a 
CSS3, HTML and JS as an alternative to flash?


Here is a demo that allows you to rotate a frame with a mouse.

<http://www.zachstronaut.com/lab/galaxy-box/>

   - Demo notes -

<http://www.zachstronaut.com/posts/2010/07/28/3d-css3-galaxy.html>



Here is a demo that allows you to spin a frame with a mouse (the quicker 
you move the mouse, the quicker it spins).

<http://www.zachstronaut.com/lab/3d-canvas-galaxy.html>

   - Demo notes -

<http://www.zachstronaut.com/posts/2010/09/13/html5-canvas-3d-galaxy.html>




Here are my latest two demos which places the viewer inside a box.

<http://css-class.com/test/css/3/3d-animation/outside-and-inside-the-box.htm>

<http://css-class.com/test/css/3/3d-animation/outside-and-inside-the-box2.htm>



The CSS3 region spec [1] could come into great use since I can imagine 
adding and removing things via the DOM with JS. You can create virtual 
3D environments which you can navigate through.

Being able to fire frames at various intervals of together would be 
useful with animations.



1 <http://dev.w3.org/csswg/css3-regions/Overview.src.html>



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Wednesday, 30 March 2011 18:32:46 UTC