Анимации: руководство для начинающих по масштабированию преобразования в React-Native

От приложений электронной коммерции до финансовых приложений и даже до мобильных приложений криптовалюты анимация используется для сообщения пользователям результатов действий.

Анимация в значительной степени способствует сложности, наблюдаемой в последних мобильных приложениях. Это подводит нас к одному из свойств анимации, которое широко используется в мобильных приложениях, свойству Scale Transform.

Масштабирование — это изменение размеров элемента. он включает в себя увеличение и уменьшение диапазона значений по осям X и Y компонента. Размеры X и Y можно масштабировать отдельно или вместе в зависимости от требований эффекта движения. Эффект масштабирования привлекателен, если реализован должным образом. Масштаб — это способ управления размером элемента путем увеличения и уменьшения элемента.

Кроме того, масштабное преобразование можно использовать для создания анимаций с переворотом в React-Native.

Эта статья представляет собой удобное руководство, которое поможет новичкам понять преимущества и использование свойства Scale в React Native. В конце руководства вы сможете реализовать анимацию преобразования масштаба и будете уверены, что сможете изучить более интересные способы анимации элементов с помощью этого свойства самостоятельно.

Чтобы следовать этому руководству, вам нужно будет настроить свою среду перед началом работы. Убедитесь, что соблюдены приведенные ниже требования, чтобы вы могли кодировать вместе.

Предпосылки

Набор инструментов и технологий, необходимых для прохождения этой статьи:

знание JavaScript
знание Реакта
знание запуска инструкций командной строки/терминала
На вашей машине установлены Node.js и npm
Установить Expo CLI и Expo Go
XCode или Android Studio установлены на вашем компьютере.
Некоторый опыт работы с React Native.

Если вы новичок в экосистеме, вы можете начать с Руководства по React Native.

Настроив среду, вы можете перейти к разделу «Начало работы».

Начиная

Откройте окно командной строки и перейдите туда, куда вы хотите сохранить приложение из командной строки. Введите следующую команду, чтобы создать новое приложение:

npx create-expo-app rn-scale

После создания приложения перейдите в папку rn-scale, вы увидите пару файлов, созданных в корне проекта.

В корне приложения находится App.js файл, содержащий стартовый код.

Для запуска приложения выполните в терминале следующую команду:

Для iOS-устройств:

yarn ios

Для Android-устройств:

yarn android

Выполнение этих команд сообщит компилятору, созданному для реагирования, связать код и отобразить пользовательский интерфейс.

Это то, что вы должны увидеть на экране

Теперь, когда вы можете запускать приложение локально, давайте рассмотрим концепцию, которая может помочь понять, что такое масштабирование элемента.

Непосредственная анимация ширины и высоты

Выше, во вводной части, было сказано, что трансформация масштаба — это изменение размера элемента или компонента. Изменение ширины и высоты элемента часто является результатом преобразования масштаба. Один из способов изменить ширину и высоту в React Native — напрямую управлять свойствами стиля ширины и высоты.

Взгляните на демонстрационный пример ниже:

В демоверсии при щелчке по желтому квадрату желтая область увеличивается в два (2) раза по сравнению с первоначальным размером, это делается путем манипулирования шириной и высотой.

Вот код, который делает это для демонстрации выше:

import React, { useRef } from "react";
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Animated,
} from "react-native";
export default function AnimatedWidthHeight() {
  const scaleAnimate = useRef(new Animated.Value(100)).current;
  const animateElement = () => {
    Animated.timing(scaleAnimate, {
      toValue: 200,
      duration: 2000,
      useNativeDriver: false,
    }).start();
  };
  const animationStyle = {
    width: scaleAnimate,
    height: scaleAnimate,
  };
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => animateElement()}>
        <Animated.Image
          source={require("../assets/home.jpg")}
          style={[ animationStyle ]}
        ></Animated.Image>
      </TouchableWithoutFeedback>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#4b0082",
  },
});

В верхней части кода импортируются пакет React и хук useRef. Под первой строкой из пакета react-native вводятся импорты для построения пользовательского интерфейса и реализации логики.

Объяснение используемых реагирующих нативных библиотек:

StyleSheet: для внутреннего стиля пользовательского интерфейса.
View: для создания пользовательского интерфейса. Элемент View используется в качестве контейнера для всего пользовательского интерфейса в приведенном выше коде.
TouchableWithoutFeedback: элемент кнопки, который можно нажать для запуска анимации. Кроме того, реквизит onPress на TouchableWithoutFeedback используется для вызова функции animateElement().
Animated: это библиотека, используемая для анимации элементов в этом уроке.

Примечание. Для анимации элементов в React Native можно использовать другие библиотеки анимации.

scaleAnimate содержит значение Animated.Value. Animated.Value — это изменяемое единственное значение, которое можно изменить без повторного рендеринга компонента.

