Animated API: τι είναι, δυνατότητες της βιβλιοθήκης και αρχή λειτουργίας

Τι είναι το Animated API στο React Native

Animated API είναι μια δηλωτική βιβλιοθήκη κίνησης ενσωματωμένη στον πυρήνα του React Native, σχεδιασμένη για τη δημιουργία ομαλών, υψηλής απόδοσης κινήσεων σε εφαρμογές για κινητά. Σε αντίθεση με τις κινήσεις CSS στην ανάπτυξη ιστού, το Animated API λειτουργεί απευθείας με το εγγενές νήμα UI μέσω της γέφυρας JavaScript ή του εγγενούς προγράμματος οδήγησης. Η βιβλιοθήκη είναι χτισμένη γύρω από την έννοια του Animated.Value — ενός δοχείου που αποθηκεύει μια αριθμητική τιμή και εγγράφει αυτόματα όλα τα εξαρτώμενα στοιχεία στις αλλαγές. Όταν η τιμή αλλάζει μέσω Animated.timing ή Animated.spring, η βιβλιοθήκη υπολογίζει τις ενδιάμεσες καταστάσεις χωρίς επαναφορά των στοιχείων React, κάτι που είναι κρίσιμο για τη διατήρηση των 60 FPS. Το Animated API υποστηρίζει όλες τις ιδιότητες στυλ, συμπεριλαμβανομένων των transform, opacity, width, height, top, left και backgroundColor. Η τεκμηρίωση του React Native συνιστά το Animated API για όλα τα σενάρια κίνησης όπου απαιτείται υψηλή απόδοση και προβλέψιμη συμπεριφορά και στις δύο πλατφόρμες.

Πώς λειτουργεί το Animated API: Value, timing και spring

Η βάση του Animated API είναι το Animated.Value, ένα δοχείο αριθμητικής τιμής που αρχικοποιείται μέσω του κατασκευαστή new Animated.Value(0). Κάθε Animated.Value αποθηκεύει έναν αρχικό αριθμό και παρέχει μεθόδους κίνησης: timing, spring και decay. Η μέθοδος timing δημιουργεί μια γραμμική ή easing κίνηση με παραμέτρους duration, delay και easing. Η μέθοδος spring υλοποιεί μια φυσική κίνηση ελατηρίου με παραμέτρους friction, tension και velocity. Η μέθοδος decay δημιουργεί μια κίνηση με αδράνεια και απόσβεση — χρήσιμη για swipes και κύλιση. Όλες οι μέθοδοι επιστρέφουν ένα αντικείμενο Animated.Composite που μπορεί να ξεκινήσει μέσω start() και να σταματήσει μέσω stop(). Η κίνηση εκτελείται σε ξεχωριστό νήμα: όταν χρησιμοποιείται useNativeDriver = true, οι υπολογισμοί γίνονται στο εγγενές νήμα UI, το νήμα JavaScript παραμένει ελεύθερο για την επεξεργασία γεγονότων και λογικής.

Animated.timing: ρύθμιση διάρκειας και easing

Animated.timing είναι η βασική μέθοδος κίνησης με ελεγχόμενη διάρκεια. Δέχεται διαμόρφωση: toValue, duration (προεπιλογή 500ms), easing (προεπιλογή Easing.linear) και delay. Οι συναρτήσεις easing από την ενότητα Easing επιτρέπουν μη γραμμική επιτάχυνση: Easing.bezier, Easing.elastic, Easing.bounce. Για κίνηση με ομοιόμορφη ταχύτητα χρησιμοποιήστε Easing.linear, για φυσική επιτάχυνση — Easing.inOut. Σημαντικό: Το Animated.timing εγγυάται ότι η κίνηση θα ολοκληρωθεί ακριβώς στο toValue εντός του καθορισμένου χρόνου, ανεξάρτητα από το φορτίο της συσκευής.

Animated.spring: φυσική κίνηση

Animated.spring υλοποιεί ένα μοντέλο κίνησης ελατηρίου βασισμένο στον νόμο του Hooke. Η παράμετρος friction (τριβή) ελέγχει τον αριθμό ταλαντώσεων: όσο υψηλότερο είναι το friction, τόσο ταχύτερη είναι η διακοπή. Η παράμετρος tension (τάση) καθορίζει την ακαμψία του ελατηρίου: το υψηλό tension επιταχύνει την κίνηση. Η παράμετρος velocity ορίζει την αρχική ταχύτητα για κίνηση με αδράνεια — κρίσιμη για κινήσεις που ακολουθούν τη χειρονομία του χρήστη. Το Animated.spring δεν έχει σταθερή διάρκεια — η κίνηση τελειώνει όταν η ταχύτητα και το πλάτος φτάσουν τις οριακές τιμές.

