Comment créer une animation de bouton avec Flare dans Flutter? Partie 2: Animations avec TrimPath

Salut à tous!

Aujourd'hui, nous allons continuer une série d'articles dans lesquels nous allons suivre le processus de création d'une animation dans Flutter en utilisant Flare. L’important est que tout se fasse du point de vue du concepteur non graphique (moi!).

Cette série est divisée en trois parties:

  • Partie 1: Créez votre première animation!
  • Partie 2: Animations avec TrimPath
  • Partie 3: implémenter l'animation dans le projet Flutter

Dans cet article, nous allons ajouter les étapes suivantes de l'animation à notre bouton à l'aide de la fonction TrimPath de Flare:

Nous allons commencer par l’animation que nous avons faite précédemment dans mon premier article. Si vous ne le lisez pas, vous pouvez vérifier cette animation ici. Vous pouvez également le bifurquer et commencer à partir de ce point. Prêt? Commençons!

Étape 1: Ajouter un indicateur de progression

Dans cette étape, nous allons nous concentrer sur l'ajout d'un indicateur de progression du blanc à l'intérieur du bouton de cercle:

Tout d'abord, revenez à l'onglet Conception.

  1. Ajouter une nouvelle ellipse. Choisissez Forme -> Ellipse (ou O sur le clavier)
  2. Changer sa taille à 140x140. Modifiez les propriétés comme avec le rectangle.
  3. Ellipse centrale. Sélectionnez Aligner au centre et Aligner au milieu en haut du menu Propriétés.
  4. Sélectionnez l'icône de casquette aux coins arrondis. C’est pour un bel effet visuel.
  5. Décocher Remplir. Nous voulons quitter uniquement la frontière, nous n’avons donc pas besoin de cela.
  6. Sous Trait, changez l'épaisseur en 5 et changez la couleur en blanc. Cette bordure indiquera un progrès.
  7. Néanmoins, sous Trait, définissez Trim Path sur Synced et End sur 0%. Pourquoi avons nous besoin de ça?

Un petit peu à propos de Trim Path.

Trim Path est une fonctionnalité qui nous permet de ne dessiner que la partie de la forme (la partie de bout en bout avec un décalage approprié).

Il est important de faire attention à bien dessiner le début et la fin du chemin, car le point où nous commençons à dessiner le chemin - ce sera notre position de départ.

Vous pouvez en savoir plus sur Trim Path dans la documentation de Flare.

Dans notre cas, nous n’animerons d’abord que la valeur finale pour donner l’impression que le progrès "progresse". Lorsque Fin atteindra 20%, nous manipulerons avec décalage, ainsi les progrès se déplaceront dans le cercle.

Revenons à l’animation:

Étape 2: Ajouter une animation d'indicateur de progression

Maintenant, passez à l'onglet Animer et sélectionnez Ellipse.

  1. Passez à l’image 00:00:30 et appuyez sur le losange en regard de Valeur finale avec 0%.
  2. Accédez au cadre 00:00:45 et modifiez la valeur finale à 20%. Cela fera «grandir» l’effet du progrès
  3. Toujours en cours sur 00:00:45, appuyez sur le diamant en regard de la valeur de décalage à 0%.
  4. Accédez au cadre 00:03:00 et définissez la valeur de décalage sur 300%. Cela fera un effet de progrès en se déplaçant 3 fois autour du cercle.
  5. Retournez à l'image 00:02:51 et appuyez sur le diamant en regard de Valeur finale.
  6. Retournez au cadre 00:03:00 et remplacez la valeur finale par 0%. Cela fera «rétrécir» l’effet du progrès.

Après ces manipulations, voyons à quoi ressemble notre bouton:

Ça a l'air cool! Nous y sommes presque…

Étape 3: Ajouter le ou les chemins de coche

La partie suivante consiste à créer cette animation de coche délicate:

Ce que nous avons réellement ici est deux objets: un chemin qui «se transforme» du progrès en coche (arc simple) et un coche qui représente une coche. Créons-les:

Revenez à l'onglet Conception.

  1. Sélectionnez l'outil Plume (ou P sur le clavier).
  2. Tapez quelque part en dehors du cercle pour créer un seul point de chemin. (et souvenez-vous de commencer par le haut, donc le début sera de droite à gauche)
  3. Appuyez deux fois de plus pour créer une coche. Si vous faites une erreur, annulez simplement le point précédent avec Cmd + Z / Ctrl + Z
  4. Si vous avez coché, choisissez «Édition terminée» à droite. (si vous souhaitez modifier le chemin plus tard, choisissez «Editer les vertices»)
  5. Après cela, vous verrez les propriétés d’une nouvelle forme. Nous allons changer l’épaisseur du trait (à 5) et le capuchon (pour les coins arrondis).
  6. Alignez la coche au centre, comme pour le rectangle et l’ellipse précédemment.

À ce stade, nous devrions avoir quelque chose comme ceci:

Nous devons maintenant ajouter un autre chemin pour relier la fin de la progression au début de la coche:

Pour ce faire, nous ferons quelque chose de très similaire à ce que nous avons fait en cas de coche:

  1. Sélectionnez l'outil Plume (ou P sur le clavier).
  2. Tapez quelque part en dehors du cercle pour créer un seul point de tracé (et souvenez-vous de commencer par le point le plus haut!).
  3. Tapez une fois de plus et tout en maintenant enfoncé, déplacez le curseur vers la droite / gauche pour créer un arc.
  4. Appuyez deux fois sur deux pour créer un arc, comme indiqué dans l'image ci-dessus.
  5. Si vous faites une erreur, vous pouvez annuler les modifications avec Cmd + Z / Ctrl + Z ou déplacer les points blancs sur le tracé pour modifier leur position.
  6. Si vous avez terminé, choisissez «Édition terminée» à droite.
  7. Changer Stroke comme indiqué au point 5 de la case à cocher.

À ce stade, vous devriez avoir quelque chose comme ceci:

Lorsque cela est fait, sous Trait (pour les coches et les progrès de coche), définissez Trim Path sur Synced et End sur 0%. À partir de là, ce ne sera plus visible, car au début de l’animation, nous ne devrions pas voir ces éléments.

Nous pouvons maintenant commencer la partie animation!

Étape 4: Ajouter une animation Checkmark

Passez maintenant à l'onglet Animer et sélectionnez le chemin de progression coché.

  1. Passez à l'image 00:02:59 (une seconde avant la fin de la dernière animation) et appuyez sur la touche losange en regard de Valeur de fin avec 0%.
  2. Passez à l’image 00:03:10, définissez la valeur finale sur 100%, appuyez sur la touche diamant en regard de Valeur initiale à 0%.
  3. Toujours en cours à 00:03:10, sélectionnez Chemin de coche et appuyez sur diamant en regard de Valeur de fin avec 0%.
  4. Passez à l’image 00:03:25, sélectionnez Chemin de progression coché, définissez la valeur initiale sur 100%
  5. Toujours en position 00:03:25, sélectionnez le chemin de coche et définissez la valeur de fin sur 100%.

Après ces manipulations, les cadres devraient ressembler à ceux:

Et l'effet final…

Étape 5: Animation finale!

Il est temps de passer à la dernière partie! La dernière étape est une animation simple avec une coche d'échelle. Pour rendre cela possible, nous devons définir un point central pour une coche.

Pour ce faire, sélectionnez Créer -> Nœud (ou G sur le clavier), appuyez n'importe où pour créer un nœud, puis déplacez le chemin Checkmark sous le nœud nouvellement créé:

Une fois ce nœud sélectionné, choisissez Geler: images dans le menu de droite. Vous pouvez maintenant déplacer le nœud au centre du point de contrôle:

Ceci fait, nous sommes prêts à créer une animation à l’échelle:

  1. Passez à l'onglet Animer et sélectionnez Nœud.
  2. Passez à l’image 00:03:25 et appuyez sur le losange en regard des valeurs d’échelle (pour X et Y) avec 1.
  3. Passez au cadre 00:03:30 et modifiez les valeurs d'échelle (pour X et Y) en 1.2.
  4. Passez à l’image 00:03:35 et modifiez les valeurs d’échelle (pour X et Y) en 1.

Voilà! Notre animation est prête:

Vous pouvez consulter le fichier complet ici sur le site Web 2dimensions.com.

Sommaire

C'est tout pour aujourd'hui!

Dans cet article, nous avons étendu notre précédente animation Flare avec l’animation TrimPath. Dans le prochain article, nous intégrerons tout dans le code Flutter.

Vous pouvez consulter les articles suivants et précédents ici:

  • Partie 1: Créez votre première animation!
  • Partie 2: animations plus avancées avec TrimPath
  • Partie 3: Implémenter l'animation dans le projet Flutter (à venir…)

Restez à l'écoute!