Веб-анимация всегда горячая тема. Для разработки приложений REVIETJS у вас есть огромный массив вариантов для реализации анимации. Вы можете увидеть примеры в Интернете, которые демонстрируют свои возможности, такие как показанные здесь:
Анимация – React.js Примеры
Для целей этой статьи я составил несколько вариантов, доступных для вас (здесь гораздо больше 5). Мой список методов анимации React перечислены ниже::
Метод CSS – Используйте основные стили CSS, поэтому никакое кодирование реагирования не требуется
React-Transition-Group – Это дополнительный компонент, который имеет основные анимации CSS и переходы.
Движение в реакцию – Это популярная библиотека для реагирования. Созданные анимации выглядят естественными и использовать концепции физики для обеспечения реалистичного ощущения
React-Spring – является еще одной физической анимационной библиотекой, которая имеет расширенные функции анимации движения.
Так что зная, какие библиотеки/методы доступны в RACT.JS, я решил переписать мой предыдущий проект «Как создать анимированный вход в систему входа в систему веб-страницы с HTML, CSS3 и JavaScript в Rect.js и React-Spring.
Я сделал урок видео на этом, вы можете увидеть полное видео здесь:
Создание анимированного входа в систему регистрации в Rect.js и React-Spring.
Дизайн и макет
Для анимации у меня в прошлом использовали метод CSS и React-Transition-Group, так что на этот раз я решил исследовать что-то более продвинутое. По этой причине я выбрал Reactime-Spring в качестве основного метода для реализации анимации для этой реагированной демонстрации. Конструкция демонстрации показана ниже:
Дизайн может быть разбит в сетку, подобную сетке, подобную сетке со ссылкой на HTML-элементы, которые нам нужно для достижения этой макеты, это особенно полезно, потому что это позволяет мне определить, какие разделы/компоненты/контейнеры мне понадобится в моем реагировании приложение. Смотрите ниже для разрыва:
Из вышесказанного можно записать скелетную макет в HTML, как показано ниже, обратите внимание, что это та же структура, что и мой предыдущий Демо Отказ
Примечание. Я использовал JSX «ClassName», кроме этого, его просто стандартный HTML.
Для анимационной стороны вещей мы будем анимировать позиции формы входа в систему и форму регистрации. Формы состоят в том, чтобы сосредоточиться в зависимости от кнопки, который был нажал, т. Е. Зарегистрироваться или кнопка входа в систему. Кнопки будут иметь исчезновение исчезновенной нижней границы, которая переключает между щелчками кнопок.
Наша структура приложения
После создания приложения Boeterplate с помощью приложения Create-React-App и выполните необходимую очистку вверх, мы можем использовать вышеупомянутый код скелета в качестве основной структуры нашего приложения, как показано ниже:
import React, { useState } from "react";
import "./App.css"; function App() { return ( );
}
Далее установите React-Spring, набрав команду «Установить React-Spring», затем в App.js убедитесь, что у вас есть следующие команды импорта для Reactimepress.
import React, { useState } from "react";
import { useSpring, animated } from "react-spring"; // react-spring
import "./App.css";
Примечание. Компонент ISISPRING и Animated загружен из модуля React Spring.
Немного о основных основаниях
Ссылаясь на API React-Spring , простая анимация, которая исчезает, при нажатии на кнопку будет выглядеть:
import React, { useState } from "react";
import { useSpring, animated } from "react-spring"; function App() { const [toggle, setToggle] = useState(true); const props = useSpring({ opacity: toggle ? 1 : 0, }); return ( This content will fade in and fade out when you press the toggle button );
} export default App;
Концепция вот что мы определяем нашу весеннюю анимацию для непрозрачности с чем-то вроде:
const props = useSpring({ opacity: toggle ? 1 : 0, });
Это действует как крючок и будет выполняться, когда значение переключаемых изменений IE, когда кнопка нажала. Обратите внимание, что у нас есть тройное выражение «переключатель? 1: 0», это механизм тумблера. Тогда в поле зрения мы делаем два вещи, сначала префикс HTML-элемент, который мы хотим анимировать с «анимированным», а затем установить свойство стиля в анимацию, которую мы определены в «реквизитах»:
This content will fade in and fade out when you pree toggle button
Наше представление приложений с анимированными обертками ….
Теперь мы знаем, как анимировать отдельные элементы, мы можем переписать наше представление о нашем демонстрационном приложении, чтобы включить анимированные обертки и анимированные свойства для стиля:
И анимированные свойства, которые мы кормите в стили, будут:
const loginProps = useSpring({ // animatimg login form left: registrationFormStatus ? -500 : 0 }) const registerProps = useSpring({ // animatimg register form left: registrationFormStatus ? 0 : 500 }) // animatimg buttons const loginBtnProps = useSpring({borderBottom: registrationFormStatus ? 'solid 0px transparent' : 'solid 2px #1059FF'}) const registerBtnProps = useSpring({borderBottom: registrationFormStatus ? 'solid 2px #1059FF' : 'solid 0px transparent'})
Как вы можете видеть, мы переписываем левое положение форм. ВходныеPROPS содержит свойство анимации для формы входа в систему. Форма входа в систему предоставляется левое положение -500, если кнопка регистрации нажала, поэтому выходит из представления, потому что она находится в области переполнения. Но когда кнопка входа нажата, форма входа в систему восстанавливается в положение 0 и снова видно. Константные проектныеProops содержит значения анимации для регистрационной формы. Регистрационная форма перемещается в положение 500, чтобы скрыть его и переместиться в положение 0, чтобы скользить в фокус. Константы LoginBTNPROPS и REGICALTPPROPS содержат анимационные свойства для двух кнопок.
Заключение
Я только коснулся сервиса с Reacty-Spring, и я подумал, что это довольно легко реализовать наш простой пример. Мы использовали крючок «Reaspring ()», чтобы оживить один элемент. Но React-Spring предлагает гораздо более сложные крючки, см. Список, указанный на документах API React-Spring:
- Repringpring One Spring, перемещает данные из A -> B
- ISPRINGS MEVILE SPRIONS, для списков, где каждая пружина перемещает данные из A -> B
- Потребитель несколько пружин с одним набором данных, одна весной следует или следит за другим
- Usetransition для монтирования/размонтирования переходов (списки, где добавлены товары/удалены/обновлены)
- USECHAIN в очередь или цепь несколько анимаций вместе