Spin.js est une bibliothèque légère pour les indicateurs d'activité rotatifs, connue pour sa simplictié d'API et sa haute personnalisabilité. L'intégration du pattern commande dans spin.js peut optimiser la logique de contrôle des animations, en découplent les opérations d'exécution pour une meilleure extensibilité.

Le pattern commande pour une gestion fluide des animations

Le pattern commande encapsule une requête en tant qu'objet, permettant de paramétrer, mettre en file d'attente ou journaliser des opérations, et de supporter des actions réversibles. Appliqué à spin.js, il isole les actions comme démarrer, arrêter ou suspendre une animation de leur implémentation concrète.

Pourquoi adopter ce pattern ?

Avec l'utilisation directe des méthodes de spin.js, telle que :

const indicateur = new Spin.Spinner(options).spin(cible);
indicateur.stop();

La gestion de séquences animées complexes (animations conditionnelles ou en boucle) devient encombrante. Le pattern commande structure chaque opération en un objet distinct, facilitant la composition et la maintenance.

Mise en œuvre du pattern commande dans spin.js

Conception de l'interface de commande

Un objet commande standard inclut des méthodes pour exécuter et annuler :

interface CommandeSpin {
  executer(): void;
  annuler?(): void;
}

Commandes concrètes pour spin.js

Commande de démarrage :

class CommandeDemarrer implements CommandeSpin {
  constructor(private indicateur: Spin.Spinner) {}
  
  executer() {
    this.indicateur.spin();
  }
  
  annuler() {
    this.indicateur.stop();
  }
}

Commande d'arrêt :

class CommandeArreter implements CommandeSpin {
  constructor(private indicateur: Spin.Spinner) {}
  
  executer() {
    this.indicateur.stop();
  }
  
  annuler() {
    this.indicateur.spin();
  }
}

Invoker pour gérer l'exécution

Un invoker gère l'historique des commandse pour permettre l'annulation :

class InvokerCommandeSpin {
  private historique: CommandeSpin[] = [];
  
  executerCommande(commande: CommandeSpin) {
    commande.executer();
    this.historique.push(commande);
  }
  
  annulerDerniereCommande() {
    const commande = this.historique.pop();
    commande?.annuler?.();
  }
}

Application pratique : contrôleur d'animation avec annulation

Voici un exemple complet utilisant le pattern commande pour un contrôleur d'animation avec fonctionnalité d'annulation :

const parametres = {
  lignes: 12,
  longueur: 7,
  largeur: 5,
  rayon: 10,
  couleur: '#000',
  vitesse: 1,
  trainee: 60,
  ombre: false
};

const indicateur = new Spin.Spinner(parametres).spin(document.getElementById('cible'));

const invoker = new InvokerCommandeSpin();

invoker.executerCommande(new CommandeDemarrer(indicateur));

setTimeout(() => {
  invoker.executerCommande(new CommandeArreter(indicateur));
  
  setTimeout(() => {
    invoker.annulerDerniereCommande();
  }, 2000);
}, 5000);

Avantages du pattern commande

• Séparation des responsabilités entre demandeur et exécuteur d'animations
• Extensibilité : ajout de nouvelles opérations sans modifier le code existant
• Support des opérations réversibles via l'historique des commandes
• Création de commandes composées pour des séquences animées complexes

Recommandations d'utilisation

Considérez le pattern commande dans spin.js pour :

• Implémenter des fonctionnalités d'annulation/rétablissement
• Gérer des séquences animées conditionnelles ou enchaînées
• Développer des bibliothèques de composants d'animation réutilisables
• Journaliser les opérations d'animation pour le débogage