การทำงานของ Animations ใน React Native

React Native มีคอมโพเนนต์ Animation ช่วยเพิ่มความโต้ตอบให้กับคอมโพเนนต์ต่างๆ เช่น View, Text, Image, ScrollView, FlatList, SectionList

React Native มี animation 2 ประเภท:

• Animated API
• LayoutAnimation

Animated API

Animated API ให้ animation แบบ time-based ตาม input/output ตัวอย่างนี้จะเปลี่ยน width และ height ของกล่องแบบไดนามิกด้วย animated timing API

การนำเข้า

import { Animated } from 'react-native'

การกำหนดค่า Animation

Animated.timing() ใช้ easing functions และค่าที่กำหนดจะถูก animate ตามเวลา Default easing คือ easeInOut สามารถเปลี่ยนได้

Animated.timing(animateParam, {
  toValue: 100,
  easing: easingFunc,
  duration: timeInMs
}).start();

ในตัวอย่างจะ animate width และ height ของ View เริ่มต้นค่าใน componentWillMount:

componentWillMount = () => {
  this.animatedWidth = new Animated.Value(50);
  this.animatedHeight = new Animated.Value(100);
}

เพิ่ม Animated.timing:

Animated.timing(this.animatedWidth, {
  toValue: 200,
  duration: 1000
}).start();

Animated.timing(this.animatedHeight, {
  toValue: 500,
  duration: 500
}).start();

ตัวอย่างเต็มรูปแบบ

import React, { Component } from 'react';
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native';

class Animations extends Component {
  componentWillMount = () => {
    this.animatedWidth = new Animated.Value(50);
    this.animatedHeight = new Animated.Value(100);
  };

  animatedBox = () => {
    Animated.timing(this.animatedWidth, {
      toValue: 200,
      duration: 1000
    }).start();

    Animated.timing(this.animatedHeight, {
      toValue: 500,
      duration: 500
    }).start();
  };

  render() {
    const animatedStyle = {
      width: this.animatedWidth,
      height: this.animatedHeight
    };

    return (
      
        
      
    );
  }
}

export default Animations;

const styles = StyleSheet.create({
  container: {
    padding: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  box: {
    backgroundColor: 'gray',
    width: 50,
    height: 100
  }
});

ผลลัพธ์

แตะกล่องสีเทาเพื่อดู animation

LayoutAnimation API

LayoutAnimation ให้การควบคุมมากกว่า Animated API อนุญาตให้กำหนดค่า create/update animations แบบ global สำหรับรอบ render/layout ถัดไป

การนำเข้า

import { LayoutAnimation } from 'react-native';

ตัวอย่าง: ใช้ LayoutAnimation

สำหรับ Android ต้องเพิ่ม:

UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

import React from 'react';
import {
  NativeModules,
  LayoutAnimation,
  Text,
  TouchableOpacity,
  StyleSheet,
  View,
} from 'react-native';

const { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

export default class App extends React.Component {
  state = {
    w: 50,
    h: 50,
  };

  animatecircle = () => {
    LayoutAnimation.spring();
    this.setState({ w: this.state.w + 10, h: this.state.h + 10 });
  };

  render() {
    return (
      
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  circle: {
    width: 200,
    height: 200,
    borderRadius: '50%',
    backgroundColor: 'green',
  },
});

ผลลัพธ์

แตะวงกลมเพื่อดู animation

ข้อแนะนำเพิ่มเติม

• ปัจจุบันแนะนำให้ใช้ Animated.timing() กับ useNativeDriver: true เพื่อประสิทธิภาพดีกว่า
• สำหรับ animation ซับซ้อน ควรพิจารณา react-native-reanimated (v2+)
• LayoutAnimation เหมาะสำหรับ animation แบบ layout changes เรียบง่าย