Animated.View, Animated.Text και άλλα στοιχεία

Το Animated API παρέχει τέσσερα ενσωματωμένα κινούμενα στοιχεία: Animated.View, Animated.Text, Animated.ScrollView και Animated.Image. Κάθε ένα είναι ένα περιτύλιγμα πάνω από το αντίστοιχο εγγενές στοιχείο που υποστηρίζει τη μεταβίβαση Animated.Value σε ιδιότητες στυλ. Το Animated.View είναι το πιο συχνά χρησιμοποιούμενο στοιχείο, δέχεται τα ίδια props με ένα κανονικό View, αλλά με υποστήριξη για κινούμενες τιμές στο style. Το Animated.Text είναι χρήσιμο για κίνηση χρώματος κειμένου ή διαστήματος μεταξύ γραμμάτων. Το Animated.ScrollView επιτρέπει κίνηση των scrollTo και contentOffset. Το Animated.Image υποστηρίζει κινούμενη διαφάνεια και κλίμακα κατά τη φόρτωση εικόνων. Εάν χρειάζεστε κίνηση άλλου στοιχείου, χρησιμοποιήστε Animated.createAnimatedComponent(MyComponent).

import React from 'react';
import { Animated, View, Button } from 'react-native';

const FadeInView = () => {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    View
      Animated.View { style: [{ opacity }] }
      Button title="Fade In" onPress={fadeIn}
  );
};

Σύστημα παρεμβολής: από αριθμούς σε χρώμα και μετασχηματισμούς

Παρεμβολή είναι ένας μηχανισμός μετατροπής της εισερχόμενης αριθμητικής περιοχής του Animated.Value σε τιμές εξόδου άλλου τύπου. Η μέθοδος interpolate δέχεται διαμόρφωση με inputRange (πίνακας εισερχόμενων τιμών) και outputRange (πίνακας εξερχόμενων τιμών). Τύποι outputRange: αριθμοί (συντεταγμένες, διαφάνεια), συμβολοσειρές (γωνίες περιστροφής με 'deg'), χρώματα hex ('#ff0000'), αντικείμενα μετασχηματισμού. Η παρεμβολή υποστηρίζει easing και extrapolate — συμπεριφορά εκτός του καθορισμένου εύρους (clamp, extend, identity). Για παράδειγμα, σε μια χειρονομία σύρσης, η θέση του δακτύλου από 0 έως 200 μπορεί να μετατραπεί σε διαφάνεια από 1 έως 0, δημιουργώντας ένα εφέ εξασθένισης κατά την ολίσθηση. Το σύστημα παρεμβολής επιτρέπει τη δημιουργία σύνθετων κινήσεων πολλαπλών βημάτων: η τιμή 0-0.5-1.0 μπορεί να μετατραπεί σε κίτρινο-πορτοκαλί-κόκκινο.

const spinValue = new Animated.Value(0);

Animated.timing(spinValue, {
  toValue: 1,
  duration: 3000,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

Σύνθεση κινήσεων: ακολουθία και παραλληλία

Το Animated API υποστηρίζει τρεις λειτουργίες σύνθεσης κινήσεων: Animated.sequence, Animated.parallel και Animated.stagger. Το Animated.sequence ξεκινά κινήσεις μία προς μία: κάθε επόμενη ξεκινά μετά την ολοκλήρωση της προηγούμενης. Το Animated.parallel ξεκινά όλες τις κινήσεις ταυτόχρονα με ένα κοινό callback ολοκλήρωσης. Το Animated.stagger ξεκινά κινήσεις με καθυστέρηση μεταξύ της έναρξης κάθε μίας — καθυστερημένη έναρξη, χρήσιμη για τη δημιουργία εφέ κυμάτων. Οι συνθέσεις μπορούν να φωλιαστούν η μία μέσα στην άλλη: sequence από ομάδες parallel ή parallel από sequence. Αυτό επιτρέπει τη δημιουργία σύνθετων αλυσίδων: κίνηση εμφάνισης στοιχείων με καθυστέρηση, παράλληλο slide-in με fade-in, στη συνέχεια sequence από bounce και shake.

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.parallel([
    Animated.timing(scaleAnim, {
      toValue: 1.1,
      duration: 200,
      useNativeDriver: true,
    }),
    Animated.spring(colorAnim, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }),
  ]),
]).start();

useNativeDriver και απόδοση κινήσεων

