Прошла неделя с тех пор, как мы запустили наш быстрый Code Challenge # 1 , что означает, что пришло время объявить победителя! Это было сложно. Несмотря на то, что количество заявок не было высоким, нет сомнений в качестве наших победителей.
Но сначала давайте рассмотрим несколько разных подходов к поставленной задаче.
Моя очередь первая!
Поскольку я устанавливал правила для этого испытания, я думал, что это будет справедливо, если я приму вызов первым.
(* И нет, я не могу вручить приз самому себе… ну, я почти уверен, что не могу… правильно?!? ).
Я поиграл с CSS и SVG — двумя из моих сильных сторон — и решил не использовать скрипты. Поскольку в CSS или SVG нет настоящей случайной функции, уловка заключалась в том, чтобы сделать обычные циклы анимации более случайными, чем они есть на самом деле. Вот мое решение.
Не стесняйтесь выбирать код, но основными интересными моментами являются:
- В анимации линии ЭКГ используется только один внешний SVG и два отдельных цикла анимации.
- Одна CSS-анимация (путешествие) зацикливает зеленый градиент слева направо. Накладная маска формирует линию ЭКГ.
- Я создал 6 уникальных «сердцебиений ЭКГ» на графике SVG и настроил их как ключевые спрайты. Я переключаю эти ключевые кадры, чтобы они выглядели случайными (я добавил крошечные цифры внизу, чтобы сделать переключение ключевых кадров более очевидным).
- Вторая анимация обрабатывает каждое «сердцебиение» как отдельный спрайт и переключается на новый при каждом проходе — но это происходит только в темной части цикла, когда его не видно.
- Конечно, поскольку каждое «сердцебиение» использует одну и ту же анимацию CSS, мы обычно ожидаем, что все они будут отображать одинаковые ключевые кадры. Хитрость в том, чтобы заставить их всех выглядеть по-разному, состоит в том, чтобы компенсировать время их запуска, используя
animation-delayИ если мы используем отрицательные задержки (например,animation-delay: -9sЭто действительно полезный трюк с производительностью. - Вся анимация контролируется единственной переменной Sass в верхней части окна CSS —
$animation-time: 5s;, Изменение этого числа приведет к изменению большого числа показаний и скорости ЭКГ. - Он создан для Chome и не широко протестирован, но должен работать где угодно.
Существуют некоторые ограничения чисто CSS-подхода, но я довольно доволен общим эффектом. Мне нужен JS, чтобы улучшить элементы, которые мне не нравятся.
Третий приз: PaulOB
Нам очень повезло, что Пол долгое время работал помощником, наставником и консультантом для пользователей SitePoint (возможно, к двум?). В этом случае он пожертвовал драгоценным временем отдыха на солнце, чтобы создать вкусное решение SVG.
Павел сказал:
Это просто SVG для графика и анимированный линейный градиент для обеспечения эффекта движения. Если бы у меня было время, я бы нарисовал его правильно и сделал бы его отзывчивым, а не просто повторял один и тот же svg каждый раз, чтобы он выглядел немного случайным.
Должен вернуться в бассейн сейчас 🙂
Пол, мы приветствуем вас, сэр!
(Кроме того, мы выясним, какую футболку SitePoint, держателя для банок или какую-то коллекцию SitePoint мы можем вам выслать.)
Равный Первый приз: Никватон
Несмотря на то, что не было большого количества записей для этой первой проблемы с кодом, не было недостатка в качестве двух лучших записей. На самом деле, мы подумали, что лучшие 2 работы были настолько достойны награды, что решили присудить им обеим призы в размере 200 долларов на подарочную карту Amazon.
Запись Никваттона была именно той вещью, которую я имел в виду.
Как объясняет Ник, его решение:
Использует системы частиц, потому что они мне нравятся.
Кроме того, вы можете получить очень дешевый эффект следа с помощью canvas, заполнив контекст рисования почти прозрачным черным, что делает след исчезновения для моей линии «ping».
RAF обеспечивает плавную работу всей анимации, а анимация сердцебиения контролируется с помощью рекурсивного метода setTimeout (). Я использую setTimeout (), чтобы управлять эффектами, которые не являются для каждого кадра, и это также означает, что я могу запустить это с немного случайными интервалами, для органичного ощущения.
Метод heartBeat () контролирует и слегка рандомизирует частоту пульса, наблюдаемую в сердце и линии пульса.
Подход Ника к JS и Canvas предлагает гибкость, которую трудно совместить с другими подходами. Я не могу представить, как вы могли бы начать имитировать эти эффекты частиц с помощью метода на основе SVG.
Также относительно легко немного рандомизировать скорость анимации. Это нелегко подделать без JS, но действительно продает правдоподобие этой анимации.
Равный Первый приз: Давидомарфч
Дэвид представил свою заявку незадолго до перерыва — и мы так рады, что он сделал это. Я должен признать, что это заставило меня улыбаться от уха до уха.
Во-первых, Дэвид начал с серьезного исследования того, как реальная машина ЭКГ производит свою продукцию, и встроил эти знания в свою анимацию. Он также добавил приливы и отливы кровяного давления, температуры, показания насыщения кислородом и даже количество гемоглобина. Эта вещь кажется законной.
Но Дэвид также добавил два убийственных элемента X-фактора.
- Аудио : классический аппарат «буп… буп… буп…» добавляет столько драмы, когда пульс увеличивается.
- Интерактивность : Помимо некоторой автоматической «пассивной случайности», Дэвид позволяет пользователю контролировать частоту сердечных сокращений с помощью позиции курсора. Переместитесь в крайнее левое положение, чтобы усыпить пациента, — и вправо, чтобы дать пациенту укол адреналина в сердце.
Этот ограниченный контроль скорости ЭКГ делает этот аппарат потенциально действительно полезным в сценарии фильма / телевизора.
Как и решение Ника, блок ЭКГ записывается на холст с помощью JavaScript, но Дэвид использует библиотеку P5.js. Раньше я не использовал P5, но с модулями для рисования, анимации и звука кажется хорошим фундаментом для создания такого проекта.
Все, супер внушительный вклад.
И спасибо, и поздравляю Дэвида, Ника и Пола. Мы скоро свяжемся.
Что дальше? Кодовый вызов № 2: битва за CSS
Для нашего следующего испытания мы сотрудничаем с нашими друзьями на CSSbattles.dev, чтобы спонсировать Battle round # 4 . Есть 3 денежных приза и 20 премиальных членств SitePoint, в которых можно соревноваться в течение трех недель. Подробности будут в моем следующем посте.