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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] stopper une animation en HTML5/JS

yethi

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

Publicité

SICKofitALL

misanthrope

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...

yethi

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

SICKofitALL

misanthrope

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...

SICKofitALL

misanthrope

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...

FORUM HardWare.fr

Programmation

Javascript/Node.js

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

Sujets relatifs
[HTML/CSS][PHP][JS][SQL] Quelques bon livres ?	[JS] Changement de Disable ne fonctionne pas
problème avec dialobox sur condition (JS)	[HTML/PHP/JS] Afficher x pages en alternances sur timer
Mettre un id avec des handlebars avec Handlebars.JS	[JS] Créer une nouvelle méthode pour n'importe quel objet
[html5 / css / php] débutant demande aide edit (php)	Fonction JS pour récupérer le tag image "Alt" sur un diaporama
[JS/Xml] Parser des éléments en fonction de la balise contenante?	[noob JS] Equivalent JS des include/require?
Plus de sujets relatifs à : [Résolu] stopper une animation en HTML5/JS

Page générée en 0.101 secondes