HTML5 et animation - Tutoriel pour débutants

HTML5 et animation - Tutoriel pour débutants


HTML5 offre de nouvelles possibilités d'animation de l'application.

Sans plug-in animé - HTML5 au lieu de Flash

  • L'avantage d'animations en HTML5 est qu'ils ne nécessitent pas de plug-ins ou extensions navigateur supplémentaires. La seule condition pour profiter d'un animé dans un tel site, est un navigateur actuel qui peut interpréter HTML5. À l'exception d'Internet Explorer 8 à la fois nouvelle et Chrome- Firefox ou Safari sont capables d'afficher ces animations.
  • Dans les instructions suivantes, une animation linéaire simple explique les tags les utilisations "de toile" et travaille avec Javascript. Animations en utilisant la balise canvas en 3 étapes. Tout d'abord, un objet à animer ("toile" toile traduit) est via javascript généré et sur la zone "toile" placé. Elle est suivie par une suppression immédiate de l'objet et de la re-dessin d'un objet vers un nouvel emplacement.

Mouvement dans le navigateur - un tutoriel d'animation simple

  1. Ouvrez votre éditeur de logiciels Web, tels que "Dreamweaver" dans la vue Script. Une version d'essai de l'éditeur WYSIWYG d'Adobe est disponible via téléchargement.
  2. Tout d'abord, créer un cadre de base d'un fichier HTML classique avec la balise HTML complet, le chef et la région de corps et un élément de script pour le Javascript est nécessaire et un élément de style qui vous permet d'intégrer les informations de feuille de style.
  3. Dans Body noter la balise "canvas" avec les attributs "id" et la hauteur et la largeur. Il devrait ressembler à ceci, par exemple, «<canvas id =" "width =" toile 360 ​​"width =" 240 "> </ canvas>".



    03h12

    En HTML intégrer un lecteur vidéo - comment cela fonctionne:

    Si vous voulez être en mesure de lire une vidéo sur votre site, vous pouvez depuis HTML5 ...

  4. Afin de rendre la Toile de manière significative dans le navigateur identifier, affecter à une ligne circonférentielle. Valable pour tous les éléments canvas l'écrire dans les informations de la feuille de style comme suit: «toile {border: 1px solid # 000; <style>". Cette ligne serait épaisseur de 1 pixel, continue et ont une couleur noire.
  5. Création ou le dessin de l'élément canvas doit être maintenant enclenché. Ceci peut être réalisé soit par un bouton auquel vous attribuez un événement "onclick", vous pouvez également connecter d'autres événements courants, tels que le chargement de la page Web. Dans le cas d'un bouton, ce serait chercher conclure comme ceci: "<button onclick =" dessiner (0,0) "> start </ button>".
  6. Donc, tout est fait dans le navigateur, vous avez le "script" tag notant la fonction "dessiner" qui dessine un carré (ici un carré bleu du côté 30 px) "fonction draw (x, y) {var canvas = le document .getElementById (`canvas`); var ctx = canvas.getContext (` 2d`); ctx.clearRect (0,0,360,240); ctx.fillStyle = "RGBA (0,0,200,1)"; ctx.fillRect (x, 10,30,30); x + = 3; var loopTimer = setTimeout (`tirer (` + x + y + + `)`, 140);} ".
  7. Dans les deux dernières lignes de code, les millisecondes (140) vos minutages d'animation sont définis et le pas de pixel ("+ x = 3") par lequel la place est dans chaque cas déplacé. En faisant varier ces deux paramètres, vous pouvez affiner votre animation.
MOTS-CLÉS: