Créez votre propre vecteur animé dessinable sur l’application Android

Écrit par

Carole B.

dans

Table des matières

Créez votre propre vecteur animé dessinable sur l’application Android

Dessinez les calques vectoriels

Commençons par dessiner le vecteur plus tard. Le ci-dessous se compose de 2 couches,

  1. La bordure grise
  2. Le chèque noir

Pour créer la couche de bordure, vous devez cliquer sur Ajouter un calque. Puis dans Attribut de couche, procédez comme suit

  1. Changer la Nom à border
  2. Ajouter à pathData M 0 0 L 0 24 L 24 24 L 24 0 L 0 0 (L = ligne, suivi des coordonnées X, Y)
  3. dans le strokeColor, passez à #888888 (couleur grise)
  4. dans le largeur du trait, passez à 2

Pour créer la couche de vérification, vous devez cliquer sur Ajouter un calque encore. Puis dans Attribut de couche, procédez comme suit

  1. Changer la Nom à check
  2. Ajouter à pathData M 4 12 L 9 18 L 20 7 (L = ligne, suivi des coordonnées X, Y)
  3. dans le strokeColor, passez à #000000 (couleur noire)
  4. dans le largeur du trait, passez à 2
  5. dans le accident vasculaire cérébral, passez à Round

Ajouter une animation à Check

  1. dans le animateDuration, modifiez la durée de 300 ms à 1 000 ms
  2. Dans la couche de vérification, cliquez sur l’icône d’horloge de clic pour ajouter trimPathEnd Animation
  3. Après cela, cliquez sur l’animation (barre verte) pour que l’attribut soit affiché à gauche. Ajoutez ensuite les attributs comme ci-dessous.

Testez l’animation

Cliquez simplement sur le bouton de lecture et voyez si l’animation est ce que vous voulez.

Exporter le dessin vectoriel animé

Clique sur le Exportation et sélectionnez le Dessin vectoriel animé. Puis un avd_anim.xml sera enregistré sur votre machine.

Maintenant, copiez simplement le avd_anim.xml déposer dans le res / drawable dossier de votre projet Android Studio.

Après cela, vous pouvez ensuite ajouter en tant que src à votre mise en page ImageView

android:id="@+id/my_animated_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/avd_anim" />

Comme il s’agit d’un dessin vectoriel, vous pouvez mettre la largeur et la hauteur de votre choix. Si vous mettez wrap_content, ce sera par la taille du vecteur dessinable, qui dans notre cas est 24dp.

Dans notre code, par exemple, nous ne montrons l’animation qu’au clic, donc le code est écrit comme ci-dessous

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
my_animated_view.setOnClickListener {
animateView(my_animated_view)
}
}


private fun animateView(view: ImageView) {
when (val drawable = view.drawable) {
is AnimatedVectorDrawableCompat -> {
drawable.start() 
}
is AnimatedVectorDrawable -> {
drawable.start()
        }
}
}

Maintenant, vous avez terminé!

Vous pouvez obtenir le code ici.

Pour obtenir plus d’idées d’animation d’icônes, consultez ceci lien.

Crédit à l’youtube ci-dessous montrant comment rendre le vecteur animé dessinable https://youtu.be/TfiZmzqAMgA.

+ Plus de publications