Animated API: ano ito, mga kakayahan ng library at prinsipyo ng paggana

Ano ang Animated API sa React Native

Animated API ay isang deklaratibong library ng animation na naka-embed sa core ng React Native, na idinisenyo para sa paglikha ng maayos at may mataas na pagganap na animation sa mga mobile application. Hindi tulad ng CSS animation sa web development, ang Animated API ay direktang gumagana sa native UI thread sa pamamagitan ng JavaScript bridge o native driver. Ang library ay binuo sa paligid ng konsepto ng Animated.Value — isang lalagyan na nag-iimbak ng numerikong halaga at awtomatikong nag-subscribe ng lahat ng umaasang component sa mga pagbabago. Kapag binago ang halaga sa pamamagitan ng Animated.timing o Animated.spring, kinakalkula ng library ang mga intermediate na estado nang hindi ni-re-render ang mga React component, na kritikal para sa pagpapanatili ng 60 FPS. Sinusuportahan ng Animated API ang lahat ng katangian ng estilo, kabilang ang transform, opacity, width, height, top, left, at backgroundColor. Inirerekomenda ng dokumentasyon ng React Native ang Animated API para sa lahat ng senaryo ng animation na nangangailangan ng mataas na pagganap at mahuhulaan na pag-uugali sa parehong platform.

Paano gumagana ang Animated API: Value, timing at spring

Ang pundasyon ng Animated API ay Animated.Value, isang lalagyan ng numerikong halaga na sinisimulan sa pamamagitan ng constructor na new Animated.Value(0). Ang bawat Animated.Value ay nag-iimbak ng panimulang numero at nagbibigay ng mga pamamaraan ng animation: timing, spring, at decay. Ang timing method ay gumagawa ng linear o easing animation na may mga parameter na duration, delay, at easing. Ang spring method ay nagpapatupad ng pisikal na spring animation na may mga parameter na friction, tension, at velocity. Ang decay method ay gumagawa ng animation na may inertia at pamamasa — kapaki-pakinabang para sa swipe at scroll. Lahat ng pamamaraan ay nagbabalik ng Animated.Composite object na maaaring simulan sa pamamagitan ng start() at ihinto sa pamamagitan ng stop(). Ang animation ay isinasagawa sa isang hiwalay na thread: kapag gumagamit ng useNativeDriver = true, ang mga kalkulasyon ay nangyayari sa native UI thread, ang JavaScript thread ay nananatiling libre para sa pagproseso ng mga kaganapan at lohika.

Animated.timing: pag-configure ng tagal at easing

Animated.timing ay ang pangunahing pamamaraan ng animation na may kontroladong tagal. Tumatanggap ng configuration: toValue, duration (default 500ms), easing (default Easing.linear), at delay. Ang mga easing function mula sa Easing module ay nagbibigay-daan sa non-linear na acceleration: Easing.bezier, Easing.elastic, Easing.bounce. Para sa animation na may pare-parehong bilis gamitin ang Easing.linear, para sa natural na acceleration — Easing.inOut. Mahalaga: Ginagarantiyahan ng Animated.timing na matatapos ang animation nang eksakto sa toValue sa tinukoy na oras, anuman ang load ng device.

Animated.spring: pisikal na animation

Animated.spring ay nagpapatupad ng spring model ng animation batay sa batas ni Hooke. Ang parameter na friction (friction) ay kumokontrol sa bilang ng mga oscillation: mas mataas ang friction, mas mabilis ang paghinto. Ang parameter na tension (tension) ay tumutukoy sa tigas ng spring: ang mataas na tension ay nagpapabilis ng paggalaw. Ang parameter na velocity ay nagtatakda ng paunang bilis para sa animation na may inertia — mahalaga para sa mga animation na sumusunod sa galaw ng gumagamit. Ang Animated.spring ay walang nakapirming tagal — nagtatapos ang animation kapag ang bilis at amplitude ay umabot sa mga halaga ng threshold.

Animated.View, Animated.Text at iba pang component

Ang Animated API ay nagbibigay ng apat na built-in na animated na component: Animated.View, Animated.Text, Animated.ScrollView, at Animated.Image. Ang bawat isa ay isang wrapper sa ibabaw ng kaukulang native component na sumusuporta sa pagpapasa ng Animated.Value sa mga katangian ng estilo. Ang Animated.View ay ang pinakaginagamit na component, tumatanggap ng parehong props gaya ng regular na View, ngunit may suporta para sa mga animated na halaga sa style. Ang Animated.Text ay kapaki-pakinabang para sa animation ng kulay ng teksto o spacing sa pagitan ng mga titik. Ang Animated.ScrollView ay nagbibigay-daan sa animation ng scrollTo at contentOffset. Sinusuportahan ng Animated.Image ang animated na transparency at scale habang naglo-load ng mga larawan. Kung kailangan mong i-animate ang ibang component, gamitin ang 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}
  );
};

Sistema ng interpolation: mula sa numero hanggang kulay at pagbabago

Interpolation ay isang mekanismo para sa pag-convert ng input numerikong range ng Animated.Value sa mga output na halaga ng ibang uri. Ang pamamaraang interpolate ay tumatanggap ng configuration na may inputRange (array ng mga input value) at outputRange (array ng mga output value). Mga uri ng outputRange: mga numero (coordinate, transparency), mga string (mga anggulo ng pag-ikot na may 'deg'), mga hex na kulay ('#ff0000'), mga object ng pagbabago. Sinusuportahan ng interpolation ang easing at extrapolate — pag-uugali sa labas ng tinukoy na range (clamp, extend, identity). Halimbawa, sa drag gesture, ang posisyon ng daliri mula 0 hanggang 200 ay maaaring i-convert sa transparency mula 1 hanggang 0, na lumilikha ng epekto ng pag-fade sa swipe. Ang sistema ng interpolation ay nagbibigay-daan sa paglikha ng mga kumplikadong multi-step na animation: ang halaga na 0-0.5-1.0 ay maaaring magbago sa dilaw-kahel-pula.

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'],
});

