{"id":48,"date":"2014-10-21T08:06:52","date_gmt":"2014-10-21T08:06:52","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=48"},"modified":"2015-02-06T09:39:17","modified_gmt":"2015-02-06T08:39:17","slug":"famo-us-sauveur-du-html5","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/famo-us-sauveur-du-html5\/","title":{"rendered":"Famo.us : Sauveur du HTML5 !"},"content":{"rendered":"

\"Sans<\/a><\/p>\n

Le HTML5 \u00e9tait suppos\u00e9 remplacer “Flash”, mais en r\u00e9alit\u00e9, les performances n’\u00e9taient pas l\u00e0 et les d\u00e9veloppeurs l’ont vite compris.<\/p>\n

C’est sur ce constat qu’a \u00e9t\u00e9 fond\u00e9e\u00a0l’entreprise “Famo.us”.
\nFamo.us a cr\u00e9\u00e9 son propre\u00a0Framework afin de rendre des \u00e9l\u00e9ments HTML5 avec des effets 2D ou 3D rapidement.
\nEt pour y arriver, la meilleur solution est de se baser sur un langage largement utilis\u00e9, rapide et fonctionnant sur l’ensemble des navigateurs : vous avez devin\u00e9, c’est bien le Javascript.<\/p>\n

Et en plus, il n’y a pas besoin de t\u00e9l\u00e9charger de\u00a0plugin pour que \u00e7a marche ! (compar\u00e9 \u00e0 Flash)<\/p>\n

<\/p>\n

Comment Famo.us fonctionne ?<\/h3>\n

Les animations g\u00e9n\u00e9r\u00e9es par Famo.us sont cr\u00e9es par la succession de pages (frames) contenant des \u00e9l\u00e9ments modifi\u00e9s.
\nWHAT ?
\nEn gros, pour cr\u00e9er l’illusion d’une animation fluide a partir d’objets HTML simples et sans mouvements, il suffit d’afficher plusieurs pages les unes \u00e0 la suites des autres en modifiant les \u00e9l\u00e9ments contenus dans la page morceaux par morceaux.<\/p>\n

Vous connaissez surement ce principe d’affichage de plusieurs pages les unes \u00e0 la suite des autres pour cr\u00e9er le mouvement\u00a0:<\/p>\n

\"\"
\n<\/a>The Horse in Motion by Eadweard Muybridge<\/em>
\n<\/a><\/h6>\n

Et Famo.us permet d’afficher jusqu’a 60 images par secondes (60 fps), autant dire que \u00e7a suffit largement pour cr\u00e9er une belle animation fluide et efficace.<\/p>\n

Concr\u00e8tement, Famo.us remplace les op\u00e9rations du DOM et les animations 2D et 3D par sa propre alternative.
\nPour ceux qui veulent plus de d\u00e9tail, je vous donne le sch\u00e9ma d\u2019ex\u00e9cution de Famo.us ci-dessous.
\nEn gros, le moteur Famo.us (un objet singleton) est appel\u00e9 pour chaque page (ou frame) par la fonction callback de\u00a0“requestAnimationFrame()” du navigateur, et ce 60 fois par secondes.<\/p>\n

\"figure1\"<\/a><\/p>\n

L’API Famo.us<\/h3>\n

L’API famo.us pr\u00e9sente sa propre collection d’objets, tel que les objets “surface”, “view” ou “widget”.
\nVotre code Famo.us cr\u00e9e alors les sc\u00e8nes \u00e0 rendre depuis vos objets, attache les \u00e9v\u00e9nements \u00e0 vos objets (clic, d\u00e9placement, etc…) et g\u00e9n\u00e8re les animations vers le DOM du navigateur, vers un Canvas ou bien encore vers WebGL en fonction de se qui se pr\u00e9sente (dans la version BETA, Famo.us n’utilisait que le DOM).<\/p>\n

Les surfaces et renderables<\/h3>\n

Dans Famo.us, on cr\u00e9e et anime des objets “renderables” (d\u00e9sol\u00e9 pour la traduction mais je n’ai pas trouv\u00e9 le mot le plus adapt\u00e9).
\nL’objet “renderable” le plus bas niveau de la librairie est la “surface”. Une surface est affich\u00e9e dans le navigateur par un \u00e9l\u00e9ment <DIV>.
\nMais il existe d’autres \u00e9l\u00e9ments “surfaces” un peu plus \u00e9volu\u00e9s et repr\u00e9sent\u00e9s par des \u00e9l\u00e9ments HTML5 tel que les suivants :<\/p>\n