Animer un dégradé SVG

Dans son article précédent, Joni Trythall décrivait les dégradés SVG. Passons maintenant à l'étape suivante, leur animation ! Une bonne introduction aux notions les plus basiques, à partir d'exemples simples.

Par

Les dégradés SVG sont vraiment pratiques. Nous pouvons remplir des formes complexes et créer de la profondeur et du caractère dans nos illustrations, tout en ayant la possibilité d'y accéder dans le DOM.

À l'intérieur des éléments Dégradés SVG linéaires et radiaux de nombreuses options d'attributs sont disponibles pour une personnalisation complète. Animer ces dégradés nous fait franchir un pas supplémentaire dans la personnalisation.

Pour visualiser les animations que nous allons détailler, vous pouvez cliquer ici et pour télécharger le code vous pouvez cliquer ici.

NdT : Pour une introduction générale à SVG, vous pouvez consulter l'excellent article de Chris Coyier Utiliser SVG.

Les bases des dégradés SVG

NdT : cette partie de l'article reprend en résumé ce que l'auteur développe dans son article précédent, traduit dans La Cascade, il n'est donc pas repris ici. Il est conseillé de lire l'article précédent avant celui-ci.

L'animation

L'élément animate nous permet de sélectionner des attributs et des propriétés de dégradés et de leur donner différentes valeurs pendant une durée déterminée. En bref, nous pouvons les animer ! L'élément animate résidera dans l'élément que nous voulons animer. Voici la structure d'une animation basique sur un rectangle :

<svg>
    <rect x="0" y="20" width="100" height="100">
        <animate attributeName="x"
                 from="0" to="400px"
                 dur="5s"
                 repeatCount="indefinite" />
    </rect>
</svg>

L'animation va déplacer le rectangle sur l'axe des x, sur 400px à partir de sa position initiale, le tout en 5 secondes et répété de manière indéfinie.

Attributs

À l'intérieur de l'élément <animate>, nous allons donc utiliser des attributs pour sélectionner notre cible et pour spécifier les détails de l'animation. Voici les attributs que nous allons utiliser dans nos démos :

attributeName

attributeName définit le nom de l'attribut cible qui doit être animé. Dans le code ci-dessus, la valeur d'attributeName est "x", nous pouvons cibler et animer notre forme sur l'axe des x.

to, from

Les attributs to et from indiquent les valeurs initiale et finale de l'attribut ciblé.

values

À l'intérieur de l'attribut <values> nous pouvons créer une liste de valeurs séparées par des points-virgules, et l'animation appliquera ces valeurs dans l'ordre pendant la durée de l'action.

Si vous incluez cet attribut, toute valeur from ou to située dans le même élément <animate> sera ignorée, ce qui signifie qu'il prend leur place et qu'il n'y a pas besoin de les inclure.

dur

La durée définit l'espace de temps total de l'animation.

fill

Habituellement, fill renvoie à la couleur de remplissage du SVG, mais dans le contexte d'un attribut <animate> sa signification est différente . Nous pouvons donner une valeur de "freeze" à cet attribut qui indiquera que l'animation doit s'immobiliser une fois terminée et ne doit pas repartir.

repeatCount

L'attribut repeatCount indique le nombre de fois qu'une animation doit se produire. Cette valeur peut être un nombre, ou "indefinite".

Animer les dégradés

Pour cibler les dégradés de manière spécifique, nous devons avoir une idée des propriétés que nous voulons animer, comme le stop-color, offset, ou les coordonnées.

Quand nous avons examiné le code pour notre rectangle mobile tout à l'heure, l'élément <animate> était situé à l'intérieur de la forme <rect>. Si nous voulons animer les stops des dégradés, nous placerons l'élément <animate> à l'intérieur des stops que nous voulons animer. Pour animer un attribut directement à l'intérieur d'un élément <linearGradient> ou <radialGradient>, comme des coordonnées par exemple, nous positionnons <animate> à l'intérieur de l'élément dégradé, mais en dehors des éléments <stop>.

Voici la structure d'une animation sur un stop-color d'un noeud <stop>.

<stop offset="<value>" stop-color="<color>">
      <animate attributeName="stop-color" from=”<color>” to=”<color> dur="<duration>" repeatCount="indefinite" />
</stop>

Démos

Pour démontrer les possibilités d'animation des dégradés SVG, nous allons regarder les effets sur un site de camping... avec un feu, un arbre et un ciel changeant.

Démo 1 : le feu


image de feu

Visualiser l'animation ici.

Dans le SVG, nous ciblons deux flammes à remplir et animer, et comme nous l'avons vu tous les détails sont listés à l'intérieur de l'élément <defs> dans <svg>.