Komposisyon ng animation: pagkakasunod-sunod at paralelismo

Sinusuportahan ng Animated API ang tatlong mode ng komposisyon ng animation: Animated.sequence, Animated.parallel, at Animated.stagger. Ang Animated.sequence ay nagpapatakbo ng mga animation nang isa-isa: ang bawat kasunod ay magsisimula pagkatapos makumpleto ang nauna. Ang Animated.parallel ay nagpapatakbo ng lahat ng animation nang sabay-sabay na may isang karaniwang callback ng pagkumpleto. Ang Animated.stagger ay nagpapatakbo ng mga animation na may pagkaantala sa pagitan ng pagsisimula ng bawat isa — naantalang pagsisimula, kapaki-pakinabang para sa paglikha ng mga wave effect. Ang mga komposisyon ay maaaring i-nest sa isa't isa: sequence ng parallel group o parallel ng sequence. Nagbibigay-daan ito sa paglikha ng mga kumplikadong chain: animation ng paglitaw ng mga elemento na may pagkaantala, parallel slide-in na may fade-in, pagkatapos sequence ng bounce at 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 at pagganap ng animation

useNativeDriver ay isang opsyon sa configuration ng animation na naglilipat ng buong lohika ng animation mula sa JavaScript thread patungo sa native UI thread. Kung walang useNativeDriver, ang mga animation ay isinasagawa sa pamamagitan ng JavaScript bridge: bawat pagbabago ng halaga ay ipinapadala sa native thread, na nagdudulot ng mga pagkaantala kapag ang JS thread ay na-load ng mga asynchronous na operasyon. Sa useNativeDriver = true, ang Animated.Value ay ina-update nang direkta sa native side, at ang JavaScript thread ay nananatiling libre para sa pagproseso ng mga kaganapan, mga kahilingan sa API, at React reconciliation. Limitasyon: sinusuportahan lamang ng useNativeDriver ang mga non-layout na katangian — opacity, transform, backgroundColor (sa pamamagitan ng PlatformColor). Para sa mga layout na katangian (width, height, top, left) kinakailangan ang NativeAnimatedModule o LayoutAnimation. Ayon sa React Native 0.76, lahat ng animated na katangian maliban sa layout-based ay sinusuportahan sa pamamagitan ng native driver. Ang useNativeDriver mode ay inirerekomenda para sa lahat ng animation kung saan posible — pinapataas nito ang FPS mula 30-40 hanggang sa matatag na 60.

Animation sa pamamagitan ng galaw: PanResponder at Gesture Handler

PanResponder ay isang built-in na sistema ng React Native para sa pagproseso ng galaw na mahusay na nakikipag-ugnayan sa Animated API. Ang PanResponder ay nagbibigay ng mga callback na onPanResponderMove at onPanResponderRelease, kung saan maaaring i-update ang Animated.Value batay sa posisyon ng daliri. Para sa mas kumplikadong mga galaw — swipe, pinch, rotation — gamitin ang library na react-native-gesture-handler, na gumagana nang sabay-sabay sa mga animation at tinitiyak ang 60 FPS kahit na sa multi-finger gestures. Ang Gesture Handler ay nagbibigay ng Animated.event — isang pamamaraan na direktang nag-uugnay ng galaw sa Animated.Value nang walang manu-manong pagproseso ng callback. Ang kombinasyon ng Gesture Handler + Animated API ay ang pamantayan ng industriya para sa mga interaktibong animation sa mga aplikasyon ng React Native.

Animated.event: pag-uugnay ng mga galaw sa mga halaga

Animated.event ay isang pamamaraan na nag-uugnay ng native na kaganapan (hal. gestureEvent) nang direkta sa Animated.Value. Hindi tulad ng manu-manong pagproseso sa callback, ang Animated.event ay gumagana nang sabay-sabay sa native thread at hindi nangangailangan ng JavaScript bridge para sa bawat frame. Nagbibigay ito ng maayos na animation kahit na sa mabilis na swipe. Ang Animated.event ay tumatanggap ng array ng mga mapping, kung saan ang bawat elemento ay nag-uugnay ng field ng kaganapan sa Animated.Value. Ang nested access ay sinusuportahan: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Mga halimbawa ng code na may Animated API

Tingnan natin ang tatlong praktikal na halimbawa ng paggamit ng Animated API sa mga proyekto ng React Native. Unang halimbawa — animation ng paglitaw ng card na may sequence na opacity + translateY. Pangalawang halimbawa — animation ng pagpintig ng button gamit ang spring. Pangatlong halimbawa — interaktibong drag element na may PanResponder. Lahat ng halimbawa ay gumagamit ng useNativeDriver = true at sumusunod sa pinakamahusay na kasanayan ng 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 }] }]
    }
  );
};

Animation ng pagpintig sa pamamagitan ng spring

Spring animation ay lumilikha ng natural na epekto ng pagpintig dahil sa pisikal na spring model. Ang pagtatakda ng mababang friction (2-4) at mataas na tension (100-150) ay nagbibigay ng malambot na oscillation na natural na kumukupas. Gamitin ang Animated.loop para sa walang katapusang pagpintig na may cycle na sequence: scale → 1.2, scale → 1.0. Ang pagpintig ay inilalapat para sa mga indicator ng pag-load, mga notification, at mga accent button.