React Native คือ ตอนที่ 11 : แอนิเมชั่น (Animations)

1. ทำความเข้าใจพื้นฐาน
2. ทำความเข้าใจกับ Animated API
   2.1 Animated Values
   2.2 Animated Components
   2.3 Interpolations
   2.4 Animation Types
3. เริ่มต้นใช้งานแอนิเมชั่น
4. การรวม (Combining) แอนิเมชั่น
5. API เค้าโครงภาพเคลื่อนไหว (LayoutAnimation)

การทำแอพ React Native และทำแอพมือถือได้กลายเป็นส่วนสำคัญของโลกดิจิทัลสมัยใหม่ React Native ซึ่งเป็นเฟรมเวิร์กอันทรงพลังที่สร้างโดย Facebook ได้กลายเป็นผู้นำในอุตสาหกรรม ช่วยให้นักพัฒนาสามารถทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มได้อย่างง่ายดายและมีประสิทธิภาพเป็นพิเศษ บทความนี้จะมุ่งเน้นไปที่หนึ่งในแง่มุมที่น่าสนใจที่สุดของการทำแอพ React Native และทำแอพมือถือ: ภาพเคลื่อนไหว

ภาพเคลื่อนไหวสามารถปรับปรุงประสบการณ์ผู้ใช้แอปพลิเคชันของคุณได้อย่างมาก พวกเขาสามารถแนะนำผู้ใช้ แสดงความคิดเห็น รักษาความต่อเนื่อง และเพิ่มสัมผัสสุนทรียะที่น่าพึงพอใจให้กับแอปของคุณ React Native มีชุดเครื่องมือที่ทรงพลังและมีประสิทธิภาพสำหรับการสร้างแอนิเมชั่น จึงทำให้คุณสามารถสร้างประสบการณ์การใช้งานที่ไดนามิกและมีส่วนร่วมมากขึ้น

1. ทำความเข้าใจพื้นฐาน

ระบบแอนิเมชันของ React Native ช่วยให้คุณควบคุมการทำงานของแอนิเมชันได้อย่างมหาศาล API หลักสองรายการมีให้ตั้งแต่แกะกล่อง: Animated และ LayoutAnimation

Animated API มีความหลากหลายมากขึ้นและสามารถใช้กับแอนิเมชั่นประเภทต่างๆ มันสร้างขึ้นจากฝั่งเนทีฟเพื่อเพิ่มประสิทธิภาพและมี JavaScript API เพื่อมอบความยืดหยุ่นที่มากขึ้น

ในทางกลับกัน LayoutAnimation API นั้น มีความหลากหลายน้อยกว่า แต่อนุญาตให้สร้างภาพเคลื่อนไหวด้วยการกำหนดค่าขั้นต่ำ มันทำให้การเปลี่ยนแปลงเลย์เอาต์ที่เกิดขึ้นในโครงสร้างคอมโพเนนต์เคลื่อนไหวโดยอัตโนมัติ

2. ทำความเข้าใจกับ Animated API

Animated API อาจซับซ้อนเล็กน้อยในการทำความเข้าใจในขั้นต้น มีสี่แนวคิดหลักที่เกี่ยวข้อง: ค่าเคลื่อนไหว ส่วนประกอบเคลื่อนไหว การแก้ไข และประเภทของภาพเคลื่อนไหว

2.1 Animated Values

ค่าแอนิเมชั่นเป็นหัวใจของแอนิเมชั่นใน React Native โดยพื้นฐานแล้วเป็นวัตถุที่สามารถเก็บได้ทั้งเลขตัวเดียว ( Animated.Value) หรือเลขคู่ ( Animated.ValueXY)

2.2 Animated Components

ไลบรารีแอนิเมชันของ React Native สามารถทำให้คอมโพเนนต์ทั่วไปเคลื่อนไหวได้โดยการล้อมด้วยคำนำหน้าแอนิเมชัน ตัวอย่างเช่น คอมโพเนนต์ View ปกติจะกลายเป็น Animated.View คอมโพเนนต์ Text จะกลายเป็น Animated.Text เป็นต้น

2.3 Interpolations

Interpolations ช่วยให้สามารถแปลช่วงอินพุตเป็นช่วงเอาต์พุตได้ ซึ่งให้ความยืดหยุ่นสูง คุณสามารถแปล ปรับขนาด หมุน และดำเนินการแปลงอื่นๆ บนส่วนประกอบแอนิเมชันของคุณโดยใช้ Interpolations

2.4 Animation Types

React Native มีแอนิเมชั่นหลายประเภท เช่น Spring, Decay และ Timing แต่ละอันมีเอฟเฟกต์เฉพาะที่สามารถเลือกได้ตามประเภทของการโต้ตอบที่คุณต้องการ

