Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Как создать прототип приложения, используя CSS и JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Анимация на самом деле является одной из лучших функций CSS уже долгое время. В конце концов, как мы поняли, движение может улучшить пользовательское восприятие и побудить к действию там, где статический контент себя не оправдывает. В этом уроке мы создадим прототип приложения с использованием анимации CSS и коснёмся JavaScript.

Что мы создаём

Для этого упражнения мы разработаем прототип приложения, которое позволяет подписчикам подписываться друг на друга. Сначала мы загрузим список пользователей с именами под каждым аватаром. При клике на эти аватары будет открываться всплывающее окно, содержащее кнопку «подписаться» и дополнительную информацию, относящуюся к каждому отдельному пользователю.

В демонстрационных целях, мы загрузим 30 пользователей, используя бесплатный сервис под названием Random User Generator. Их API не только предоставляет случайные изображения пользователей, но также предоставляет случайные данные, такие как имена, адреса, электронную почту и многое другое.

1. Настроим сцену

Ранее я обсуждал варианты построения концепций прототипов, но для этой статьи мы построим прототип с настоящим кодом. Для этой задачи мы будем использовать Marvel Devices; библиотека с открытым исходным кодом, которая содержит одиннадцать мобильных устройств на чистом CSS для показа прототипов, как обычно созданных с помощью приложения Marvel.

Для начала подключите devices.min.css в верхнюю часть документа, вернитесь к демо и выберите нужную комбинацию, затем скопируйте и вставьте сгенерированный HTML в свой проект.

2. Загрузим пользователей

С помощью CSS получаем наше демо-устройство (Nexus 5) и тут пришло время загрузить пользователей в наше приложение.

Пользователи будут загружены как элементы списка и вставлены в маркированный список .users. Это начало, но нам ещё нужно использовать JavaScript для связи с API случайных пользователей, чтобы вставить их в список. Чтобы сделать этот запрос, мы будем использовать простой, стандартный стиль JavaScript ES6.

Где request — переменная, которая будет содержать наш AJAX запрос, но для этого требуется URL-адрес.

Метод open будет извлекать данные API из URL и параметров, которые мы установили. Существует множество других параметров, но для этого примера, мы просто получим 30 результатов. Теперь, когда у нас есть наш URL-адрес и отправленный запрос, давайте извлечём эти данные.

Весь запрос теперь на месте. Открыв консоль, вы увидите все результаты, предоставленных данных. Хорошо для начала, но нам определённо нужно больше, чем просто вывод данных в консоль.

3. Введём данные пользователей

Для следующей части, мы вставим разметку для использования с данными, доступными нам от API случайных пользователей.

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

4. Определим положение аватара

Давай соорудим другой компонент для нашего демо; модальное окно, которое будет открываться от точки выполнения (т.е. клику по аватару). Нам понадобится наш дорогой друг — математика, чтобы определить, откуда будет открываться окно.

Чтобы добиться открывания всплывающего окна от места клика, нам необходимо убедиться, что наше transform-origin правильное, чтобы у нас был правильный масштаб модального окна. Я использую object для хранения всех наших префиксов transform-origin, поскольку мы используем JavaScript для их установки, то мы также должны обеспечить, чтобы всё будет работать и в браузерах, которые не поддерживают этот стандарт.

Обратите внимание на математику, необходимую для определения значений transform-origin.

Диаграмма выше объясняет визуально, как производятся вычисления. Чтобы определить правильное местоположение, мы используем offsetLeft и offsetTop плюс половину ширины (width) и высоты (height), чтобы найти точный центр аватара. scrollTop тоже очень важен, потому что 30 пользователей будут выходить за рамки экрана устройства и offsetTop понадобится, чтобы это значение вычиталось для определения правильного расстояния от верхней части экрана. Все значения на схеме выше предоставлены нашим другом getBoundingClientRect.

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

5. Анимация всплывающего окна

Когда координаты аватара будут подготовлены и готовы принять наше событие click, пришло время добавить движение для модального окна, которое отобразит профиль пользователя.

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

Теперь настало время определить свойства CSS, которые будут обрабатывать активное состояние движения модального окна.

Используя JavaScript, мы переключим класс active на screen.  В приведенных выше строках мы обратим то, что мы задали ранее. Именно так мы создаём эффект открытия всплывающего окна. Это очень в стиле Google Material Design, что помогает от нарушения когнитивного поведения и быстро реагирует на ввод пользователя, что делает движение отзывчивым. Этот стиль также отзывается на ввод пользователя, мгновенно расширяясь от точки соприкосновения.

6. Придадим движения аватаркам

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

Сначала мы скроем пользователей, а затем переключим класс show, как только AJAX запрос будет готов. Я также добавил keyframes, которые преобразуют наши свойства в правильные значения. Мы будем использовать эти ключевые кадры в следующем фрагменте кода, который задаёт движение.

Чтобы справиться с математикой, я использую циклы и переменные Sass для подсчета количества пользователей, которые также связаны с нашими JS результатами от вызова API случайных пользователей. Цикл является решением всей головоломки, поскольку он будет считать пользователей и добавлять значение шага, которое мы определили в переменной.

Выше, это наш пример с окончательной последовательностью анимации аватаров. Помните, как мы использовали keyframe для анимации CSS, использовали JavaScript для переключения класса show, как только получали аватар от API случайных пользователей.

Заключительные мысли

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

Спасибо Шоу за его проницательность и этому снимку на Dribbble, который использовался для вдохновения. Как всегда оставляйте любые комментарии ниже для дальнейшего обсуждения, а ещë поставьте демо несколько сердец на CodePen, если вы хотите увидеть ещë что-то в роде этого!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.