Aller au contenu principal

Animations

Vos options​

On peut faire les animations en utilisant:

  • CSS OU
  • Angular animations

CSS​

Comment ça marche​

  • Principalement on change une propriété CSS
  • On décide combien de temps de ça va prendre à faire la transition

Exemple​

  • On change la propriété top de 0px à 20px en 0.2 seconde, voilà une animation qui fait descendre un objet de 20 pixels en 0.2 seconde.

Keyframes​

  • On peut avoir différentes étapes à notre animation
  • Ces étapes sont des Keyframes

Utiliser avec Angular​

  • Il faut commencer par créer l'animation en CSS
@keyframes attack {
  0% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(10%);
  }
  60% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}
  • Ensuite on assigne l'animation à une classe CSS
.attack{
  animation: attack 0.5s;
  -webkit-animation: attack 0.5s;
  //C'est peut-être overkill de mettre toutes les autres, mais 🤷‍♂️
  -moz-animation: attack 0.5s;
  -o-animation: attack 0.5s;
  -ms-animation: attack 0.5s;
}
  • Finalement, on peut assigner classe CSS avec une condition
<app-card [class.attack]="mycard.attack===true"></app-card>

Angular animations​

ng-animate​

Exemple​

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  animations: [
    trigger('montrigger', [transition('* => *', useAnimation(bounce))])
  ],
})
export class MyComponent {
  mavariable: any;
}
  • Dans le .hmtl
<div [@montrigger]="mavariable"></div>

Trigger​

  • C'est ce qui va permettre de déclencher l'animation
animations: [
    trigger('montrigger', 
      [transition('* => *', useAnimation(bounce))]
    )
],

Transition​

  • C'est le changement sur la variable qui va déclencher l'animation '* => *' signifie n'importe quel changement d'état

  • On peut également mettre des ':increment' ou ':decrement'

animations: [
    trigger('bounce', [transition(':increment', useAnimation(bounce))]),
    trigger('shake', [transition(':decrement', useAnimation(shake))])
],
<div [@shake]="mavariable" [@bounce]="mavariable"></div>

useAnimation​

  • Dans les exemples, on utilise une animation prédéfinie, mais on pourrait également créer nos propres animations avec des keyframes

Générateur d'animations CSS​

  • Le site animista contient des centaines d'animations que l'on peut modifier avec des paramètres pour générer nos keyframes.

https://animista.net

alt text

Délais​

Quand on parle d'animation, on parle presque toujours de délais. Surtout lorsque l'on fait des séquences d'animations.

Dans l'exemple suivant, on voit que l'on set bounce à true et on le set à false après 1000 ms (donc 1 seconde).

bounceMe() {
  this.bounce = true;
  setTimeout(() => {this.bounce = false;}, 1000);
}

On imagine qu'une animation est délenché quand la valeur de la variable bounce change (comme dans l'exemple complet un peu plus bas.)

attention

Sans le setTimeout, l'animation joue correctement la première fois, mais comme le système détecte les changements, rien ne se passe la 2e fois que l'on clique car bounce est ENCORE à true.

danger

Sans le setTimeout, on obtient des résultats encore PLUS bizarre. Par exemple, en jouant une autre animation, on risque d'avoir un bounce en plus à la fin car le système va réévaluer les animations après en avoir terminé une. En résumé, il faut utiliser un setTimeout de la même durée que notre animation pour remettre cette valeur à false.

Exemple​

Un exemple qui montre comment utiliser à la fois des animations angular et des animations css générées avec animista

import { Component } from '@angular/core';
import {transition, trigger, useAnimation} from "@angular/animations";
import {bounce, shake} from "ng-animate";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations:[
    trigger('bounce', [transition(':increment', useAnimation(bounce, {
      // Set the duration to 3 seconds and delay to 1 second
      params: { timing: 3, delay: 1 }
    }))]),
    trigger('shake', [transition(':decrement', useAnimation(shake))])
  ]
})
export class AppComponent {

  mavariable = 0;
  shake= false;
  bounce = false;

  constructor() {
  }

  shakeMe() {
    this.shake = true;
    setTimeout(() => {this.shake = false;},1000);
  }

  bounceMe() {
    this.bounce = true;
    setTimeout(() => {this.bounce = false;},1000);
  }
}

Github​

Le code de cet exemple