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 framew...
HTML et le DOM
Document Object Model
Interface de programmation
permettant l’accès aux éléments
composant une page web.
Pe...
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 positio...
Où est placé mon objet HTML ?
La position d’un objet dépend des règles CSS appliquées.
Où est placé mon objet HTML ?
Appliquées à qui ?
• À l’objet lui-même.
• À ses parents.
• À ses frères. Un objet « pousse ...
Où est placé mon objet HTML ?
La position d’un objet dépend des règles CSS appliquées.
Où est placé mon objet HTML ?
Quelles règles influencent la position ?
• Flux : position, float, display
• Style : margin,...
Où est placé mon objet HTML ?
La position d’un objet dépend des règles CSS appliquées.
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 ...
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 ...
Les frameworks Flashlike
• Développé par les flasheurs pour retrouver la simplicité et les performances de flash en HTML5....
Quelques exemples:
www.flashvhtml.com
Animation fluide à 60fps
WebGL (pixi JS)
Moteur animation Greensock
CAAT lien
Texte ...
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’ob...
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’ob...
Les matrices de transformation
• Une matrice 3x3 pour chaque objet.
a = échelle horizontale a = biais vertical 0 constant
...
Autres fonctionnalités :
• Ces frameworks intègrent la gestion des évènements souris et clavier.
• … et parfois des spécif...
Avantages et inconvénients des
frameworks flashlike.
Avantages
• Simplicité : code orienté objet clair et bien
organisé.
•...
Les principaux frameworks
• KineticJS : Canvas ou WebGL
• EASELJS : Très complet : moteur d’animation, gestion des
chargem...
Les autres types de frameworks
• Créés pour simplifier l’utilisation des fonctions HTML5 des navigateurs. Canvas (dessin b...
D3.js
• Framework dédié à la visualisation de données
• Système de data-binding: les graphismes se mettent à jour tout seu...
Animer les objets
Les frameworks flashlike sont essentiellement fait pour l’animation. Les moteurs d’animation Javascript
...
Aller plus loin
• Liste des frameworks flashlike, librairies de dessin canvas et SVG:
https://docs.google.com/spreadsheet/...
Prochain SlideShare
Chargement dans…5
×

Les frameworks flashlike javascript

423 vues

Publié le

Présentation des frameworks graphiques Javascript.
La pluspart permettent de manipuler les objets à la manière de Flash (coordonnées x, y), on les appellera donc Flashlike.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
423
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les frameworks flashlike javascript

  1. 1. Les frameworks flashlike en JS
  2. 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. 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. 4. HTML et le DOM Une page web simple
  5. 5. HTML et le DOM Une page web simple Ne l’est pas tant que ça Représentation 3D des éléments HTML.
  6. 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. 7. Où est placé mon objet HTML ? La position d’un objet dépend des règles CSS appliquées.
  8. 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. 9. Où est placé mon objet HTML ? La position d’un objet dépend des règles CSS appliquées.
  10. 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. 11. Où est placé mon objet HTML ? La position d’un objet dépend des règles CSS appliquées.
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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/

×