Interpolator — τι είναι, καμπύλες παρεμβολής στο Android

Τι είναι το Interpolator;

Interpolator — διεπαφή στο Android που αντιστοιχίζει την κλασματική τιμή προόδου της κίνησης (από 0.0 έως 1.0) στην πραγματική τιμή με τροποποιημένη ταχύτητα. Αν η κίνηση διαρκεί 300 χιλιοστά του δευτερολέπτου, το σύστημα καλεί το Interpolator για κάθε καρέ, μεταφέροντας την τρέχουσα πρόοδο. Το Interpolator επιστρέφει τροποποιημένη τιμή — για παράδειγμα, για AccelerateInterpolator στο 50% του χρόνου, η κίνηση διανύει μόνο ~25% της διαδρομής, προσομοιώνοντας επιτάχυνση.

Μαθηματικά, το Interpolator μπορεί να αναπαρασταθεί ως συνάρτηση f(t), όπου t είναι ο κανονικοποιημένος χρόνος [0, 1] και f(t) είναι η κανονικοποιημένη τιμή [0, 1] (ή ευρύτερη για Overshoot/Bounce). Ο γραμμικός παρεμβολέας επιστρέφει f(t) = t — το αντικείμενο κινείται με σταθερή ταχύτητα. Το AccelerateInterpolator προσεγγίζει f(t) = t², το DecelerateInterpolator — f(t) = 1 − (1 − t)², δημιουργώντας ομαλή εκκίνηση ή τερματισμό. Στο Android Animation Framework, το Interpolator εφαρμόζεται τόσο στο ValueAnimator όσο και στο ObjectAnimator και ViewPropertyAnimator, προσφέροντας ενιαία προσέγγιση διαχείρισης ταχύτητας σε όλα τα επίπεδα.

Ενσωματωμένοι παρεμβολείς Android

Το Android προσφέρει 9 ενσωματωμένους παρεμβολείς, ο καθένας με το δικό του μαθηματικό μοντέλο. Η επιλογή παρεμβολέα καθορίζει τον χαρακτήρα της κίνησης: φυσικότητα (Bounce), ελαστικότητα (Overshoot) ή ομαλότητα (AccelerateDecelerate).

Κάθε παρεμβολέας έχει δήλωση XML στο res/interpolator/ και κλάση Kotlin στο πακέτο android.view.animation. AccelerateDecelerateInterpolator — ο πιο συχνά χρησιμοποιούμενος: η καμπύλη του θυμίζει τη συνάρτηση easing ease-in-out στο CSS. Για εφαρμογές Android με Material Design, συνιστάται OvershootInterpolator για κουμπιά floating action button (FAB) — δημιουργεί εφέ «αναπήδησης» κατά την εμφάνιση.

PathInterpolator: προσαρμοσμένες καμπύλες

PathInterpolator — παρεμβολέας βασισμένος σε καμπύλη Bezier, ορισμένος μέσω αντικειμένου Path. Διαθέσιμος από API 21 (Android 5.0). Επιτρέπει οπτικό σχεδιασμό της καμπύλης ταχύτητας — ο σχεδιαστής σχεδιάζει την καμπύλη, ο προγραμματιστής τη μεταφέρει σε κώδικα μέσω συντεταγμένων σημείων ελέγχου. Υποστηρίζεται μόνο κυβικό Bezier (δύο σημεία ελέγχου C1, C2).

Η καμπύλη PathInterpolator ξεκινά πάντα στο σημείο (0,0) και τελειώνει στο (1,1). Τα σημεία ελέγχου καθορίζουν το σχήμα: (x1, y1) — σημείο στην αρχή, (x2, y2) — στο τέλος. Οι τιμές x πρέπει να είναι στο εύρος [0,1] — αυτό εγγυάται μονοτονία στο χρόνο. Οι τιμές y μπορούν να βγουν εκτός [0,1] — αυτό δημιουργεί εφέ υπέρβασης (overshoot) ή οπισθοχώρησης (anticipate). Για παράδειγμα, το τυπικό Material Design χρησιμοποιεί την καμπύλη fast-out-slow-in με σημεία ελέγχου (0.4, 0.0, 0.2, 1.0). Στην IT Sectr χτίζουμε προσαρμοσμένα PathInterpolator για κάθε σύστημα σχεδιασμού — αυτό εγγυάται ομοιομορφία κινήσεων σε όλες τις οθόνες.

Δημιουργία δικού σας Interpolator

Αν οι ενσωματωμένοι παρεμβολείς δεν καλύπτουν το σενάριο, το Android επιτρέπει τη δημιουργία δικού σας μέσω υλοποίησης της διεπαφής TimeInterpolator. Η μοναδική μέθοδος — getInterpolation(input: Float): Float. Input — τρέχουσα πρόοδος κίνησης από 0 έως 1· output — τροποποιημένη τιμή. Το output μπορεί να βγει εκτός [0,1] για εφέ υπέρβασης ή αναπήδησης.

