Розбір анімованих значень у React Native без дробів

Розуміння того, як аналізувати анімовані значення в React Native

React Native's Анімований API надає потужні інструменти анімації, що дозволяє розробникам створювати плавні переходи та динамічні візуальні ефекти. Однак одна проблема, з якою часто стикаються розробники, це структурування виводу анімованих значень.

При роботі з Animated.Text, значення іноді можуть включати дробові цілі числа, що може не бути бажаним для всіх сценаріїв використання. Наприклад, представлення цілих значень, а не дробів, є типовою вимогою, особливо для індикаторів виконання та показників обсягу.

Ця публікація покаже, як інтерпретувати анімовані дані в React Native і форматувати їх як цілі числа. Ми розглянемо приклад того, як ви можете використовувати ці ідеї для вирішення типових проблем синтаксичного аналізу.

Ми також розглянемо альтернативи, такі як використання інших бібліотек або методологій, щоб отримати необхідний результат, якщо вбудований Анімований API не функціонує належним чином.

Оптимізація аналізу анімованих значень у React Native

Наведені вище приклади коду показують, як інтерпретувати та відображати анімовані значення як цілі числа в React Native за допомогою Анімований API. У першому прикладі ми використали методи React Native «Animated.sequence()» і «Animated.timing()», щоб анімувати число між заздалегідь визначеними рівнями. Ця послідовність анімації оновлює еталонне значення, яке потім відображається за допомогою компонента «Animated.Text». Однак анімовані значення зазвичай повертаються як числа з плаваючою комою, що ускладнює їх перетворення на цілі числа.

Рішення полягає у використанні «interpolate()» і «toFixed(0)», щоб переконатися, що числа анімації округляються до найближчого цілого перед показом. Інтерполяція дуже корисна в цьому випадку, оскільки вона дозволяє нам відобразити вхідний діапазон анімації (скажімо, від 0 до 1000) на визначений вихідний діапазон. Це гарантує, що наші значення залишатимуться в правильному діапазоні під час плавного переходу між рівнями. Використання 'toFixed(0)' встановлює десяткову точність до нуля, фактично округляючи число до цілого.

Друге рішення використовує Реанімований пакет, який надає більш повний API для обробки анімацій у React Native. Reanimated включає хуки, такі як 'useSharedValue()' і 'useAnimatedStyle()', які забезпечують більш ефективну та чуйну анімацію. У цьому методі ми оновлюємо анімоване значення шляхом об’єднання функцій «withSequence()» і «withTiming()», щоб забезпечити плавні переходи між станами. Основною перевагою тут є оптимізація продуктивності, яку забезпечує Reanimated, особливо під час роботи зі складнішими анімаціями.

В обох випадках керування помилками та оптимізація продуктивності є критичними. Ми гарантуємо ефективну роботу анімацій, пропускаючи власний драйвер (оскільки ми маємо справу з властивостями, які не трансформуються, як-от текст) і об’єднуємо анімації в серії. Крім того, усіма анімованими значеннями керують у життєвому циклі React за допомогою 'useRef()' і 'useEffect()'. Це гарантує, що анімація розпочинається й оновлюється належним чином під час встановлення чи оновлення компонента. Обидва підходи є модульними та придатними для багаторазового використання, що робить їх придатними для будь-якої програми, яка потребує плавних, недробових анімованих чисел.

import { Animated, Easing } from 'react-native';
import React from 'react';
export default function Milliliters() {
  const ML_LEVELS = [240, 50, 190];
  const ml = React.useRef(new Animated.Value(ML_LEVELS[0])).current;
  const ml_up_down = () => {
    Animated.sequence([
      Animated.timing(ml, {
        duration: 2000,
        toValue: ML_LEVELS[1],
        easing: Easing.bezier(0.55, 0.5, 0.45, 0.5),
        useNativeDriver: false,
      }),
      Animated.timing(ml, {
        duration: 2000,
        toValue: ML_LEVELS[2],
        easing: Easing.ease,
        useNativeDriver: false,
      }),
    ]).start();
  };
  return (
    <Animated.Text>{ml.interpolate({
      inputRange: [0, 1000],
      outputRange: ['0', '1000'],
      extrapolate: 'clamp',
    }).toFixed(0)}</Animated.Text>
  );
}

import Animated, { Easing } from 'react-native-reanimated';
import React from 'react';
export default function Milliliters() {
  const ML_LEVELS = [240, 50, 190];
  const ml = useSharedValue(ML_LEVELS[0]);
  const ml_up_down = () => {
    ml.value = withSequence(
      withTiming(ML_LEVELS[1], { duration: 2000, easing: Easing.bezier(0.55, 0.5, 0.45, 0.5) }),
      withTiming(ML_LEVELS[2], { duration: 2000, easing: Easing.ease })
    );
  };
  const animatedText = useAnimatedStyle(() => {
    return { text: Math.round(ml.value) };
  });
  return (
    <Animated.Text style={animatedText}></Animated.Text>
  );
}

Спрощення аналізу анімованих значень у React Native

Робота з анімацією в React Native, особливо в таких компонентах, як Animated.Text, вимагає належної обробки вихідних значень. Хоча React Native Animated API пропонує широкі можливості анімації, є випадки, коли анімовані значення призводять до чисел з плаваючою комою. Ці дробові значення можуть бути проблематичними в ситуаціях, коли потрібні лише цілі числа, наприклад індикатори виконання або лічильники. Щоб подолати це, розробникам потрібні способи перетворення або округлення анімованих даних, зберігаючи плавність анімації.

Одним із варіантів є використання interpolation техніка, яка зіставляє вхідні діапазони анімованих значень із вихідним діапазоном, надаючи вам контроль над тим, як відображаються анімовані значення. Комбінуючи вихідні діапазони з toFixed(0), ми гарантуємо, що значення, представлене в Animated.Text завжди є цілим числом. Ця комбінація зберігає цілісність анімації, одночасно забезпечуючи зручний і візуально точний результат.

Крім того, використовуючи такі бібліотеки, як Reanimated забезпечує більшу гнучкість роботи з анімованими даними. Reanimated підтримує більш ефективні та декларативні анімації, ніж вбудований API React Native, що робить його ідеальним вибором для складного керування анімацією. Використання shared values і функції, як withTiming і withSequence дозволяє розробникам підвищити продуктивність, мінімізувати затримку та досягти більш точного контролю над анімацією та її виводом.