Можно ли анимировать непрозрачность в React Native?


Введение

Непрозрачность означает прозрачность объекта или элемента, используемую для управления видимостью элемента.

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

Вы можете устанавливать значения непрозрачности от 0 до 1, что эквивалентно от 0% до 100%. Так, например, мы можем установить значение непрозрачности 0,1 или 0,5 в зависимости от того, какой уровень видимости или прозрачности мы хотим получить, или от того, какое сообщение передается пользователю в данный момент.

Преимущества анимации непрозрачности

  • Одна из основных важностей анимирования этого значения при изменении заключается в том, чтобы обеспечить эффект плавного перехода для глаз пользователя, в основном не меняя визуальные эффекты в непривлекательной манере. Это может иногда раздражать пользователя.
  • Дайте пользователю возможность увидеть эффект от своего действия, а не заставляйте его гадать, было ли оно вообще.
  • Создайте связь между каждым состоянием вашего приложения.
  • это помогает легко передать или донести до пользователя суть.
  • ее можно использовать в качестве руководства для пользователя, когда ему необходимо выполнить какие-то действия. Например, кнопка, которая может оставаться неактивной до тех пор, пока некоторые поля формы не будут заполнены и проверены. Это часто реализуется путем размытия компонента кнопки до тех пор, пока эти действия или требования не будут выполнены.

Необходимые условия

  • Базовые знания JavaScript
  • Базовые знания React
  • Базовые знания о выполнении команд CLI
  • Node.js и npm установлены на вашей машине
  • XCode или Android Studio, установленные на вашем компьютере
  • Некоторый опыт работы с React Native (рекомендуется, но не обязательно)

Начало работы

Давайте создадим новый проект expo с помощью этой команды:

npx create-expo-app rn-opacity
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Итак, давайте запустим наше приложение, используя эту команду yarn ios для iOS и yarn android для android устройств соответственно, мы увидим, как содержимое компонента появится на нашем экране.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Вход в полноэкранный режим Выход из полноэкранного режима

Создание пользовательского интерфейса

Можем ли мы добавить структуру компонента для демонстрации нашего примера? Да, это возможно!

В нашем исходном коде есть оранжевая рамка, где мы используем компонент View для построения пользовательского интерфейса и стилизуем backgroundColor под orange.

мы импортируем библиотеку react в строке 1.

В строке 2 мы импортируем StyleSheet для написания внешних стилей, View для построения нашего пользовательского интерфейса и компонент кнопки TouchableWithoutFeedback для достижения взаимодействия или срабатывания переключения состояния.

import React from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, View, TouchableWithoutFeedback } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => null}>
        <View
          style={styles.box}
        ></View>
      </TouchableWithoutFeedback>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
            backgroundColor: "orange",
            height: 200,
            width: 200,
            opacity: 0.5,
          }
});

Вход в полноэкранный режим Выход из полноэкранного режима

Собираем все вместе

В нашем файле App.js ниже мы добавили довольно много изменений, давайте пройдемся по строкам кода для пояснения.


import React, { useRef } from "react";
import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Animated,
} from "react-native";

export default function App() {

  const opacityAnimation = useRef(new Animated.Value(0.5)).current;


  const opacityStyle = { opacity: opacityAnimation };

  const animateElement = () => {

    Animated.timing(opacityAnimation, {
      toValue: 0,
      duration: 1500,
      useNativeDriver: true
    }).start(() => {
      Animated.timing(opacityAnimation, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true
      }).start()
    })
  };

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => animateElement()}>
        <Animated.View style={[styles.box, opacityStyle]}></Animated.View>
      </TouchableWithoutFeedback>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    backgroundColor: "orange",
    height: 200,
    width: 200,
    opacity: 0.5,
  },
});

Вход в полноэкранный режим Выход из полноэкранного режима

Мы объявляем переменную opacityAnimation для хранения значения Animated.value, которое установлено в 0.5. Это означает, что значение непрозрачности нашего бокса по умолчанию при рендеринге равно 0.5.

В строке 13 нашего кода мы также объявляем переменную для хранения объекта стиля непрозрачности, который мы будем изменять динамически, и устанавливаем свойство opacity в значение opacityAnimation.

В функции animateElement мы обращаемся к методу Animated.timing. Timing задает анимацию перехода одного значения в другое за определенный период, поэтому сигнатура функции opacityAnimation, а затем объект конфигурации. В нашем объекте config у нас есть следующие опции:

Чтобы вызвать изменение, нам нужно вызвать метод start, как это сделано в нашем исходном коде.

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

Вызов функции animateElement в нашем компоненте кнопки TouchableWithoutFeedback. Где она передается в реквизит функции onPress.

Щелчок в области поля запустит нашу анимацию, позволяя ей затухать от 0.5 до 0 и затем затухать от 0 до 1 в течение 1500 миллисекунд при обоих вызовах.

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

Резюме

Хорошим примером применения этого метода является компонент «Кнопка», компонент «Флажок» и компонент «Радиокнопка». Вы найдете эту реализацию полезной для достижения визуальных эффектов, привлекательных для пользователя при взаимодействии с вашими приложениями.

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

Будьте здоровы!!!

Оцените статью
devanswers.ru
Добавить комментарий