Session Animation et transitions données par John Thiriet – Journée d’ouverture Communautés des développeurs Windows 8

La sortie de Windows 8 approche…

La semaine dernière a eu lieu la journée d’ouverture de la communauté des développeurs Windows 8 chez Microsoft France à Issy les Moulineaux.

Pour ceux qui y étaient, vous avez pu assister à la présentation de John Thiriet sur les animations et transitions en C# avec Windows 8, pour les autres bon visionnage 😉 !

Windows Phone 8 – A quoi s’attendre ?

Le vendredi 22 juin 2012 chez Microsoft France a eu lieu le Squat de la communauté des développeurs Windows Phone. La date de cet évènement n’était pas choisie au hasard. En effet, deux jours auparavant Microsoft faisait des révélations sur le successeur de l’actuel Windows Phone 7, nommé comme on pouvait s’y attendre Windows Phone 8.

Parmi les nouveautés on retrouve le support des processeurs multicoeurs, d’un plus grand nombre de résolutions d’écrans, des puces NFC, de DirectX et du code natif ainsi que les mise à jour Over-the-Air alias OTA (elles étaient déjà présentes avec WP7 mais n’avaient cependant jamais été utilisées).

On apprend aussi que toutes les applications WP7 fonctionneront sous WP8, y compris les applications XNA et celles utilisant des petits hacks (les équipes ayant décidée de reproduire les bugs qui permettaient ces hacks) le tout sans recompilation.

On aura donc dorénavant trois tailles d’écrans possibles :

  • WVGA 15:9 (800×480)
  • WCGA 15:9 (1280×768)
  • 720p 16:9 (1280×720)

On constate que les deux premières résolutions offrent le même ratio hauteur/largeur mais pas la dernière. Les détails concernant comment WP8 allait gérer cette différence n’ont pas été dévoilés, mais Microsoft semble assurer qu’aucun travail particulier ne sera nécessaire au développeur pour en profiter.

Suite à l’introduction de nouvelles tailles d’écrans on a aussi l’introduction de nouvelles tailles de tuiles :

  • Normal (212×212)
  • Small (100×100)
  • Big (436×212)

Là encore Microsoft assure qu’aucun travail particulier ne sera nécessaire au développeur bien que la taille des anciennes tuiles était de 173×173.  Les tailles Small et Normal seront calculées à partir de l’ancienne, cependant la taille Big devra être ajoutée.

Avec ces nouvelles tailles d’écrans et nouvelles tuiles Microsoft en a profité pour introduire un nouvel écran de démarrage (Start Screen) pour Windows Phone 8;

Wp8 Start Screen - Réalisé par Rudy Huyn pour la plénière

Wp8 Start Screen – Réalisé par Rudy Huyn pour la plénière

Microsoft a par ailleurs annoncé le support des cartes MicroSD pour le stockage des photos, musiques et applications mais tout ceci de manière non cryptée.

Autre information très importante, la VOIP offrira la même expérience que la téléphonie classique, ceci grâce à la mise en place d’une API spéciale. Il est intéressant de noter que Skype en profitera mais ne sera pas mieux loti que les autres applications de VOIP.

Une nouvelle qui ravira pas mal de monde est que Bing Map sera dorénavant remplacée par la carte issue de la société de cartographie de Nokia (Navtek) dont la réputation n’est plus à faire. Un mode offline sera aussi présent ! Maintenant on pourra retrouver son chemin même sans réseau 3G et ça c’est un grand pas en avant !

Concernant l’ajout du support des puce NFC on sais qu’une des principales différences avec Android est que la sécurité sera dans la carte SIM et non dans le téléphone.

On a aussi appris que les téléphones tournant sous WP7 actuellement ne pourront pas bénéficier d’une mise à jour vers WP8 pour des raisons matérielles. En effet le kernel WP8 est fait pour fonctionner en multi-coeur alors que le kernel WP7 est très optimisé pour du mono-coeur. Cependant les téléphones actuels recevront une mise à jour nommée WP7.8 qui bénéficiera de la plupart des améliorations de WP8 et particulièrement du nouvel écran d’accueil.

