Les frameworks flashlike javascript

Les frameworks flashlike en JS

Plan

• HTML et le DOM.• Où est placé mon objet HTML ?• Les frameworks Flashlike.• Où est placé mon objet avec un framework Flashlike ?• Les autres frameworks JS• Aller plus loin.

HTML et le DOM

Document Object Model

Interface de programmation permettant l’accès aux éléments composant une page web.

Permet le développement de pages interactives.

HTML et le DOM

Une page web simple

HTML et le DOM

Une page web simple Ne l’est pas tant que ça

Représentation 3D des éléments HTML.

HTML et le DOM

• La modification d’un objet impacte ceux qui suivent dans le « flux d’éléments »

• Le calcul de la position et de l’apparence de chaque objet est complexe

• Problèmes de performance lorsqu’on emploie un grand nombre d’objets

• Les éléments HTML sont assez limités et contraints à des formes rectangulaires.

Visualisation du processus de placement des éléments d’une page web. « reflow »https://www.youtube.com/watch?v=ZTnIxIA5KGw

Où est placé mon objet HTML ?

La position d’un objet dépend des règles CSS appliquées.


Appliquées à qui ?• À l’objet lui-même.• À ses parents.• À ses frères. Un objet « pousse » les autres dans le flux.

… Et donc, aux frères de ses parents (oncles, tantes).• Aux enfants de ses frères. Un objet grossi pour contenir ses enfants.

… Et donc, aux enfants des frères de ses parents (cousins).• … bref, à toute la famille !


Où est placé mon objet HTML ?La position d’un objet dépend des règles CSS appliquées.


Quelles règles influencent la position ?• Flux : position, float, display• Style : margin, border-width, padding• Position : top, left, right, bottom• …


Où est placé mon objet HTML ?La position d’un objet dépend des règles CSS appliquées.


C’est pas fini !• L’ordre dans lequel les règles CSS sont appliqués compte : les dernières lues écrasent les

précédentes• La spécificité du sélecteur aussi : un sélecteur plus spécifique l’emporte sur un sélecteur plus

général.• …Mais le marqueur !important permet de rendre une règle non écrasable• Les « spécificités » du CSS qui complexifient le code. Une règle n’est prise en compte qu’en

fonction d’une autre.• Border-width ne vaut rien si border-style n’est pas défini• top, left, right, bottom ignorés si position n’est pas spécifié à fixed ou relative• La règle clear, qui empêche les objets de se placer à coté d’un autre• … il y’en a des dizaines.

• La prise en compte des règles dépend des navigateurs

…On ne parle ici que des règles influant la position des objets.



En apparence simple, ça devient vite un vrai casse-tête.

L’analyse des règles CSS appliqués à un objet est si complexe qu’il faut des outils dédiés pour y voir plus clair.


Développeur face à un élément HTML qui ne se place pas à la position voulue.

Les frameworks Flashlike

• Développé par les flasheurs pour retrouver la simplicité et les performances de flash en HTML5.

• Conçus pour le développement de jeux, les interfaces riches et les sites web très animés.

• Excellentes performances, proche des applications natives quand on utilise WebGL.

• Compatible avec tout les navigateurs récents et mobiles (Android, iOS…).

• Rendu dans un objet <canvas> donc bitmap• Collage de bitmaps (sprites, tuiles)• Dessin des éléments vectoriels (rastérisation)

• Reprend le principe de displayObjectsimbriqués de flash.

Hiérarchie des displayObjects d’une scène.

Quelques exemples:

www.flashvhtml.comAnimation fluide à 60fpsWebGL (pixi JS) Moteur animation Greensock

CAAT lienTexte qui suit un chemin modifiable à la volée.

www.animatron.com Outil graphique permettant de créer des animations.

Où est placé mon objet dans un framework Flashlike ?

La position d’un objet dépend des propriétés x, y et rotation

de l’objet et de ses parents.

Où est placé mon objet dans un framework Flashlike ?

La position d’un objet dépend des propriétés x, y et rotation

de l’objet et de ses parents.

…et c’est tout !

Les matrices de transformation• Une matrice 3x3 pour chaque objet.

a = échelle horizontale a = biais vertical 0 constant

