Property Animation: wat is het, ObjectAnimator en ValueAnimator

Wat is Property Animation?

Property Animation — is een framework in de Android SDK (package android.animation) dat alle eigenschappen van elk object (View, Drawable, aangepaste klasse) gedurende een bepaalde tijd animeert. In tegenstelling tot View Animation, die alleen met View werkt en alleen de visuele weergave (matrix transform) verandert, wijzigt Property Animation de werkelijke velden van het object. Dit betekent dat na animatie van translationX het object zich echt op de nieuwe positie bevindt en klikken op de nieuwe locatie worden verwerkt.

De architectuur van Property Animation is gebouwd op drie belangrijke klassen: ValueAnimator — de basis generator van waarden, ObjectAnimator — subklasse voor koppeling aan een objecteigenschap, AnimatorSet — orkestrator voor groepsanimatie. Alle drie ondersteunen Interpolator (snelheidscurve) en TypeEvaluator (interpolatieregel tussen waarden).

Volgens Android Performance Patterns (Google, 2025) werkt Property Animation op frequenties tot 60 FPS met correct geconfigureerde Interpolator en zonder zware berekeningen in onAnimationUpdate(). Voor complexe animaties (3D, fysica) wordt RenderThread (RenderNode Animations) in Android 12+ aanbevolen. Property Animation blijft de belangrijkste keuze voor het animeren van View-eigenschappen — translationX, rotationY, scaleX, alpha en andere.

ObjectAnimator: animatie van objecteigenschappen

ObjectAnimator — de populairste klasse van Property Animation. Het erft van ValueAnimator en roept automatisch de setter van de opgegeven eigenschap van het object aan met geanimeerde waarden. Voor de werking van ObjectAnimator moet het object een publieke setter hebben voor de geanimeerde eigenschap (bijv. setTranslationX(float) voor de eigenschap «translationX»).

import android.animation.ObjectAnimator
import android.view.View

// ObjectAnimator voor translationX
val animator = ObjectAnimator.ofFloat(
    myView,
    "translationX",
    0f,
    300f
).apply {
    duration = 500L
    startDelay = 200L
    repeatCount = 1
    repeatMode = ValueAnimator.REVERSE
    interpolator = FastOutSlowInInterpolator()
    start()
}

Ondersteunde View-eigenschappen: translationX, translationY, translationZ, rotation, rotationX, rotationY, scaleX, scaleY, alpha, x, y, elevation. ObjectAnimator.ofFloat() wordt gebruikt voor float-eigenschappen, ofInt() — voor int, ofObject() — voor aangepaste typen (kleur, punt). Gebruik voor kleuranimatie ofObject() met ArgbEvaluator of HsvEvaluator.

// ObjectAnimator met aangepaste TypeEvaluator (kleur)
import android.animation.ObjectAnimator
import android.animation.ArgbEvaluator
import android.graphics.Color

val colorAnim = ObjectAnimator.ofObject(
    myView,
    "backgroundColor",
    ArgbEvaluator(),
    Color.BLUE,
    Color.RED
).apply {
    duration = 1000L
    repeatCount = ValueAnimator.INFINITE
    repeatMode = ValueAnimator.REVERSE
    start()
}

// Gelijktijdige animatie van meerdere eigenschappen
val scaleXAnim = ObjectAnimator.ofFloat(myView, "scaleX", 1f, 1.5f)
val scaleYAnim = ObjectAnimator.ofFloat(myView, "scaleY", 1f, 1.5f)
val alphaAnim = ObjectAnimator.ofFloat(myView, "alpha", 1f, 0.5f)

AnimatorListener — interface voor het volgen van animatiegebeurtenissen: onAnimationStart, onAnimationEnd, onAnimationCancel, onAnimationRepeat. Gebruik AnimatorListenerAdapter om alleen de benodigde methoden te overschrijven. Vanaf Android 12 is Animator.AnimationCallback toegevoegd met ondersteuning voor coroutines via suspendAnimationFrame.

ValueAnimator: genereren van geanimeerde waarden

ValueAnimator — de basisklasse van Property Animation die geanimeerde waarden genereert van start tot end gedurende een bepaalde tijd. In tegenstelling tot ObjectAnimator is ValueAnimator niet aan een object gebonden — het berekent alleen de tussenliggende waarden en stelt de luisteraar op de hoogte. De ontwikkelaar beslist zelf wat te doen met de verkregen waarden: een View-eigenschap instellen, een Drawable-parameter wijzigen, aangepaste weergave in onDraw() bijwerken.

import android.animation.ValueAnimator
import android.view.animation.LinearInterpolator

"> ValueAnimator: animatie van de laadvoortgang
val valueAnimator = ValueAnimator.ofFloat(0f, 100f).apply {
    duration = 2000L
    interpolator = LinearInterpolator()
    repeatCount = ValueAnimator.INFINITE

    addUpdateListener { animator ->
        val progress = animator.animatedValue as Float
        progressBar.progress = progress.toInt()
        progressText.text = "${progress.toInt()}%"
    }

    addListener(object : AnimatorListenerAdapter() {
        override fun onAnimationRepeat(animation: Animator) {
            Log.d("Anim", "Progress animation restarted")
        }
    })
    start()
}

ValueAnimator.ofInt() — wordt gebruikt voor integer-eigenschappen (breedte, hoogte, aantal stappen). ValueAnimator.ofObject() — voor aangepaste typen met TypeEvaluator. ValueAnimator.ofPropertyValuesHolder() — voor parallelle animatie van meerdere eigenschappen met één timer, wat bronnen bespaart in vergelijking met aparte Animator voor elke eigenschap.

