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,
- La bordure grise
- 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
- Changer la Nom à
border - 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) - dans le strokeColor, passez à
#888888(couleur grise) - 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
- Changer la Nom à
check - Ajouter à pathData
M 4 12 L 9 18 L 20 7(L = ligne, suivi des coordonnées X, Y) - dans le strokeColor, passez à
#000000(couleur noire) - dans le largeur du trait, passez à
2 - dans le accident vasculaire cérébral, passez à
Round
Ajouter une animation à Check
- dans le animateDuration, modifiez la durée de 300 ms à 1 000 ms
- Dans la couche de vérification, cliquez sur l’icône d’horloge de clic pour ajouter
trimPathEndAnimation - 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 est24dp.
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.