c = biais horizontal d = échelle verticale 0 constant

tx = translation horizontale Ty = translation verticale 1 constant

• En réalité, les propriétés x, y et rotation d’un objet affectent sa matrice de transformation.

• La matrice appliquée à un objet est la concaténation de la sienne et de celles de ses parents.

• Les GPU sont optimisés pour appliquer ces matrices a des images (même sur les cartes intégrées).

Autres fonctionnalités :

• Ces frameworks intègrent la gestion des évènements souris et clavier.• … et parfois des spécificités liées aux mobiles (accéléromètre, gestes).• Parseurs SVG : permet d’utiliser du SVG et de le dessiner à la taille

voulue.• Rendu WebGL : utilise le GPU pour des performances optimales (60

images par seconde)• Gestion des collisions entre objets

Avantages et inconvénients des frameworks flashlike.

Avantages• Simplicité : code orienté objet clair et bien

organisé.

• Performance, surtout pour ceux qui utilisent WebGL.

• Licence libre pour tous.

Inconvénients• Le rendu final est en bitmap et donc pas

d’export HTML vers PDF en vectoriel (il faut du SVG pour ca).

• Pas de contrôles : boutons, textbox, etc…• Utilisation de librairies dédiées• Utilisation des contrôles HTML à coté

Les principaux frameworks

• KineticJS : Canvas ou WebGL• EASELJS : Très complet : moteur d’animation, gestion des

chargements, du son, WebGL en béta…• Collie• CAAT : Rendu Canvas, WebGL et CSS• Pixi : Orienté WebGL (avec fallback canvas)

Les autres types de frameworks

• Créés pour simplifier l’utilisation des fonctions HTML5 des navigateurs. Canvas (dessin bitmap) et SVG (dessin vectoriel)

• Il sont très nombreux mais peu sont bien documentés.

• Dessin pur• Raphaël : librairie de dessin très simple• jQuery SVG : la syntaxe jQuery pour le SVG• SnapSVG : Raphaël en version SVG • Two.js : rendu SVG, Canvas ou WebGL

• Librairies plus complètes avec gestion des évènement clavier et souris:• Paper.js : un des pioniers• ProcessingJS : Plus qu’une librairie de dessin

• Représentation de données• D3js : dédié aux représentations graphiques de données (data-binding) www.d3js.org• www.highcharts.com

D3.js• Framework dédié à la visualisation de données• Système de data-binding: les graphismes se mettent à jour tout seul quand les données

changent.• Un peu complexe qu’une simple librairie de dessin mais résultat spectaculaire• Génération des graphismes en SVG permet un export vectoriel

www.d3js.org

Animer les objets

Les frameworks flashlike sont essentiellement fait pour l’animation. Les moteurs d’animation Javascript permettent d’animer les propriétés de manière fluide à base d’équations mathématiques. Une ligne de code permet de modifier une ou plusieurs propriétés.

•JQuery: très rependu, déjà inclus dans la plupart des applications web, performances faibles

•GreenSock Animation Platform (GSAP): la rolls royce des moteurs d’animation.Version JS d’un moteur qui existe depuis 2004 sur flash. Robuste, simple, complet (séquençage d’animation, harmonisation de propriétés cross-browser), le plus performant, bien documenté, maintenu à temps plein par son créateur. Plusieurs personnes au support technique. Code source accessible et Licence commerciale gratuite pour la plupart des projets. Support professionnel possible.TweenMax.to("#myObject", 0.5, { opacity: 0 }), // fondu vers transparence totale qui dure 0,5s

•TweenJS: fait partie de la suite createJS (avec EaselJs, performances correctes).

•Les autres : DOJO, Zepto, MooTools, YUI3. Peu efficaces.

Aller plus loin

• Liste des frameworks flashlike, librairies de dessin canvas et SVG:https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0

• Plus d’information sur les matrices de transformationhttp://www.senocular.com/flash/tutorials/transformmatrix/

• SVG vs canvas:http://paxcel.net/blog/canvas-vs-svg-comparison-of-the-two-graphic-features-of-html5/

Les frameworks flashlike javascript

Internet

Transcript of Les frameworks flashlike javascript