[Résolu] stopper une animation en HTML5/JS

Marsh Posté le 11-11-2017 à 12:46:35

Bonjour à tous

Histoire de me lancer en HTML5/JS POO je me suis amusé à faire ca : http://www.yethi-info.fr/test/test4.php

c'est en PHP car c'est le PHP qui construit les lignes 47 à 77 (positionnement/couleur aléatoire des briques)

Bref ca tourne et j'ai l'effet voulu... je me demande maintenant qu'elle est la meilleure methode pour stopper l'animation ??? (l'affichage en dessous l'image indique la distance restant à parcourir..cette distance tend vers zero dans jamais l'atteindre)

Le fait de stopper me permettrait de lancer une autre anim..genre ecrire sur le mur construit avec les briques...

J'ai pensé à
1/un test dans la methode anim de l'objet....
2/la destruction le l'objet

j'ai fait qlq test mais je n'arrive pas à m'en sortir...si quelqu'un peu m'aider....

Merci

thierry

Message édité par yethi le 12-11-2017 à 09:35:26

Marsh Posté le 11-11-2017 à 12:46:35

Marsh Posté le 11-11-2017 à 14:08:14

Salut

je me suis permis de refaire ton code :
http://sickofitall.hd.free.fr/home/briques/

source : http://sickofitall.hd.free.fr/home/briques/bricks.js

~~Qq bugs ici en fonction des valeurs aléatoires (fait F5 pour rafraichir).~~ J'ai repris tes coordonnées pour les points d'arrivées.
J'ai mis des commentaires expliquant la méthode (c'est UNE DES méthodes, pas forcément la meilleure )

A++

Message édité par SICKofitALL le 11-11-2017 à 15:58:40

---------------
We deserve everything that's coming...

Marsh Posté le 12-11-2017 à 09:33:11

salut SICKofitALL

j'ai vu ton premier code : déja c’était ce que je voulais...
Puis le second et là effectivement tu obtient exactement l'effet voulu !!

Je vais décortiquer ca tranquillement...

Au premier coup d’œil ton code semble moins "primitif" que le mien...
Utilisation de class...faut que je m'y mette !!

Pour moi la programmation est un pur jeu donc pas d'impératif !!

merci

Ps faut que je découvre le groupe SICK OF IT ALL perso en punk américain je me suis arrêté aux Dead Kennedys...

Message édité par yethi le 12-11-2017 à 09:45:17

Marsh Posté le 12-11-2017 à 12:26:17

Salut

pas de soucis ^^

Au passage, j'ai un peu creusé le sujet suite à ce post, car le coup de la "limite" qui est utilisée ici pour determiner si l'anim est terminée fonctionne bien avec ce cas particulier, mais pas forcement si les objects dans l'alim suivante sont proches (en termes de pixels), car du coup il faut changer la valeur de cette limite...
En fait il faut utiliser un timer un peu plus "absolu". Bref, peut mieux faire

---------------
We deserve everything that's coming...

Marsh Posté le 12-11-2017 à 16:07:48

Bon j'ai refais tout ca, l'URL reste inchangée :
http://sickofitall.hd.free.fr/home/briques/

Du coup je passe plus par une feinte avec un delta et une limite, mais je me base sur une durée.
Ca devient plus propre et relativement paramètrable je trouve

Bonne chance !

Code :

