french english

RSS 1.0 
 
 Login 
 Password 
 Créer un compte 
 
06-02-09 / 23:27 : WebKit CSS Animations / accélération / VFX (cjed)
Apple a dévoilé les CSS Animation, disponibles dans les dernières versions (nightly builds) de WebKit, et déjà dans le Safari de l'iPhone (depuis le firmware 2.1). Ces animations sont de type explicite, avec répétition et possibilité de définir des images clés. Trois exemples sont fournis.

Les propriétés que l'on peut animer correspondent aux propriétés habituelles des styles CSS : position (left, right, top, bottom), couleur de fond (background-color), opacité (opacity), etc. Mais on peut également gérer l'animation de transformations (CSS Transforms) : valeur d'échelle (scale), valeur de rotation (rotate). Ainsi les transformations deviennent progressives (transitions). De manière générales les CSS Transitions permettent également des gradients et masks. L'ensemble de ces extensions autour des CSS est appelé le CSS Effects project.

On définit les propriétés à animer (et leurs valeurs intiales et finales) via un style CSS, et on déclenche et paramètre l'animation (nom de la CSS Animation précédente à animer - référence au nom de cette CSS -, durée de l'animation, nombre d'itérations, sens pour les répétitions) en fixant des propriétés d'une div, ou bien d'une seconde CSS. Pour définir des images clés, on définit plusieurs groupes de propriétés dans la CSS Animation (avec pour chaque groupe un pourcentage en préfixe, qui précise la position temporelle - dépend de la durée de la transition - de l'image clé).

La version iPhone de Safari contient des optimisations : accelerated animations and transforms, including 3d (pas encore disponibles dans la version desktop de WebKit). Des exemples sont accessibles sur l'iPhone Dev Center (enregistrement nécessaire), notamment Poster Circle, Card Flip, Finger Tips et Simple Browser.
Apple propose également les interfaces Javascript/CSSOM pour piloter encore plus précisément les animations (programmatically adjust the keyframes in an animation, or get the current transformation of a node), mais elles semblent moins documentées.

Tout ceci se rapproche de ce qu'il est possible de faire avec l'implémentation de CoreAnimation dans Cappuccino (est partielle, ne gère que les animations explicites - pas implicites -, de la même manière que les CSS Animations, mais apparemment sans accélération). Dans un article d'Ajaxian sur les CSS Animations, on peut lire le commentaire suivant : Having animation directly in the browser will always be faster than using JS for every frame. With CSS animation, JS could just handle keyframes. Il semblerait bien pourtant que Cappuccino utilise la même approche, ou alors WebKit propose des points d'entrée particuliers vers le système pour accélérer le rendu des images intermédiaires via la carte graphique. Ce principe est cependant évoqué dans une présentation de Cappuccino - The Road to Cappuccino with Francisco Tolmasky- (36') : Graphics, no DOM, card_do(), DOM (W3C DOM/IE DOM) or CSS (CSS/IE CSS) or Canvas (Canvas/VML). Certains attendent cependant des avancées côté SVG.

On peut également découvrir une vidéo d'une animation type CoverFlow (zflow) réalisée sur le Safari iPhone avec les CSS Visual Effects extensions (accélération matérielle gérée sur l'iPhone) : 3D CSS transforms, CSS Transitions, utilisation de Canvas (dans l'implémentation HTML 5 de WebKit/iPhone Safari) pour simuler les réflexions.

MAJ : Voici la réponse au sujet de l'implémentation utilisée par Cappuccino pour Core Animation (dépend bien du browser) et le support futur des CSS Animation et transforms :
This is the plan, but it is not yet implemented. Currently, CA in Cappuccino uses Canvas in Safari/Firefox/Opera and VML in IE to achieve transforms. However, it would be much more desirable to use the built in CSS transforms when supported. We would also like to do the same with animations: using timer-based animation in IE/Firefox but CSS "server" based animations in Safari. Unfortunately we simply haven't gotten around to take on this pretty daunting task.
On peut lire une présentation de Canvas, les critiques et la préférence pour certains à SVG.
Commentaires
Poster un commentaire 
  
    
  image de securisation du formulaire


  
      (sera ajouté après validation)