Верстка + управляемая анимация на HTML5 canvas (ES6)
15 000 руб. за проект
На canvas транслируется видео поток с камеры. Необходимо:
1. Сверстать внешний вид представления, согласно изображению "main view.jpg" (вывод камеры сделать серым, в центре овал, вокруг которого затемненное пространство до краев), все надписи, присутствующие на изображении и кнопка в 2х состояниях – active / disabled
2. Вокруг овала есть рамка, в нескольких цветовых вариантах, согласно изображению "states-and-tips.jpg". Над кнопкой есть блок подсказок, в который могут погружаться 1-10 строк текста с подсказками. Блок растет вверх. Цвет блока подсказок может быть серым полупрозрачным или зеленым, как на картинке.
3. Рамка вокруг овала может принимать вид таймлайна, с заданным временем заполнения и несколькими режимами внешнего вида – первый изображен на рисунке timeline_error.jpg, второй режим (timelines.jpg) – это плавное заполнение с изменением цвета по мере заполнения. Время заполнения и все цвета бэкграундов и самих линий задаются константами.
4. Центральный овал нужно представить как объемный стеклянный цилиндр заданного радиуса (переменная), по которому должны перемещаться две линии, координаты перекрестия которых задаются скриптом. Нужно геометрически правильно, с использованием кривых Безье отрисовать эти линии при любой координате пересечения. При изменении координаты пересечения линий они должны плавно с заданной скоростью (переменная) переместиться в новую точку.
Вся анимация должна быть максимально легковесной с применением RequestAnimationFrame.
1. Сверстать внешний вид представления, согласно изображению "main view.jpg" (вывод камеры сделать серым, в центре овал, вокруг которого затемненное пространство до краев), все надписи, присутствующие на изображении и кнопка в 2х состояниях – active / disabled
2. Вокруг овала есть рамка, в нескольких цветовых вариантах, согласно изображению "states-and-tips.jpg". Над кнопкой есть блок подсказок, в который могут погружаться 1-10 строк текста с подсказками. Блок растет вверх. Цвет блока подсказок может быть серым полупрозрачным или зеленым, как на картинке.
3. Рамка вокруг овала может принимать вид таймлайна, с заданным временем заполнения и несколькими режимами внешнего вида – первый изображен на рисунке timeline_error.jpg, второй режим (timelines.jpg) – это плавное заполнение с изменением цвета по мере заполнения. Время заполнения и все цвета бэкграундов и самих линий задаются константами.
4. Центральный овал нужно представить как объемный стеклянный цилиндр заданного радиуса (переменная), по которому должны перемещаться две линии, координаты перекрестия которых задаются скриптом. Нужно геометрически правильно, с использованием кривых Безье отрисовать эти линии при любой координате пересечения. При изменении координаты пересечения линий они должны плавно с заданной скоростью (переменная) переместиться в новую точку.
Вся анимация должна быть максимально легковесной с применением RequestAnimationFrame.
В заказе есть исполнитель
При переводе заказа из архивного в актуальный, текущий исполнитель будет снят с задачи.
Выберите тип сделки
С безопасной сделкой вы всегда сможете вернуть средства, если что-то пойдет не так. С простой сделкой вы самостоятельно договариваетесь с исполнителем об оплате и берете на себя решение конфликтов.