// ValueAnimator.ofObject met PointEvaluator
import android.animation.ValueAnimator
import android.graphics.PointF
import android.animation.PointFEvaluator

val pointAnim = ValueAnimator.ofObject(
    PointFEvaluator(),
    PointF(0f, 0f),
    PointF(300f, 500f)
).apply {
    duration = 1000L
    addUpdateListener { animator ->
        val point = animator.animatedValue as PointF
        movingView.x = point.x
        movingView.y = point.y
    }
    start()
}

Prestaties van ValueAnimator: bij een frequentie van 60 FPS wordt onAnimationUpdate elke ~16.7 ms aangeroepen. Vermijd in de luisteraar: objectallocatie (maak PointF/RectF één keer aan), aanroepen van findViewById(), zware berekeningen (bestands-I/O, netwerk). Gebruik voor animatie van 20+ gelijktijdige elementen PropertyValuesHolder in één Animator in plaats van 20 aparte Animator. Gebruik voor animatie met groottewijziging View.setLayoutParams() alleen aan het einde van de animatie (via AnimatorListenerAdapter.onAnimationEnd).

AnimatorSet: compositie van animaties

AnimatorSet — een orkestrator die het mogelijk maakt meerdere Animator (ObjectAnimator, ValueAnimator) in een bepaalde volgorde uit te voeren: sequentieel (playSequentially), parallel (playTogether), met vertragingen (after, before, with). AnimatorSet ondersteunt nesting — AnimatorSet kan andere AnimatorSet bevatten voor complexe scenario's.

import android.animation.AnimatorSet
import android.animation.ObjectAnimator

// AnimatorSet: sequentiële en parallelle animatie
val fadeIn = ObjectAnimator.ofFloat(myView, "alpha", 0f, 1f)
val slideUp = ObjectAnimator.ofFloat(myView, "translationY", 100f, 0f)
val bounce = ObjectAnimator.ofFloat(myView, "scaleX", 1f, 1.1f, 1f)

val animatorSet = AnimatorSet().apply {
    // Parallel: fadeIn + slideUp
    play(fadeIn).with(slideUp)
    "> Na: bounce met vertraging van 200ms
    play(bounce).after(200L)

    duration = 400L
    interpolator = FastOutSlowInInterpolator()
    addListener(object : AnimatorListenerAdapter() {
        override fun onAnimationEnd(animation: Animator) {
            Log.d("Anim", "Set completed")
        }
    })
    start()
}

AnimatorSet.Builder biedt een fluent API voor het bouwen van ketens: with() — parallel, before() — ervoor, after() — erna. AnimatorSet ondersteunt cancel() om alle animaties in de set te stoppen. Gebruik voor complexe scenario's (25+ animators) PropertyValuesHolder — het is efficiënter omdat het één gedeelde timer gebruikt in plaats van aparte timers voor elke Animator.

Interpolator en TypeEvaluator: snelheid en type beheren

Interpolator bepaalt de curve van de snelheidsverandering van de animatie van 0 tot 1. Android biedt ingebouwde Interpolators: LinearInterpolator (gelijkmatig), AccelerateDecelerateInterpolator (langzaam-snel-langzaam), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (met overschrijding van het doel), BounceInterpolator (met stuiteren), AnticipateOvershootInterpolator (met terugtrekken vóór het begin en overschrijding van het doel). Aangepaste Interpolator wordt geïmplementeerd via TimeInterpolator.

import android.animation.ObjectAnimator
import android.view.animation.BounceInterpolator
import android.view.animation.OvershootInterpolator
import android.view.animation.AnticipateOvershootInterpolator

// BounceInterpolator — stuiter effect aan het einde
val bounceAnim = ObjectAnimator.ofFloat(myView, "translationY", 0f, -50f).apply {
    duration = 600L
    interpolator = BounceInterpolator()
    start()
}

// AnticipateOvershoot — terugtrekken, dan overschrijding
val anticipateAnim = ObjectAnimator.ofFloat(myView, "scaleX", 1f, 1.3f).apply {
    duration = 500L
    interpolator = AnticipateOvershootInterpolator(2.0f)
    start()
}

TypeEvaluator — interface met de methode evaluate(fraction, startValue, endValue) die de tussenliggende waarde tussen start en end berekent. Ingebouwd: ArgbEvaluator (kleur int), FloatEvaluator, IntEvaluator, PointFEvaluator, RectEvaluator. Voor aangepaste gegevenstypen (bijv. animatie van een aangepaste klasse met drie velden) implementeert u uw eigen TypeEvaluator. Gebruik voor animatie van meerdere View met dezelfde instellingen PropertyValuesHolder — het accepteert een array van eigenschapsnamen en bijbehorende waarden.

// Aangepaste TypeEvaluator voor klasse ProgressState
data class ProgressState(val progress: Float, val color: Int)

class ProgressEvaluator : TypeEvaluator<ProgressState> {
    override fun evaluate(
        fraction: Float,
        startValue: ProgressState,
        endValue: ProgressState
    ): ProgressState {
        val progress = startValue.progress + fraction * (endValue.progress - startValue.progress)
        val color = ArgbEvaluator().evaluate(
            fraction, startValue.color, endValue.color
        ) as Int
        return ProgressState(progress, color)
    }
}

"> PropertyValuesHolder — maximale prestaties
val pvh1 = PropertyValuesHolder.ofFloat("scaleX", 1f, 1.5f)
val pvh2 = PropertyValuesHolder.ofFloat("scaleY", 1f, 1.5f)
val pvhAnim = ObjectAnimator.ofPropertyValuesHolder(myView, pvh1, pvh2).apply {
    duration = 300L
    start()
}