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 ด้วยพารามิเตอร์ระยะเวลา หน่วงเวลาและ easing เมธอด spring ใช้แบบจำลองสปริงทางฟิสิกส์ด้วยพารามิเตอร์แรงเสียดทาน ความตึงและความเร็ว เมธอด decay สร้างแอนิเมชันด้วยความเฉื่อยและการหน่วง — มีประโยชน์สำหรับการปัดและการเลื่อน ทุกเมธอดส่งคืนอ็อบเจกต์ 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 ใช้แบบจำลองแอนิเมชันสปริงตามกฎของฮุค พารามิเตอร์ friction (แรงเสียดทาน) ควบคุมจำนวนการสั่น: ยิ่งแรงเสียดทานมาก การหยุดก็ยิ่งเร็วขึ้น พารามิเตอร์ 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') สี hexadecimal ('#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 เริ่มแอนิเมชันทั้งหมดพร้อมกันด้วยคอลแบ็กเสร็จร่วมกัน Animated.stagger เริ่มแอนิเมชันโดยมีหน่วงเวลาระหว่างแต่ละการเริ่ม — มีประโยชน์สำหรับสร้างเอฟเฟกต์คลื่น การรวมสามารถซ้อนกันได้: ลำดับของกลุ่มขนานหรือขนานของลำดับ ซึ่งช่วยให้สร้างโซ่ที่ซับซ้อน: แอนิเมชันการปรากฏขององค์ประกอบแบบหน่วงเวลา ขนาน 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 รองรับเฉพาะคุณสมบัติที่ไม่ใช่เลย์เอาต์ — opacity transform backgroundColor (ผ่าน PlatformColor) สำหรับคุณสมบัติเลย์เอาต์ (width height top left) ต้องใช้ NativeAnimatedModule หรือ LayoutAnimation ตาม React Native 0.76 คุณสมบัติแอนิเมชันทั้งหมดรองรับผ่านไดรเวอร์เนทีฟยกเว้นที่อิงตามเลย์เอาต์ แนะนำให้ใช้โหมด useNativeDriver กับทุกแอนิเมชันที่ทำได้ — มันเพิ่ม FPS จาก 30-40 เป็น 60 ที่มั่นคง

แอนิเมชันด้วยท่าทาง: PanResponder และ Gesture Handler

PanResponder เป็นระบบจัดการท่าทางในตัวของ React Native ที่ทำงานได้ดีกับ Animated API PanResponder ให้คอลแบ็ก onPanResponderMove และ onPanResponderRelease ที่สามารถอัปเดต Animated.Value ตามตำแหน่งนิ้ว สำหรับท่าทางที่ซับซ้อนขึ้น (ปัด หยิก หมุน) ใช้ไลบรารี react-native-gesture-handler ที่ทำงานแบบประสานกับแอนิเมชันและให้ 60 FPS แม้กับท่าทางหลายนิ้ว Gesture Handler มี Animated.event — เมธอดที่เชื่อมต่อท่าทางกับ Animated.Value โดยตรงโดยไม่ต้องจัดการคอลแบ็กด้วยตนเอง การรวมกันของ Gesture Handler + Animated API เป็นมาตรฐานอุตสาหกรรมสำหรับแอนิเมชันโต้ตอบในแอปพลิเคชัน React Native

Animated.event: การเชื่อมโยงท่าทางกับค่า

Animated.event เป็นเมธอดที่เชื่อมโยงอีเวนต์เนทีฟ (เช่น gestureEvent) กับ Animated.Value โดยตรง ต่างจากการจัดการด้วยตนเองในคอลแบ็ก Animated.event ทำงานแบบประสานในเส้นด้ายเนทีฟและไม่ต้องใช้สะพาน JavaScript สำหรับทุกเฟรม ทำให้ได้แอนิเมชันที่ลื่นไหลแม้ระหว่างการปัดที่รวดเร็ว 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 สร้างเอฟเฟกต์การเต้นพุ่งตามธรรมชาติโดยใช้แบบจำลองสปริงทางฟิสิกส์ การตั้งค่าแรงเสียดทานต่ำ (2-4) และความตึงสูง (100-150) ให้การสั่นที่นุ่มนวลซึ่งค่อย ๆ หยุดตามธรรมชาติ ใช้ Animated.loop สำหรับการเต้นพุ่งไม่สิ้นสุดด้วยวงจรลำดับ: scale → 1.2 scale → 1.0 การเต้นพุ่งใช้สำหรับตัวบ่งชี้การโหลด การแจ้งเตือนและปุ่มเน้น