Κινούμενα σχέδια στην ανάπτυξη κινητών: τι είναι, τι τύποι υπάρχουν και πώς να τα χρησιμοποιήσετε

Κινούμενα σχέδια στο Android: Property Animation και View Animation

Το Android παρέχει δύο κύρια συστήματα κινούμενων σχεδίων: View Animation (παλαιότερο) και Property Animation (σύγχρονο). Το View Animation (ή Tween Animation) λειτουργεί μόνο με οπτική αναπαράσταση — αλλάζει την εμφάνιση της Προβολής αλλά όχι τις πραγματικές ιδιότητές της (για παράδειγμα, οι συντεταγμένες κλικ παραμένουν στη θέση τους). Το Property Animation, που εισήχθη στο Android 3.0, αλλάζει πραγματικές ιδιότητες αντικειμένου μέσω Animator — ValueAnimator, ObjectAnimator ή AnimatorSet.

ObjectAnimator και ValueAnimator

ObjectAnimator είναι η πιο δημοφιλής κλάση Property Animation. Δημιουργεί κινούμενα σχέδια για μια συγκεκριμένη ιδιότητα αντικειμένου (π.χ. translationX, alpha, scaleY) για καθορισμένο χρόνο με δεδομένο Interpolator.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

Το ValueAnimator δεν είναι δεσμευμένο σε συγκεκριμένο αντικείμενο — δημιουργεί τιμές που μπορούν να χρησιμοποιηθούν για οποιαδήποτε ιδιότητα ή προσαρμοσμένη λογική.

View Animation και κινούμενα σχέδια XML

View Animation περιγράφεται σε αρχεία XML res/anim/. Υποστηρίζονται τέσσερις τύποι: scale, translate, rotate, alpha. Το μειονέκτημα είναι ότι το κινούμενο σχέδιο δεν αλλάζει τις πραγματικές παραμέτρους της Προβολής. Για απλά εφέ (αναβοσβήσιμο, περιστροφή) το View Animation εξακολουθεί να είναι εφαρμόσιμο, αλλά για νέα έργα συνιστάται το Property Animation.

Κινούμενα σχέδια στο Jetpack Compose

Το Jetpack Compose προσφέρει σύγχρονο API κινούμενων σχεδίων: animateAsState, Animatable, AnimatedVisibility και AnimatedContent. Το κινούμενο σχέδιο στο Compose είναι αντιδραστικό: όταν αλλάζει η κατάσταση, το κινούμενο σχέδιο ξεκινά αυτόματα.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

Κινούμενα σχέδια στο iOS: Core Animation και UIView.animate

Το iOS παρέχει μια ισχυρή στοίβα κινούμενων σχεδίων βασισμένη στο Core Animation — ένα χαμηλού επιπέδου πλαίσιο που λειτουργεί με CALayer. Το UIKit χτίζεται πάνω από το Core Animation με βολικές μεθόδους UIView.animate και UIViewPropertyAnimator.

UIView.animate

UIView.animate είναι ο απλούστερος τρόπος για κινούμενα σχέδια στο iOS. Επιτρέπει την κίνηση frame, alpha, transform, backgroundColor και άλλων ιδιοτήτων UIView.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — ένα πλαίσιο για φυσική κίνηση: βαρύτητα, συγκρούσεις, ελατήρια, δυνάμεις έλξης. Επιτρέπει τη δημιουργία ρεαλιστικής συμπεριφοράς αντικειμένων χωρίς χειροκίνητο υπολογισμό φυσικής. Χρησιμοποιείται για προσαρμοσμένες μεταβάσεις, κινούμενα μενού και στοιχεία παιχνιδιού.

CAAnimation και Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — ένα χαμηλού επιπέδου API για κίνηση CALayer. Υποστηρίζει τρισδιάστατους μετασχηματισμούς, κίνηση διαδρομής (keyframe), κάλυψη και σύνθεση. Το SwiftUI χρησιμοποιεί το Core Animation στο παρασκήνιο μέσω των τροποποιητών animation και withAnimation.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Για τα περισσότερα έργα iOS χρησιμοποιείται το SwiftUI με τα ενσωματωμένα κινούμενα σχέδιά του. Για παράδειγμα, το withAnimation τυλίγει αλλαγές κατάστασης σε ένα πλαίσιο κίνησης.

Διανυσματικά κινούμενα σχέδια: Lottie και Rive

Τα σύνθετα κινούμενα σχέδια (χαρακτήρες, μεταβάσεις, φορτωτές) είναι δύσκολο να υλοποιηθούν με κώδικα. Το Lottie και το Rive λύνουν αυτό το πρόβλημα επιτρέποντας στους σχεδιαστές να δημιουργούν κινούμενα σχέδια σε οπτικούς επεξεργαστές και στους προγραμματιστές να τα ενσωματώνουν στην εφαρμογή ως έτοιμο στοιχείο.

Lottie

