|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/react-animation-project-scss/
课程评论：没有评论
**React 动画项目 SCSS 课程总结** 本课程专注于使用 React 和 SCSS 进行动画开发，旨在于实战项目中教授如何创建流畅且模块化的动画效果。 **课程内容概要：** 1. **项目搭建与组件创建：** 课程将从使用 `create-react-app` 初始化一个全新的 React 项目开始。随后，将着手创建两个核心组件：一个**加载画面（splash screen）组件**和一个**可动画化元素（animatable item）组件**。 2. **SCSS 动画模块化：** 核心的动画逻辑将通过 SCSS 编写，并采用高度模块化的方式。这意味着所有的动画都会被定义为可单独导入的 **Sass 混合（mixins）**。这种设计允许开发者根据项目需求，灵活选择导入所有动画或者仅导入部分所需的动画，大大提高了代码的可维护性和复用性。 3. **动画定义与应用：** * **通用配置：** 课程将创建一个单独的 SCSS 文件，用于存放所有动画共享的通用配置选项，以便在各个动画中统一引用。 * **淡入淡出动画：** 将首先实现一个基本的淡入淡出（fade in/out）动画，并将其封装为独立的 Sass 混合。 * **动画集成：** 定义好动画后，将其导入到 React 组件中。加载画面组件将被修改以实现在指定时间后自动消失的效果，而可动画化元素组件也将应用相应的动画逻辑。 4. **React 生态系统与实用工具：** 课程强调 React 生态系统的应用，并会介绍一些重要的工具和库，以支持创建完整的 UI 应用程序。此外，还将包含一个简单的 JavaScript 工具，用于条件性地组合类名。 **核心要点：** * **React 动画开发：** 学习如何为 React 组件实现各种动画效果。 * **SCSS 模块化：** 掌握使用 SCSS 混合（mixins）来构建可重用、模块化的动画。 * **实战项目导向：** 通过实际项目的开发来学习和巩固知识。 * **React 生态系统：** 了解和应用 React 开发所需的关键工具和库。 * **加载画面与可动画化元素：** 重点关注这两个常见 UI 组件的动画实现。 本课程为希望提升 React 应用交互性和视觉吸引力的开发者提供了宝贵的实践经验。
В этой курсе мы начнем с создания компонента экрана-заставки, а затем компонента анимируемого элемента.В этой курсе мы определим наш первый набор анимаций с помощью sass. Попробуем сделать его очень модульным способом, чтобы у нас была возможность импортировать все анимации, которые мы создадим, либо только те немногие, которые мы хотим использовать. Как только анимации будут определены, затем импортируем их в наш проект и изменим нашу заставку и анимируемый элемент, чтобы наша заставка исчезала через заданное время.Приступим к написанию настроечных опций и начнем с создания нового файла, который мы можем импортировать во все наши различные анимации, который будет содержать общие параметры, которые мы обычно применяем.Определили наши опции анимации, добавим нашу первую анимацию, которая позаботится о затухании и появлении и/или выходе элемента. Мы будем писать все как отдельные примеси, чтобы, если нам понадобится, мы могли просто импортировать отдельные части.Создадим компонент Заставки и будем дергать нужную нам анимацию, определенную в логике AnimatableItem. Конечно, мы должны будем начать с создания нового проекта для нашей работы. Для этого я использовал create-react-app, а также добавил простую утилиту JavaScript для условного соединения имен классов.React - самая популярная библиотека для разработки веб-приложений и один из самых востребованных навыков для JavaScript разработчика в 2018 году.Фокус этого курса - практическая разработка приложений на React. Это означает, что мы рассмотрим не только эффективное использование самого React, но и целую экосистему инструментов и библиотек, которые необходимы для создания полноценного UI приложения.Разрабатывая реальные приложения мы изучим самые важные инструменты в экосистеме React:ReactAnimation SCSS
