udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
React Animation Project SCSS
Продолжительность
2 ч 16 мин
Категория
React.js
Количество уроков
13 Видео
Дата добавления
27 дек. 2023 г., 18:33
Язык
Русский
Дата выхода
16 июн. 2023 г., 01:00
В этом курсе мы начнем с создания компонента экрана-заставки, а затем перейдем к разработке компонента анимированного элемента.
Мы определим наш первый набор анимаций с использованием Sass, стремясь сделать его максимально модульным, чтобы мы могли импортировать все созданные анимации или только те, которые нам нужны. После определения анимаций, мы импортируем их в наш проект и внесем изменения в нашу заставку и анимированный элемент, так чтобы заставка исчезала через определенное время.
Далее мы приступим к разработке настраиваемых параметров, начнем с создания нового файла, который будет импортирован во все наши различные анимации и содержать общие настройки.
После определения наших параметров анимации, мы добавим нашу первую анимацию, которая будет отвечать за затухание и появление элемента. Все анимации будут написаны как отдельные миксины, чтобы при необходимости мы могли импортировать их по отдельности.
Мы создадим компонент заставки и активируем нужную нам анимацию, определенную в логике AnimatableItem.
Разумеется, мы начнем с создания нового проекта для нашей работы. Для этого используется create-react-app, а также добавлена простая утилита JavaScript для условного соединения имен классов.
React — самая популярная библиотека для разработки веб-приложений и один из наиболее востребованных навыков для JavaScript-разработчика на сегодняшний день.
Основное внимание в этом курсе уделяется практической разработке приложений на React. Это означает, что мы рассмотрим не только эффективное использование самого React, но и целую экосистему инструментов и библиотек, необходимых для создания полноценного пользовательского интерфейса (UI) приложения.
Разрабатывая реальные приложения, мы изучим самые важные инструменты в экосистеме React:
- React
- Animation
- SCSS
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
-
Урок 1. 00:11:48#1 Создание анимированной заставки – TheSplashScreen
-
Урок 2. 00:24:09#2 Определение анимации затухания SCSS
-
Урок 3. 00:07:00#3 useRef лучше, чем useState улучшаем перфоманс
-
Урок 4. 00:09:00#4 React + RequestAnimationFrame
-
Урок 5. 00:14:43#5 Выполнение анимации на Реакт без "волшебных строк"
-
Урок 6. 00:05:14#6 Стадии анимации - AnimationStage.Complete
-
Урок 7. 00:09:18#7 Рефакторинг/замена ContextApi на useImperativeHandle
-
Урок 8. 00:09:29#8 Рефакторинг AnimationComplete outside
-
Урок 9. 00:12:52#9 Навигация между страницами setup react router
-
Урок 10. 00:03:04#10 Асинхронная загрузка странниц React Router
-
Урок 11. 00:07:17#11 Анимация между страницами FadeIn & FadeOut
-
Урок 12. 00:04:02#12 Анимация между страницами SlideIn & SlideOut (1)
-
Урок 13. 00:18:23#13 Анимация между страницами SlideIn & SlideOut (2)
Автор - udemy
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
Catalin Miron
14 нояб. 2023 г., 15:21
Премиум и кастомные анимации для React Native
AnimateReactNative.com - Premium and Custom React Native animations
Зачем тратить часы на изобретение велосипеда, когда вы можете воспользоваться нашим обширным набором компонентов анимации? Независимо от того, ищете ли вы заметные эффекты, плавные переходы или интерактивные элементы, у нас есть все, что вам нужно. От базовых анимаций, таких как затухания и перемещения, до более сложных, таких как параллакс и частицы, у вас есть разнообразие вариантов на выбор.
CSS-анимации
CSS Animations
Анимация пользовательского интерфейса играет важную роль для веб-приложений и веб-сайтов в улучшении взаимодействия с пользователем. Но создание анимации может быть трудным или чрезмерным. На этом курсе мы изучим основы CSS-анимации и перейдем к продвинутым концепциям, таким как оркестровка и хореография. Мы также изучим принципы моушн-дизайна, которые сделают все наши анимации последовательными и продуманными.
Полное Руководство по Анимации в CSS3
CSS3 Animations, Transforms and Transitions Ultimate Guide
CSS стал очень популярным и важным языком для каждого отдельного разработчика в современном стеке веб-разработки, и этот язык продолжает развиваться, обладая новыми возможностями. В настоящее время CSS может справиться с большинством потребностей движения и анимации, используя CSS transitions, CSS transforms и анимацию CSS keyframe.
developedbyed.com
19 февр. 2022 г., 23:32
Курс JavaScript-анимации
The Ultimate JavaScript Animation Course
Создайте 6 потрясающих проектов, чтобы освоить анимацию и улучшить свои навыки работы с интерфейсом. Узнайте, как делать творческую и привлекательную анимацию без предыдущего опыта.
superhi.com
15 янв. 2022 г., 00:00
Анимация для Веба
Animation for the Web
Получите полный контроль над веб-графикой и придайте вашему сайту немного расцвета с помощью движения и анимации. В этом учебном курсе SuperHi разработала и выпустила серию проектов, посвященных стилю и анимации SVG, чтобы оживить масштабируемые, удобные для производительности иллюстрации в браузере.