Animazione dinamica dei colori dei gradienti in Kotlin

L’animazione dei colori dei gradienti è un modo efficace per aggiungere un tocco di dinamicità e vivacità alle applicazioni Android. In questo articolo, esploreremo come implementare un’animazione di gradiente fluida e reversibile utilizzando Kotlin e la libreria Android.

Cos’è un gradiente?

Prima di immergerci nell’implementazione dell’animazione, è utile comprendere cosa sia un gradiente. In Android, un gradiente è una transizione graduale tra due o più colori. Possono essere orizzontali, verticali o radiali e vengono spesso utilizzati per sfondi, testo e altre componenti dell’interfaccia utente.

Implementazione dell’animazione

Il codice seguente mostra come implementare un’animazione dei colori del gradiente in Kotlin:

private fun gradientColors() {

    // Trova il TextView con l'id textView_example
    val textViewExample: TextView = findViewById(R.id.textView_example)

    // Colore di partenza e colore finale per il gradiente
    val startColor = resources.getColor(R.color.colorPrimary, null)
    val endColor = resources.getColor(R.color.colorSecondary, null)

    // Creo un animatore di valore per animare dinamicamente i colori del gradiente
    val animator = ValueAnimator.ofFloat(0f, 1f)
    animator.duration = 3000 // Durata dell'animazione in millisecondi
    animator.repeatCount = ValueAnimator.INFINITE // Ripeti l'animazione all'infinito
    animator.repeatMode = ValueAnimator.REVERSE // Dopo che l'animazione raggiunge la fine, ripeti in ordine inverso
    animator.addUpdateListener { animation ->
        val animatedValue = animation.animatedValue as Float
        // Calcolo i colori correnti del gradiente in base all'animazione
        val currentStartColor = ArgbEvaluator().evaluate(animatedValue, startColor, endColor) as Int
        val currentEndColor = ArgbEvaluator().evaluate(animatedValue, endColor, startColor) as Int

        // Creo il gradiente lineare
        val shader = LinearGradient(
            0f, 0f, textViewExample.width.toFloat(), textViewExample.height.toFloat(),
            currentStartColor, currentEndColor, Shader.TileMode.CLAMP
        )

        // Applico il gradiente al testo del TextView
        textViewExample.paint.shader = shader
        // Forzo il TextView a ridisegnarsi per visualizzare il gradiente
        textViewExample.invalidate()
    }

    // Avvio dell'animazione
    animator.start()
}

Spiegazione del codice

• Nel metodo gradientColors(), otteniamo un riferimento al TextView che vogliamo animare.
• Definiamo due colori: startColor e endColor, che rappresentano rispettivamente il colore di partenza e il colore finale del gradiente.
• Creiamo un ValueAnimator che cambia il valore da 0 a 1 nel corso del tempo.
• All’interno del listener di aggiornamento dell’animazione, calcoliamo i colori correnti del gradiente in base al valore animato.
• Creiamo un nuovo oggetto LinearGradient con i colori calcolati e lo applichiamo al paint del TextView.
• Infine, forziamo il TextView a ridisegnarsi per visualizzare il nuovo gradiente.