Lottie — μια βιβλιοθήκη από την Airbnb (τώρα LottieFiles) που αποδίδει κινούμενα σχέδια από το Adobe After Effects που εξάγονται σε μορφή JSON. Υποστηρίζεται σε Android, iOS, Flutter, React Native και Web. Τα κινούμενα σχέδια Lottie είναι διανυσματικά, κλιμακώνονται χωρίς απώλεια ποιότητας και μπορούν να προσαρμοστούν προγραμματιστικά (ταχύτητα, πρόοδος, χρώματα).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (πρώην 2Dimensions) — ένα πιο προηγμένο εργαλείο για διανυσματικά κινούμενα σχέδια. Σε αντίθεση με το Lottie, το Rive υποστηρίζει διαδραστικά κινούμενα σχέδια: καταστάσεις, ενεργοποιητές, μεταβάσεις. Η κίνηση δημιουργείται στο Rive Editor και ελέγχεται στην εφαρμογή μέσω State Machine. Το Rive είναι κατάλληλο για διεπαφές παιχνιδιών, κινούμενα εικονίδια και σύνθετες μεταβάσεις με ανατροφοδότηση.

Στην IT Sectr χρησιμοποιούμε Lottie για διακοσμητικά κινούμενα σχέδια (φορτωτές, επιτυχημένες λειτουργίες, κενές καταστάσεις) και Rive για διαδραστικά στοιχεία οθονών onboarding. Αυτό μειώνει τον χρόνο ανάπτυξης κινούμενων σχεδίων κατά 60% σε σύγκριση με τη χειροκίνητη υλοποίηση σε UIKit ή Canvas.

Shared Element Transition και Hero Animation

Shared Element Transition — κίνηση όπου ένα στοιχείο (εικόνα, κείμενο, κάρτα) μετακινείται και μετασχηματίζεται ομαλά κατά τη μετάβαση μεταξύ οθονών. Αυτό δημιουργεί την ψευδαίσθηση της συνέχειας: ο χρήστης δεν "πηγαίνει" σε μια νέα οθόνη, αλλά "βυθίζεται" στο στοιχείο.

Android Shared Element Transition

Στο Android η μετάβαση υλοποιείται μέσω ActivityOptionsCompat και χαρακτηριστικών transitionName. Το FragmentTransaction υποστηρίζει addSharedElement για μεταβάσεις εντός Activity. Το Compose χρησιμοποιεί SharedTransitionLayout με SharedContentState.

iOS Hero Transition

Το iOS δεν έχει ενσωματωμένο Hero Transition, αλλά η βιβλιοθήκη Hero (από τον Luke Zhao) υλοποιεί αυτό το μοτίβο στο UIKit. Απλώς εκχωρήστε ένα id στα στοιχεία και στις δύο οθόνες — το Hero θα δημιουργήσει αυτόματα μια ομαλή μετάβαση. Στο SwiftUI, η κίνηση μετάβασης είναι ενσωματωμένη μέσω NavigationStack και matchedGeometryEffect.

Flutter Hero

Το Flutter έχει ενσωματωμένο widget Hero με παράμετρο tag. Όταν δύο σελίδες περιέχουν Hero με το ίδιο tag, το Flutter κινεί αυτόματα τη μετάβαση μεταξύ τους. Αυτός είναι ένας από τους απλούστερους τρόπους υλοποίησης σύνθετων κινούμενων σχεδίων σε μια εφαρμογή κινητού.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator και Easing

Για να φαίνεται φυσικό ένα κινούμενο σχέδιο, χρησιμοποιούνται καμπύλες ταχύτητας — Interpolator στο Android και Easing στο iOS. Καθορίζουν πώς αλλάζει η ταχύτητα του κινούμενου σχεδίου από την αρχή έως το τέλος.

Interpolators Android

Το Android υποστηρίζει πολλούς ενσωματωμένους Interpolator: LinearInterpolator (ομοιόμορφα), AccelerateDecelerateInterpolator (αργά-γρήγορα-αργά), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (με υπέρβαση) και BounceInterpolator (με αναπήδηση). Ένας προσαρμοσμένος Interpolator μπορεί να δημιουργηθεί μέσω XML ή της κλάσης TimeInterpolator.

Spring Animation

Spring Animation (κίνηση ελατηρίου) μοντελοποιεί τη φυσική ελατηρίου με παραμέτρους απόσβεσης (damping) και ακαμψίας (stiffness). Απόσβεση 0 — ατελείωτες ταλαντώσεις, 1 — χωρίς ταλαντώσεις. Η ακαμψία καθορίζει την ταχύτητα επιστροφής. Το Spring Animation είναι διαθέσιμο στο iOS (UIViewPropertyAnimator με UISpringTimingParameters), Android (SpringAnimation από physics2) και SwiftUI (spring()).

Η τεκμηρίωση Spring Animation στο Android περιέχει λεπτομερή παραδείγματα διαμόρφωσης.

Κίνηση χρονολογίου

Timeline (χρονολόγιο) — μια προσέγγιση όπου η κίνηση χωρίζεται σε καρέ στο χρόνο. Χρησιμοποιείται για σύνθετες ακολουθίες όπου το AnimationSet ή η ομαδική κίνηση δεν είναι αρκετά ευέλικτα. Το Android υποστηρίζει AnimatorSet, το iOS — CAAnimationGroup, το Flutter — Interval στο AnimationController.