Τυπικοί προσαρμοσμένοι παρεμβολείς: εφέ bounce με απόσβεση (έξοδος από 1.0 και επιστροφή), εφέ elastic (ημιτονοειδής απόσβεση), step-interpolator (διακριτά άλματα). Οι προσαρμοσμένοι παρεμβολείς μπορούν επίσης να οριστούν μέσω XML με την ετικέτα <interpolator> και αναφορά κλάσης. Στο Android Studio υπάρχει ενσωματωμένη προεπισκόπηση Interpolator στο Layout Inspector — δείχνει την πραγματική καμπύλη για τον επιλεγμένο παρεμβολέα, διευκολύνοντας τον εντοπισμό σφαλμάτων.

Παραδείγματα κώδικα σε Kotlin

Παράδειγμα 1: AccelerateDecelerateInterpolator με ValueAnimator

Βασική κίνηση κλίμακας κουμπιού χρησιμοποιώντας συμμετρικό παρεμβολέα. Το ValueAnimator αλλάζει την τιμή από 1.0 σε 1.2 και πίσω, και το AccelerateDecelerateInterpolator κάνει την κίνηση ομαλή.

import android.animation.ValueAnimator
import android.view.animation.AccelerateDecelerateInterpolator
import android.view.View

fun View.pulseAnimation() {
    ValueAnimator.ofFloat(1.0f, 1.2f).apply {
        duration = 300
        interpolator = AccelerateDecelerateInterpolator()
        repeatCount = 1
        repeatMode = ValueAnimator.REVERSE

        addUpdateListener { animator ->
            val scale = animator.animatedValue as Float
            this@pulseAnimation.scaleX = scale
            this@pulseAnimation.scaleY = scale
        }

        start()
    }
}

AccelerateDecelerateInterpolator δημιουργεί ομαλή αύξηση στην αρχή και ομαλή επιστροφή στο τέλος. Η μέθοδος REVERSE επαναλαμβάνει την κίνηση σε αντίστροφη κατεύθυνση, δημιουργώντας εφέ παλμού. Αυτό το μοτίβο χρησιμοποιείται για κουμπιά ενεργειών, προσελκύοντας την προσοχή του χρήστη στο βασικό στοιχείο διεπαφής.

Παράδειγμα 2: PathInterpolator με προσαρμοσμένη καμπύλη

Προσαρμοσμένη καμπύλη με εφέ overshoot — το αντικείμενο υπερβαίνει τη θέση στόχο κατά 10% και επιστρέφει. Τα σημεία ελέγχου (0.4, 0.0, 0.6, 1.3) καθορίζουν επιταχυνόμενη είσοδο με υπέρβαση.

import android.animation.ObjectAnimator
import android.graphics.Path
import android.view.animation.PathInterpolator
import android.view.View

fun View.slideWithOvershoot() {
    val path = Path().apply {
        cubicTo(0.4f, 0.0f, 0.6f, 1.3f, 1.0f, 1.0f)
    }
    val interpolator = PathInterpolator(path)

    ObjectAnimator.ofFloat(this, "translationY", 200f, 0f).apply {
        duration = 400
        interpolator = interpolator
        start()
    }
}

PathInterpolator δέχεται Path με κυβική καμπύλη Bezier. Στο παράδειγμα, το στοιχείο «υπερβαίνει» τη θέση στόχο (y=1.3 στο 60% του χρόνου) και επιστρέφει στο τέλος. Το Path πρέπει να είναι αυστηρά μονότονο κατά μήκος του άξονα x, διαφορετικά η κίνηση θα πάει προς τα πίσω. Για επαλήθευση χρησιμοποιήστε το Layout Inspector στο Android Studio.

Παράδειγμα 3: Προσαρμοσμένος BounceInterpolator

Δικός σας παρεμβολέας με εφέ αποσβενόμενων αναπηδήσεων. Υλοποίηση μέσω TimeInterpolator με τέσσερις κύκλους απόσβεσης.

import android.animation.TimeInterpolator

class DampedBounceInterpolator : TimeInterpolator {

    private val cycles = 4
    private val damping = 0.85f

    override fun getInterpolation(input: Float): Float {
        val t = input * cycles
        val decay = Math.pow(damping.toDouble(), cycles.toDouble()).toFloat()
        val peak = t - (Math.floor(t.toDouble())).toFloat()
        val bounce = Math.sin(peak * Math.PI).toFloat()
        return 1f - bounce * decay * (1f - input)
    }
}

Ο προσαρμοσμένος DampedBounceInterpolator δημιουργεί 4 αποσβενόμενες αναπηδήσεις με συντελεστή απόσβεσης 0.85. Η μέθοδος getInterpolation δέχεται γραμμικό input και επιστρέφει τιμή με εφέ «ελατηρίου». Στην IT Sectr χρησιμοποιούμε αυτόν τον παρεμβολέα για κίνηση εμφάνισης ειδοποιήσεων — η αναπήδηση δημιουργεί αίσθηση φυσικότητας και προσελκύει την προσοχή.