Maintenant que les nouveautés générales ont été présentées je vais parler d’améliorations et de nouveautés qui intéresseront surtout les développeurs.

Avec WP8 on aura l’ajout d’une fonctionnalité très attendue : le In-App purchase. Ce dernier existera en deux catégories :

  • Durable (Le contenu acheté dure dans le temps et persiste)
  • Consommable (Achat unique)

Celà permettra à pas mal de scenarii de voir le jour spécialement dans le domaine des jeux vidéos (niveaux supplémentaires, difficultés supplémentaires, vêtements pour vos héros etc..)

Pas mal de développeurs se demandaient aussi ce qu’il en serait des applications Qt, et on a appris que Qt ne serait pas supporté sur la plateforme.

Concernant la portabilité du code entre Windows 8 et Windows Phone 8 des précisions ont été apportées :

  • Non il ne sera pas possible de faire une seule application W8 et WP8
  • Non il n’y aura pas d’achat commun d’applications entre les deux plateformes
  • Non il ne sera pas possible de faire du HTML/JS natif sous WP8
  • Par contre oui il est possible de partager une grande quantité de code entre les deux plateformes, spécialement en C#.

Je terminerai sur le fait que le SDK de WP8 est prévu pour sortir cet été sans plus de précisions.

A vos téléphones maintenant !

Animer vos pages web avec CSS3

Il n’est un secret pour personne que la nouvelle norme HTML5, et la norme CSS3 qui l’accompagne, ont pour objectif de rendre à terme obsolète l’utilisation de plugins tiers comme Flash ou Silverlight. A ce titre, une nouvelle API permettant d’animer les éléments d’une page web est actuellement en cours de normalisation par le W3C, l’organisme en charge de mettre au point les nouveaux standards de demain.

Cette nouvelle API, bien qu’actuellement à l’état de brouillon et disséminée dans plusieurs modules de la norme CSS3, a déjà été largement implémentée dans les dernières versions des navigateurs que nous connaissons tous (à l’exception d’Internet Explorer 10 qui se fait attendre) et est donc d’ores et déjà exploitable.

Nous allons étudier chacune des nouveautés qui nous permet d’animer nos sites. Notez néanmoins que bien que les différents acteurs du monde du web se soient déjà mis d’accord sur une syntaxe commune, l’utilisation de préfixes CSS est encore pour le moment d’usage. Le but de ceux-ci est de permettre aux développeurs d’être en mesure de différencier les différents navigateurs, afin de pouvoir effectuer le cas échéant de menus réglages.

Par soucis de brièveté, dans les exemples qui suivront ces différents préfixes seront omis pour ne conserver que la syntaxe qui devrait devenir définitive à terme.

Les transformations

Tout d’abord, de nouvelles propriétés CSS3 vont nous permettre de transformer nos éléments HTML de manière inédite. Pour cela, on utilise la propriété CSS transform associée à une fonction de transformation. Ces fonctions de transformation vont nous permettre par exemple de modifier les dimensions de l’élément (translate / translate3d), de le faire pivoter sur lui-même (rotate / rotate3d) sur un ou plusieurs de ses axes, de l’étirer (skew) ou d’appliquer une transformation matricielle (matrix / matrix3d). Comme vous le voyez, la plupart de ces transformation existent en version 2D ou 3D. Par ailleurs, il est généralement possible de les appliquer sur un seul axe à la fois, avec par exemple rotateX, rotateY et rotateZ.

.mon-element {
    /* L'élément pivotera de 30 degrés dans le sens horaire */
    transform: rotate(30deg);
}

Notez – et c’est important – que toutes ces transformations se font à la fois sur l’élément et son contenu, que le flux d’affichage de la page n’est pas modifié et que cette opération se fait à un niveau graphique. Par exemple lors d’un étirement, le texte inclus dans l’élément sera lui aussi transformé.