/**
* Created on 11/11/2017.
*/
'use strict';
const
W = 500,
H = 300;
/**
*
*/
const Afficheur = {
init: function ()
{
this.el = document.getElementById ('Boite100');
},
affiche: function (value)
{
this.el.innerHTML = value;
}
};
/**
*
* @return {string}
*/
function getRandomColor ()
{
return "#" + ((1 << 24) * Math.random () | 0).toString (16);
}
/**
*
*/
class Brick
{
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {string} color
*/
constructor (ctx, color)
{
this.ctx = ctx;
this.x = Math.random () * W;
this.y = Math.random () * H;
this.color = color;
}
/**
*
* @param {number} xArr
* @param {number} vitesse
* @return {number}
*/
calcNx (xArr, vitesse)
{
return (xArr - this.x) / vitesse;
}
/**
*
* @param {number} yArr
* @param {number} vitesse
* @return {number}
*/
calcNy (yArr, vitesse)
{
return (yArr - this.y) / vitesse;
}
/**
*
* @param {number} xArr
* @param {number} yArr
* @param {number} vitesse
*/
update (xArr, yArr, vitesse)
{
this.x += this.calcNx (xArr, vitesse);
this.y += this.calcNy (yArr, vitesse);
}
/**
*
* @param {number} xArr
* @param {number} yArr
*/
updateFinal (xArr, yArr)
{
this.x = xArr;
this.y = yArr;
}
draw ()
{
this.ctx.fillStyle = this.color;
this.ctx.fillRect (this.x, this.y, 50, 20);
this.ctx.fill ();
}
}
/**
*
*/
class Animator
{
constructor (canvasEl)
{
this.NB_BRICKS = 29;
this.ctx = canvasEl.getContext ("2d" );
// on récup les animations
this.animSteps = Animator.getAnimSteps ();
this.currentAnimStep = 0;
// pour le fun je rajoute dynamiquement une étape avec des points en cercle
const funSteps = [];
for (let i = 0; i < this.NB_BRICKS; i++)
{
funSteps.push (
{
x: W / 2 + 100 * Math.cos (2 * Math.PI * i / this.NB_BRICKS),
y: H / 2 + 100 * Math.sin (2 * Math.PI * i / this.NB_BRICKS)
}
);
}
this.animSteps.push (
{
duration: 10000, // en millisecondes
vitesse: 100, // plus c'est grand, plus c'est lent
steps: funSteps
});
// on instancie les briques. Les points de départ sont aléatoirement créés DANS le constructeur de chaque brique
this.bricks = [];
for (let i = 0; i < this.NB_BRICKS; i++)
{
this.bricks.push (
new Brick (
this.ctx,
getRandomColor ()
)
);
}
// on prépare le reste et on lance l'animation
Afficheur.init ();
this.renderBinded = this.render.bind (this);
this.startNow = Date.now ();
requestAnimationFrame (this.renderBinded);
}
clear ()
{
this.ctx.fillStyle = "#000000";
this.ctx.fillRect (0, 0, W, H);
}
render ()
{
requestAnimationFrame (this.renderBinded);
this.clear ();
const cache = this.animSteps[ this.currentAnimStep ];
const now = Date.now ();
// on effectue l'animation tant qu'on reste sous la durée précisée
if (now - this.startNow < cache.duration)
{
this.bricks.forEach (
(brick, i) =>
{
brick.update (
cache.steps[ i ].x,
cache.steps[ i ].y,
cache.vitesse
);
brick.draw ();
});
}
// sinon on place les elements à leurs emplacements définitifs et on passe à l'anim suivante
else
{
this.bricks.forEach (
(brick, i) =>
{
brick.updateFinal (
cache.steps[ i ].x,
cache.steps[ i ].y
);
brick.draw ();
});
this.currentAnimStep++;
this.currentAnimStep %= this.animSteps.length;
this.startNow = Date.now ();
}
Afficheur.affiche (now - this.startNow);
}
/**
*
* @return {array}
*/
static getAnimSteps ()
{
return [
{
duration: 5000,
vitesse: 40,
steps: [
{ x: -27, y: 278 },
{ x: 25, y: 278 },
{ x: 77, y: 278 },
{ x: 129, y: 278 },
{ x: 181, y: 278 },
{ x: 233, y: 278 },
{ x: 0, y: 256 },
{ x: 52, y: 256 },
{ x: 104, y: 256 },
{ x: 156, y: 256 },
{ x: 208, y: 256 },
{ x: 260, y: 256 },
{ x: -27, y: 234 },
{ x: 25, y: 234 },
{ x: 77, y: 234 },
{ x: 129, y: 234 },
{ x: 181, y: 234 },
{ x: 233, y: 234 },
{ x: 0, y: 212 },
{ x: 52, y: 212 },
{ x: 104, y: 212 },
{ x: 156, y: 212 },
{ x: 208, y: 212 },
{ x: 260, y: 212 },
{ x: -27, y: 190 },
{ x: 25, y: 190 },
{ x: 77, y: 190 },
{ x: 129, y: 190 },
{ x: 181, y: 190 },
{ x: 233, y: 190 }
]
},
{
duration: 3000,
vitesse: 10,
steps: [
{ x: 100, y: 0 },
{ x: 150, y: 0 },
{ x: 200, y: 0 },
{ x: 250, y: 0 },
{ x: 300, y: 0 },
{ x: 250, y: 0 },
{ x: 100, y: 20 },
{ x: 150, y: 20 },
{ x: 200, y: 20 },
{ x: 250, y: 20 },
{ x: 300, y: 20 },
{ x: 350, y: 20 },
{ x: 100, y: 40 },
{ x: 150, y: 40 },
{ x: 200, y: 40 },
{ x: 250, y: 40 },
{ x: 300, y: 40 },
{ x: 350, y: 40 },
{ x: 100, y: 60 },
{ x: 150, y: 60 },
{ x: 200, y: 60 },
{ x: 250, y: 60 },
{ x: 300, y: 60 },
{ x: 350, y: 60 },
{ x: 100, y: 80 },
{ x: 150, y: 80 },
{ x: 200, y: 80 },
{ x: 250, y: 80 },
{ x: 300, y: 80 },
{ x: 350, y: 80 }
]
},
{
duration: 6000,
vitesse: 70,
steps: [
{ x: 200, y: 30 },
{ x: 200, y: 30 },
{ x: 200, y: 30 },
{ x: 200, y: 30 },
{ x: 200, y: 30 },
{ x: 200, y: 30 },
{ x: 200, y: 220 },
{ x: 200, y: 220 },
{ x: 200, y: 220 },
{ x: 200, y: 220 },
{ x: 200, y: 220 },
{ x: 200, y: 220 },
{ x: 200, y: 240 },
{ x: 200, y: 240 },
{ x: 200, y: 240 },
{ x: 200, y: 240 },
{ x: 200, y: 240 },
{ x: 200, y: 240 },
{ x: 200, y: 260 },
{ x: 200, y: 260 },
{ x: 200, y: 260 },
{ x: 200, y: 260 },
{ x: 200, y: 260 },
{ x: 200, y: 260 },
{ x: 200, y: 280 },
{ x: 200, y: 280 },
{ x: 200, y: 280 },
{ x: 200, y: 280 },
{ x: 200, y: 280 },
{ x: 200, y: 280 }
]
}
];
}
}
// ###
new Animator (document.getElementById ('canvasBrick'));

Message édité par SICKofitALL le 12-11-2017 à 16:21:32

---------------
We deserve everything that's coming...

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *