Les frameworks flashlike javascript
Télécharger en tant que PPT, PDF0 j'aime656 vues
Le document présente les frameworks flashlike en JavaScript, soulignant leur capacité à simplifier le développement d'interfaces riches et de jeux animés en utilisant le HTML5 et le rendu WebGL. Il aborde les principes de positionnement des objets HTML en fonction des règles CSS, ainsi que les avantages et inconvénients de ces frameworks, notamment en matière de performances et de rendu. Enfin, il évoque divers outils et bibliothèques pour l'animation et la visualisation de données dans un contexte Web.
Les frameworks flashlike javascript
- 1. Les frameworks flashlike en JS
- 2. 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.
- 3. 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.
- 4. HTML et le DOM Une page web simple
- 5. HTML et le DOM Une page web simple Ne l’est pas tant que ça Représentation 3D des éléments HTML.
- 6. 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
- 7. Où est placé mon objet HTML ? La position d’un objet dépend des règles CSS appliquées.
- 8. Où est placé mon objet HTML ? 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 ! La position d’un objet dépend des règles CSS appliquées.
- 9. Où est placé mon objet HTML ? La position d’un objet dépend des règles CSS appliquées.
- 10. Où est placé mon objet HTML ? Quelles règles influencent la position ? • Flux : position, float, display • Style : margin, border-width, padding • Position : top, left, right, bottom • … La position d’un objet dépend des règles CSS appliquées.
- 11. Où est placé mon objet HTML ? La position d’un objet dépend des règles CSS appliquées.
- 12. Où est placé mon objet HTML ? 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. La position d’un objet dépend des règles CSS appliquées.
- 13. Où est placé mon objet HTML ? 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. La position d’un objet dépend des règles CSS appliquées. Développeur face à un élément HTML qui ne se place pas à la position voulue.
- 14. 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 displayObjects imbriqués de flash. Hiérarchie des displayObjects d’une scène.
- 15. Quelques exemples: www.flashvhtml.com Animation fluide à 60fps WebGL (pixi JS) Moteur animation Greensock CAAT lien Texte qui suit un chemin modifiable à la volée. www.animatron.com Outil graphique permettant de créer des animations.
- 16. 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.
- 17. 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 !
- 18. 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).
- 19. 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
- 20. 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é
- 21. 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)
- 22. 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
- 23. 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
- 24. 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.
- 25. 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 transformation http://www.senocular.com/flash/tutorials/transformmatrix/ • SVG vs canvas: http://paxcel.net/blog/canvas-vs-svg-comparison-of-the-two-graphic-features-of-html5/