La propriété CSS transform s’accompagne de plusieurs autres propriétés permettant de préciser certains éléments d’affichage. Par exemple, la propriété transform-origin permet d’indiquer à partir de quel point de l’élément la transformation doit s’appliquer. Si l’on reprend notre précédent exemple de la rotation, on peut ainsi préciser que celle-ci doit s’appliquer non pas sur le centre de l’élément – comme c’est le cas par défaut – mais par exemple à dix pixels de haut et dix pixels de large de son coin supérieur gauche.

.mon-element {
    transform: rotate(30deg);
    /* La transformation s'appliquera avec un point d'origine différent */
    transform-origin: 10px 10px;
}

Lorsque la transformation s’applique en trois dimensions, il est possible avec la propriété backface-visibility de préciser si l’on souhaite ou non que le dos de l’élément soit visible. La propriété perspective permet quand à elle de modifier la perspective selon laquelle un objet est perçu dans l’espace.

La transformation en elle-même se fait sans effet d’animation. Il est néanmoins possible de rendre cette transformation dynamique en utilisant les pseudo-éléments CSS comme :hover ou :focus.

a.mon-lien:hover {
    /* Multiplie par deux la largeur et la hauteur de l'élément
       lorsque le curseur de la souris le survole */
    transform: scale(2,2);
}

Les transitions

Il est courant dans une page web de vouloir modifier dynamiquement l’apparence d’un élément, que ce soit ses dimensions, la taille du texte qu’il contient, ou ses couleurs. Toutefois, ces opérations se faisaient jusqu’à maintenant en Javascript, et elles étaient généralement assez abruptes (sauf à utiliser des moteurs d’animation comme celui de jQuery). Le changement de couleur de fond d’un élément se faisait par exemple instantanément.

Grâce à la nouvelle propriété CSS3 transition, il est maintenant possible de préciser que l’on souhaite que certaines caractéristiques d’un élément changent progressivement lorsque celles-ci sont altérées. Concrètement, lorsque par exemple on modifie la largeur d’un élément de 100 pixels à 200 pixels, il est possible d’indiquer au moteur de rendu du navigateur que la transition entre ces deux états doit se faire en passant par tous les états intermédiaires (les valeurs entre 100 et 200), et non pas instantanément. L’utilisation de Javascript devient alors caduque, car tout se fait en CSS.

La déclaration de ces effets de transition s’effectue en indiquant à quelle propriété elle s’applique, et combien de temps doit durer la transition. Il est possible de cumuler plusieurs propriétés dans la même déclaration, comme on le voit dans l’exemple suivant :

.mon-element {
    transition: width 2s, height 2s, transform 2s;
}

Il est possible d’appliquer ces effets sur n’importe quelle propriété CSS. Lorsque la valeur de l’une de celles-ci sera altérée, de quelque manière que ce soit (Javascript, pseudo-element CSS, …), si un effet de transition a été appliqué à l’élément, alors la transition se fera automatiquement selon les paramètres spécifiés.

On peut également préciser directement dans la propriété transition ou par le biais de la propriété transition-timing-function un effet « d’assouplissement » (en anglais : easing), permettant d’altérer la manière dont la transition va s’appliquer dans le temps. Par exemple, on peut indiquer que l’on souhaite que la transition commence très rapidement, puis ralentisse sur la fin. Pour cela il existe déjà plusieurs mots-clefs standardisés (linear, ease, ease-in, ease-out, ease-in-out), mais on peut également utiliser la fonction cubic-bezier pour avoir un contrôle plus fin sur ce timing. Vous pouvez d’ailleurs vous amuser à tester différents effets sur ce site.

.mon-element {
    transition: width 3s cubic-bezier(.99, .01, -.01, .01);
}

Dernière possibilité offerte par la propriété transition-delay : différer le lancement de la transition. Comme la durée de la transition elle-même, la valeur de cette propriété peut être indiquée en secondes (s) ou en millisecondes (ms).

Dans l’exemple suivant nous appliquons un effet de transition en utilisant séparément chacune des propriétés CSS3 distinctes, plutôt qu’en les rassemblant par le biais de la propriété transition :