<defs>
      <radialGradient id="smallGradient" fy="90%">
          <stop offset="0%" stop-color="#f4c708"></stop>
          <stop offset="100%" stop-color="#f7e69a"></stop>
          <animate attributeName="fy" dur="700ms" from="90%" to="0%" repeatCount="indefinite" />
      </radialGradient>

      <radialGradient id="largeGradient" fy="90%">
          <stop offset="0%" stop-color="#ff8806"></stop>
          <stop offset="100%" stop-color="#d9574a"></stop>
          <animate attributeName="fy" dur="700ms" from="90%" to="0%" repeatCount="indefinite"    />
      </radialGradient>
 </defs>

On voit qu'il y a deux dégradés, “smallGradient” et “largeGradient”. La même animation est appliquée à chaque dégradé en ciblant le point de coordonnées fy et en le déplaçant de 90% à 0% en 700ms. L'animation se reproduit indéfiniment.

Ces dégradés sont assignés en donnant leur ID au "fill" de la forme, via une url :

fill="url(#largeGradient)"

Démo 2 : les arbres

4 arbres et un soleil qui se déplace

Visualiser l'animation ici.

Pour cette démo, nous allons ajouter l'animation au stop-color. Il y a deux dégradés pour représenter les différentes couleurs des arbres, l'un avec des ombres vert foncé, l'autre plus clair. Chaque animation est identique pour l'essentiel, la seule différence étant les couleurs.

<defs>
    <linearGradient id="darkGradient" x1="30%" y1="70%">
        <stop offset="0%" stop-color="#0b2d13">
          <animate attributeName="stop-color" values="#0b2d13; #79c98c" dur="3s" fill="freeze" />
        </stop>
        <stop offset="100%" stop-color="#79c98c">
          <animate attributeName="stop-color" values="#79c98c; #0b2d13" dur="3s" fill="freeze" />
        </stop>
    </linearGradient>

    <linearGradient id="lightGradient" x1="30%" y1="70%">
        <stop offset="0%" stop-color="#054f16">
          <animate attributeName="stop-color" values="#054f16; #91bc9c" dur="3s" fill="freeze" />
        </stop>
        <stop offset="100%" stop-color="#91bc9c">
          <animate attributeName="stop-color" values="#91bc9c; #054f16" dur="3s" fill="freeze" />
        </stop>
    </linearGradient>
 </defs>

L'élément <animate> réside à l'intérieur du point stop pour chaque dégradé et cible le stop-color. Les valeurs de couleurs sont animées via l'attribut values sur une période de 3 secondes, puis l'animation est stoppée ("freeze") une fois le cycle terminé.

Démo 3 : le ciel

Beau ciel, vrai ciel, regarde-moi qui change !

de l'aube au crépuscule et à l'aube

Visualiser l'animation ici.

Un coucher de soleil est idéal pour animer l'offset d'un stop. Il y a deux dégradés ici, chacun avec un série de changements de couleurs. Une animation supplémentaire de l'offset du point stop 100% déplace ce point à 0 puis le fait revenir.

<defs>
        <linearGradient id="skyGradient" x1="100%" y1="100%">
          <stop offset="0%" stop-color="lightblue" stop-opacity=".5">
            <animate attributeName="stop-color" values="lightblue;blue;red;red;black;red;red;purple;lightblue" dur="14s" repeatCount="indefinite" />
          </stop>
          <stop offset="100%" stop-color="lightblue" stop-opacity=".5">
            <animate attributeName="stop-color" values="lightblue;orange;purple;purple;black;purple;purple;blue;lightblue" dur="14s" repeatCount="indefinite" />
            <animate attributeName="offset" values=".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95" dur="14s" repeatCount="indefinite" />
          </stop>
        </linearGradient>
</defs>

Pour les animations de stop-color, il y a une liste de valeurs de couleurs que le dégradé va parcourir en 14s. l'animation offset supplémentaire déplace le point stop en le faisant passer par différentes valeurs pendant 14s.

Il est important de mentionner ici que s'il est possible d'utiliser des pourcentages pour animer offset, et ceci sans problème avec Firefox, ce ne sera pas possible avec Chrome et Safari lorsque les pourcentages sont utilisés à l'intérieur de <animate>. La méthode utilisée ici est donc simplement une astuce pour contourner ce problème.


Autre article de Joni Trythall :

Les dégradés SVG


Intéressé par SVG ? Sur la Cascade, retrouvez des articles et ressources.


original paru le dans designmodo.

Sur l'auteur : apprend le design de jour et l'oublie la nuit venue. Elle passe son temps à essayer de conjuguer son amour du code et son obsession de la couleur. Joni habite à Seattle, WA, où le soleil brille toujours. Vous pouvez retrouver ses divagations sur son blog, Google+ ou Twitter.

Traduit avec l'aimable permission de design modo et de l'auteur.
Copyright design modo © 2014.