TP : Une animation avec KineticJS

Ressources nécessaires :


Objectif :

On va réaliser avec le framework kineticJS une animation dans une page de notre site web.

Partie 1 : Préparation de KineticJS

  1. Télécharche le fichier (kinetic-v4.5.4.min.js) contenant le framework kineticJS : TÉLÉCHARGER
  2. Copie le fichier dans le dossier JS de ton site web.
  3. Ouvre ton éditeur de code Notepad++ et crée le fichier tpkinetic.js dans le dossier JS.
  4. Ouvre dans ton éditeur de code Notepad++, la page .html qui correspond à Frameworks JS →KINETICJS.
  5. Rajoute dans la balise <head>, les deux lignes suivantes : 
    <script src="JS/kinetic-v4.5.4.min.js"></script>
<script src="JS/tpkinetic.js"></script>
  6. Rajoute dans la balise <body>, les deux lignes suivantes : 
    <h1>Mon animation avec kineticJS</h1>
<div id="kinetic" ></div>
  7. Dans le fichier tpkinetic.js, tape le code minimal : 
      var scène = new Kinetic.Stage({
    container: "kinetic",
    width: 600,
    height: 400
  });

  var calque = new Kinetic.Layer();

    // Ici on dessine sur le calque !

  scène.add(calque);

};

Partie 2 : travail personnel

  1. Consulter le tutoriel : Piloter canvas avec kineticJS.
  2. Construire une animation.
    En partant du principe que tout est cercle, ellipse, carré ou rectangle, construire une figure représentant un animal ou un personnage.
    Le fond doit être un dégradé.
    Créer une interaction entre votre personnage et la souris

Partie 3 : Un exemple


Voir le code

Le code

window.onload = function() {
var scène = new Kinetic.Stage({
container: "kinetic",
width: 500,
height: 700
});
var calque = new Kinetic.Layer();
var forme = new Kinetic.Rect({
width: 500,
height: 700,
fillLinearGradientStartPoint:[250,0],
fillLinearGradientEndPoint:[500,700],
fillLinearGradientColorStops: [0, "#00ECCC", .5, "#3A7C73", 1, "#BD8D46"],
});
calque.add(forme);
var text = new Kinetic.Text({
x: 140,
y: 30,
text: "e = ISN",
fontSize: 50,
fontStyle:"bold",
fontFamily: "Garamond",
fill: "white",
visible:false
});
calque.add(text);
var groupe = new Kinetic.Group({
x: 250,
y: 250,
draggable:true
});
(function() {
var cheveu = new Kinetic.Ellipse({
radius: [120,100],
fill: "grey",
stroke:"black"
});
var visage = new Kinetic.Ellipse({
y:35,
radius: [60,70],
fill: "pink",
stroke:"black"
});
var barbe = new Kinetic.Polygon({
points : [{x:-25,y:50},{x:25,y:50},{x:30,y:75},{x:-30,y:75}],
stroke: "black",
fill: "grey"
});
var oeil1a = new Kinetic.Ellipse({
x:-25,
y:18,
radius:[15,10],
fill: "white",
stroke:"black"
});
var oeil1b = new Kinetic.Circle({
x:-25,
y:18,
radius:8,
fill: "#01B0F0",
});
var oeil1c = new Kinetic.Circle({
x:-25,
y:18,
radius:3,
fill: "black",
});
var oeil2a = new Kinetic.Ellipse({
x:25,
y:18,
radius:[15,10],
fill: "white",
stroke:"black"
});
var oeil2b = new Kinetic.Circle({
x:25,
y:18,
radius:8,
fill: "#01B0F0",
});
var oeil2c = new Kinetic.Circle({
x:25,
y:18,
radius:3,
fill: "black",
});
var nez = new Kinetic.Ellipse({
y:35,
radius:[12,20],
stroke: "black",
});
var blouse = new Kinetic.Polygon({
points: [0, 105, -50, 110, -150, 40, -150, 80,-50,150,-50,300,50,300,50,150,120,240,120,200,50,110,0,105,0,300],
stroke: "navy",
strokeWidth: 4,
fill:"white"
});
var maind = new Kinetic.Polygon({
points : [{x:-150,y:45},{x:-180,y:10},{x:-180,y:50},{x:-150,y:75}],
stroke: "black",
fill: "pink"
});
var maing = new Kinetic.Polygon({
points : [{x:120,y:235},{x:145,y:275},{x:145,y:235},{x:120,y:205}],
stroke: "black",
fill: "pink"
});
var jambed = new Kinetic.Polygon({
points : [{x:-40,y:300},{x:-40,y:350},{x:-60,y:370},{x:-15,y:360},{x:-15,y:300}],
stroke: "black",
fill: "grey"
});
var jambeg = new Kinetic.Polygon({
points : [{x:40,y:300},{x:40,y:350},{x:60,y:370},{x:15,y:360},{x:15,y:300}],
stroke: "black",
fill: "grey"
});
groupe.add(cheveu);
groupe.add(visage);
groupe.add(oeil1a);
groupe.add(oeil1b);
groupe.add(oeil1c);
groupe.add(oeil2a);
groupe.add(oeil2b);
groupe.add(oeil2c);
groupe.add(nez);
groupe.add(barbe);
groupe.add(blouse);
groupe.add(maind);
groupe.add(maing);
groupe.add(jambed);
groupe.add(jambeg);
})();
calque.add(groupe);
groupe.on("mouseover", function() {
text.setVisible(true);
calque.draw();
}); groupe.on("mouseout", function() {
text.setVisible(false);
calque.draw();
});
scène.add(calque);
};

Masquer