.mon-element {
    transition-property: font-size;
    transition-duration: 5s;
    transition-timing-function: ease-in-out;
    transition-delay: 1000ms; /* Équivalent à 1 seconde */
}

Cette effet de transition s’appliquera donc sur la propriété font-size (la taille des caractères autrement dit), il durera cinq secondes mais ne commencera qu’une seconde après que la propriété ait été altérée. Par ailleurs l’effet s’effectuera selon le timing ease-in-out (légèrement plus rapide au début et à la fin).

Voici un exemple de code Javascript modifiant la valeur du style CSS font-size d’un élément. Ce code permettrait de provoquer l’exécution de l’effet de transition :

document.getElementsByClassName('mon-element')[0].style.fontSize = '48px';

Les animations

Les animations avec CSS3 sont cousines des transitions, à l’exception qu’elles peuvent être répétées en boucle, et qu’elles offrent un contrôle plus fin sur la manière dont va évoluer l’apparence des éléments du DOM.

A la base d’une animation, il y a la notion de keyframe. Une keyframe n’est pas une propriété CSS mais une règle. Elle permet d’indiquer la suite d’états par lesquels l’élément du DOM va transiter au cours de l’animation.

@keyframes mon-animation {
    0% {
        background-color: red;
    }

    25% {
        background-color: green;
    }

    75% {
        background-color: blue;
    }

    100% {
        background-color: yellow;
    }
}

Dans cet exemple, nous indiquons que l’élément auquel sera appliquée l’animation devra avoir un fond de couleur rouge au début de celle-ci, puis vert au premier quart, puis bleu au troisième quart, puis jaune à la fin. Les mots-clefs from et to peuvent remplacer respectivement 0% et 100%, mais n’importe quelle valeur entre 0 et 100 est aussi acceptée.

Ensuite pour appliquer cette animation à un élément, on utilise la propriété animation proprement dite :

.mon-element {
    animation: mon-animation 5s;
}

Le minimum est d’indiquer la durée souhaitée de l’animation. Mais il est également possible, comme pour les transitions, d’indiquer un effet d’assouplissement, et un délai d’attente avant le lancement de l’animation. Par ailleurs, les animations disposent également des propriétés animation-iteration-count et animation-direction. La première permet d’indiquer combien de fois l’animation doit s’effectuer (on peut utiliser le mot-clef infinite pour que celle-ci tourne en boucle), et la seconde, si l’animation doit s’effectuer toujours dans le même ordre (mot-clef normal), ou si celui-ci doit s’inverser entre deux itérations (mot-clef reverse), ce qui s’avère très pratique lorsque l’on veut par exemple faire tourner un élément dans un sens puis dans l’autre.

.mon-element {
    animation: mon-animation 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Les animations disposent enfin d’une dernière propriété : animation-play-state. Celle-ci permet de contrôler l’exécution de l’animation, avec la possibilité de mettre celle-ci en pause pour la continuer plus tard. Cela permet donc d’imaginer des scénarios où l’utilisateur peut piloter l’exécution de l’animation grâce au Javascript ou aux pseudo-éléments CSS.

.mon-element {
    animation: mon-animation 5s;
    animation-play-state: running;
}

.mon-element:hover {
    animation-play-state: paused;
}

Pour aller plus loin

Si vous souhaitez consulter la documentation complète des transformations, transitions et animations en CSS3, je vous recommande chaudement l’excellent site W3Schools. Vous pourrez y consulter des démonstrations, mais aussi créer les vôtres grâce à un système de bac-à-sable interactif très bien conçu qui vous permettra de vous entraîner à maîtriser toutes ces nouvelles propriétés.

Avec tout cela il devient beaucoup plus simple d’animer nos pages web. Toutefois, la création d’animations complexes reste fastidieuse à réaliser sans outils dédiés. On peut noter l’arrivée prochaine du nouveau logiciel Adobe Edge, qui est d’ores et déjà disponible en version béta, et dont l’objectif est précisément de permettre la création de contenu web animé en utilisant les nouveaux standards HTML5, CSS3 et le langage Javascript.