useNativeDriver είναι μια επιλογή διαμόρφωσης κίνησης που μεταφέρει όλη τη λογική κίνησης από το νήμα JavaScript στο εγγενές νήμα UI. Χωρίς useNativeDriver, οι κινήσεις εκτελούνται μέσω της γέφυρας JavaScript: κάθε αλλαγή τιμής αποστέλλεται στο εγγενές νήμα, προκαλώντας καθυστερήσεις όταν το νήμα JS είναι φορτωμένο με ασύγχρονες λειτουργίες. Με useNativeDriver = true, το Animated.Value ενημερώνεται απευθείας στην εγγενή πλευρά και το νήμα JavaScript παραμένει ελεύθερο για την επεξεργασία γεγονότων, αιτημάτων API και συμφιλίωσης React. Περιορισμός: το useNativeDriver υποστηρίζει μόνο μη-layout ιδιότητες — opacity, transform, backgroundColor (μέσω PlatformColor). Για ιδιότητες layout (width, height, top, left) απαιτείται NativeAnimatedModule ή LayoutAnimation. Σύμφωνα με το React Native 0.76, όλες οι κινούμενες ιδιότητες υποστηρίζονται μέσω εγγενούς προγράμματος οδήγησης, εκτός από αυτές που βασίζονται σε layout. Η λειτουργία useNativeDriver συνιστάται για όλες τις κινήσεις όπου είναι δυνατό — αυξάνει τα FPS από 30-40 σε σταθερά 60.

Κίνηση με χειρονομίες: PanResponder και Gesture Handler

PanResponder είναι ένα ενσωματωμένο σύστημα React Native για την επεξεργασία χειρονομιών, το οποίο ενσωματώνεται άριστα με το Animated API. Το PanResponder παρέχει callbacks onPanResponderMove και onPanResponderRelease, όπου το Animated.Value μπορεί να ενημερωθεί με βάση τη θέση του δακτύλου. Για πιο σύνθετες χειρονομίες — swipe, pinch, rotation — χρησιμοποιήστε τη βιβλιοθήκη react-native-gesture-handler, η οποία λειτουργεί σύγχρονα με κινήσεις και εξασφαλίζει 60 FPS ακόμη και σε χειρονομίες πολλαπλών δακτύλων. Το Gesture Handler παρέχει το Animated.event — μια μέθοδο που συνδέει άμεσα τη χειρονομία με το Animated.Value χωρίς χειροκίνητη επεξεργασία callback. Ο συνδυασμός Gesture Handler + Animated API είναι το βιομηχανικό πρότυπο για διαδραστικές κινήσεις σε εφαρμογές React Native.

Animated.event: σύνδεση χειρονομιών με τιμές

Animated.event είναι μια μέθοδος που συνδέει το εγγενές γεγονός (π.χ. gestureEvent) απευθείας με το Animated.Value. Σε αντίθεση με τη χειροκίνητη επεξεργασία σε callback, το Animated.event λειτουργεί σύγχρονα στο εγγενές νήμα και δεν απαιτεί γέφυρα JavaScript για κάθε καρέ. Αυτό παρέχει ομαλή κίνηση ακόμη και σε γρήγορα swipes. Το Animated.event δέχεται έναν πίνακα αντιστοιχίσεων, όπου κάθε στοιχείο συνδέει ένα πεδίο γεγονότος με το Animated.Value. Υποστηρίζεται ένθετη πρόσβαση: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Παραδείγματα κώδικα με Animated API

Ας εξετάσουμε τρία πρακτικά παραδείγματα χρήσης του Animated API σε έργα React Native. Το πρώτο παράδειγμα — κίνηση εμφάνισης κάρτας με ακολουθία opacity + translateY. Το δεύτερο παράδειγμα — κίνηση παλμού κουμπιού χρησιμοποιώντας spring. Το τρίτο παράδειγμα — διαδραστικό στοιχείο σύρσης με PanResponder. Όλα τα παραδείγματα χρησιμοποιούν useNativeDriver = true και συμμορφώνονται με τις βέλτιστες πρακτικές του React Native 0.76.

const CardWithAnimation = () => {
  const anim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.spring(anim, {
      toValue: 1,
      friction: 6,
      tension: 40,
      useNativeDriver: true,
    }).start();
  }, []);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  return (
    Animated.View {
      style: [{ opacity: anim, transform: [{ translateY }] }]
    }
  );
};

Κίνηση παλμού μέσω spring

Spring κίνηση δημιουργεί ένα φυσικό εφέ παλμού χάρη στο φυσικό μοντέλο ελατηρίου. Η ρύθμιση χαμηλού friction (2-4) και υψηλού tension (100-150) δίνει απαλές ταλαντώσεις που εξασθενούν φυσικά. Χρησιμοποιήστε Animated.loop για ατέρμονο παλμό με κύκλο sequence: scale → 1.2, scale → 1.0. Ο παλμός εφαρμόζεται για δείκτες φόρτωσης, ειδοποιήσεις και τονισμένα κουμπιά.