3. เริ่มต้นใช้งานแอนิเมชั่น

ในการสร้างแอนิเมชั่น คุณต้องทำตามขั้นตอนสี่ขั้นตอน:

1. สร้างค่าเคลื่อนไหว (Animated value) : คุณเริ่มต้นด้วยการสร้างค่าเคลื่อนไหว โดยทั่วไปจะทำในตัวสร้างส่วนประกอบหรือภายใน useStatehook
2. แม็พค่าแอนิเมชันกับสไตล์ (Map the Animated value to a style) : จากนั้นคุณสามารถสอดแทรกค่าแอนิเมชันกับคุณสมบัติสไตล์ของคอมโพเนนต์แอนิเมชันของคุณได้
3. สร้างแอนิเมชัน : ใช้หนึ่งในประเภทแอนิเมชันที่ไลบรารีแอนิเมชันมีให้เพื่อสร้างแอนิเมชัน
4. เริ่มแอนิเมชัน : เรียกใช้start()ฟังก์ชันบนแอนิเมชันเพื่อเริ่มแอนิเมชัน

นี่คือตัวอย่างง่ายๆ ของเอฟเฟ็กต์ (fading-in):

import React, { useEffect, useRef } from 'react';
import { Animated, Text, View } from 'react-native';

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0

  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 2000,
      }
    ).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim, // Bind opacity to animated value
      }}
    >
      {props.children}
    </Animated.View>
  );
};

// Usage
export default () => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
      </FadeInView>
    </View>
  );
};

4. การรวม (Combining) แอนิเมชั่น

React Native ยังให้คุณรวมแอนิเมชั่น สามารถทำได้สองวิธี: ลำดับและขนาน

Animated.sequence ใช้อาร์เรย์ของภาพเคลื่อนไหวและเริ่มตามลำดับ เมื่ออนิเมชั่นจบลง นิเมชั่นถัดไปก็เริ่มต้นขึ้น

Animated.parallel ยังใช้อาร์เรย์ของแอนิเมชั่น แต่เริ่มทั้งหมดพร้อมกัน

5. API เค้าโครงภาพเคลื่อนไหว (LayoutAnimation)

หากคุณต้องการทำให้ส่วนประกอบเคลื่อนไหวเมื่อใดก็ตามที่ประกอบ เลิกต่อเชื่อม หรือเปลี่ยนแปลงเนื่องจากการอัปเดต คุณสามารถใช้ LayoutAnimation API เป็นทางเลือกที่ซับซ้อนน้อยกว่า Animated API ช่วยให้คุณสร้างภาพเคลื่อนไหวที่สวยงามด้วยโค้ดเพียงไม่กี่บรรทัด

นี่คือตัวอย่างง่ายๆ:

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, LayoutAnimation, Platform, UIManager } from 'react-native';

if (
  Platform.OS === 'android' &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

export default function LayoutAnimationExample() {
  const [width, setWidth] = useState(100);

  const animateLayout = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setWidth(width === 100 ? 200 : 100);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TouchableOpacity onPress={animateLayout}>
        <View style={{ width, height: 50, backgroundColor: 'orange' }}>
          <Text>Animate Layout</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

---

แอนิเมชันเป็นเครื่องมืออันทรงพลังสำหรับการสร้างประสบการณ์เชิงโต้ตอบ การมีส่วนร่วม และไดนามิกในแอปบนอุปกรณ์เคลื่อนที่ ในขณะที่การสร้างแอนิเมชั่นใน React Native มีความซับซ้อนเล็กน้อย แต่การทำความเข้าใจแนวคิดหลักและ API ทำให้กระบวนการราบรื่นขึ้นมาก ฝึกฝนการสร้างแอนิเมชั่นในโครงการ React Native ของคุณเพื่อทำให้พวกมันมีชีวิตและสร้างประสบการณ์การใช้งานที่น่าดึงดูดยิ่งขึ้น ไม่ว่าคุณจะเป็นมือใหม่หรือนักพัฒนาที่มีประสบการณ์ ก็มีพื้นที่ให้เติบโตและเรียนรู้เกี่ยวกับแอนิเมชันใน React Native อยู่เสมอ

เริ่มต้นวันนี้และทำให้แอพ React Native ของคุณมีชีวิตชีวาด้วยเทคนิคแอนิเมชั่นเหล่านี้ ด้วยการใช้พลังของแอนิเมชั่น คุณจะสามารถทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มไดนามิกคุณภาพสูงที่ดึงดูดและสร้างความพึงพอใจให้กับผู้ใช้

---

React Native คืออะไร

React Native คือ ตอนที่ 10 : โมดูลและส่วนประกอบแบบเนทีฟ (Native Modules and Components)