Animated.Value заключен в useRef call, поэтому он создается только один раз при первом рендеринге компонента. Animated.Value дает значение по умолчанию 100.

В animateElement(), Animated.timing будет анимировать scaleAnimate с 100 на 200, передавая toValue , duration и useNativeDriver в качестве значений конфигурации.

Используя метод Animated.timing, ширина и высота анимируются от 100 до 200 соответственно. start() — это триггер для запуска анимации в компоненте класса Animated.

Кроме того, переменная animatedStyle содержит свойства стиля ширины и высоты, которые динамически изменяются при анимации компонента.

В пользовательском интерфейсе элемент Animated.Image трансформируется в приведенной выше демонстрации. Animated.Image — это компонент Image, обернутый компонентом класса Animated из родной библиотеки React, что делает компонент Image анимируемым.

Анимация свойств ширины и высоты влияет на макет в React Native, хотя в некоторых случаях это может быть очень полезно, но имеет свои особенности.

Этот метод масштабирования пикселей в React Native неэффективен, когда задействовано огромное количество элементов. Из нативной документации вы найдете хорошую рекомендацию о том, как этого можно достичь.

Эффективное масштабирование элементов

В соответствии с нативной документацией рекомендуется масштабировать элементы с помощью свойства стиля transform: [{scale}].

Вот демонстрация масштабирования элементов с использованием свойства преобразования масштаба:

В приведенной выше презентации нажатие на область изображения трансформирует изображение, увеличивая и уменьшая масштаб в пределах диапазона значений.

Это похоже на предыдущий пример, который мы видели при анимации ширины и высоты, разница здесь в том, что свойство масштаба используется для изменения размера элементов, что более эффективно и эффективно при работе с большим объемом данных.

Вот код ниже, который делает это:

import React, { useRef, useState } from "react";
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Animated,
} from "react-native";
export default function Scale() {
  const scaleAnimate = useRef(new Animated.Value(0)).current;
  const [isToggle, setIsToggle] = useState(false);
  const scaleInterpolate = scaleAnimate.interpolate({
    inputRange: [0, 1],
    outputRange: [3, 2],
  });
  const animateElement = () => {
    const toValue = isToggle ? 0 : 1;
    Animated.timing(scaleAnimate, {
      toValue: toValue,
      duration: 2000,
      useNativeDriver: true,
    }).start(() => {
      setIsToggle(!isToggle);
    });
  };
  const animationStyle = {
    transform: [
      {
        scale: scaleInterpolate,
      },
    ],
  };
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => animateElement()}>
        <Animated.Image
          source={require("../assets/home.jpg")}
          style={[{ height: 100, width: 100 }, animationStyle]}
        ></Animated.Image>
      </TouchableWithoutFeedback>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#4b0082",
  },
});

Существует несколько отличий между исходным кодом разделов Animated Width и Height и приведенным выше.

Объяснение метода преобразования масштаба:

На хуке useState происходит деструктуризация массива, присвоение значения из хука переменной isToggle и функции setIsToggle. Это полезно для отслеживания изменений и обновления состояния приложения.
Переменная scaleInterpolate содержит результирующее значение функции .interpolate. Используя интерполяцию, значение inputRange изменяется с 0 на 1, это интерполирует значение с 3 на 2 в outputRange.
Внутри animateElement() определена переменная toValue для хранения результатов условной проверки, присваивающая ей значение 0, когда isToggle равно true, или 1, когда false. Эти значения сопоставляются со значениями inputRange.
Вы заметите, что значение isToggle обновляется при вызове метода start() с помощью функции setIsToggle, деструктурированной из хука useState.
В объектной переменной animationStyle свойство transform может принимать массив объектов, разделенных запятой. Для того, чтобы изменить размеры области изображения, свойство transform принимает массив с объектом, где свойство scale устанавливается в возвращаемое значение из scaleInterpolate.

Примечание. Свойство преобразования также может принимать такие значения, как scaleX и scaleY. Свойство scaleX используется для преобразования элементов по горизонтальной оси, а свойство scaleY — для преобразования элементов по вертикальной оси. Свойство scale преобразует элементы как по оси X, так и по оси Y.

Подводя итоги

В этой статье вы узнали, как масштабировать элементы в React Native. В этой статье с практическими рекомендациями было рассмотрено следующее:

Определение и важность масштабирования элементов в мобильных приложениях.
Создайте и настройте проект React Native локально
Изучены анимации масштабирования по ширине и высоте без использования свойства преобразования масштаба.
Исследовано влияние анимации размеров с помощью свойств ширины и высоты на производительность.
Также показано, как анимировать размеры с помощью свойства преобразования масштаба.

Будем признательны за ваши комментарии и предложения по поводу учебника в поле для комментариев.

Кроме того, вы можете связаться со мной в Твиттере @ayopaulofficial и в LinkedIn по адресу Paul Oloyede.

Спасибо за прочтение.