Как правильно создавать интерактивные геометрические фигуры?

Question

[DenBree]

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

Побродив на просторах интернета нашел 3 способа решения данного вопроса, но все имеют свои недостатки и вопросы.

1. CSS
Сначала я конечно же попробовал нарисовать при помощи CSS. При использовании clip-path, в данном случае не видна тень, которую делал через box-shadow + плоха поддержка.

Потом я решил просто нарисовать квадрат и повернуть его на нужный угол и использовать overflow: hidden, но тут меня волнует адаптация и анимация.

2. Canvas
Вроде бы все получилось, все нарисовал, но почему-то при загрузке на телефоне, качество отвратное. При этом высота вычисляется в зависимости от высоты и ширины экрана. Из-за чего это может быть? Высота и ширина холсту тоже задается в зависимости от параметров экрана.

3. SVG
Тоже удалось реализовать при помощи библиотеки snap.svg. При этом при скорлле просидает fps и градиент какой-то ломаный (проблема из-за добавления тени через filter), отсутствуют плавные переходы.

Есть ли какие-то советы по анимации?

Возможно кто-то реализовывал подобное? Буду очень благодарен за любую помощь!

Фигура


Анимация

Answer 1

[skuvaWeb]

Варианта 2,
1) canvas (скорее всего качество плохое, потому что на телефоне высокий DPI, и canvas нужно увеличивать в 2-3 раза, почитайте об этом)
2) WebGl, можете использовать нативный, придется немного запарится, но нарисовать градиентный треугольник сможете. Либо возьмите Pixi.js , это обертка над webGl, с ним будет проще. Погуглите про displacementFilter в pixi.js, как раз эффект "волны" получится)

Comments

[DenBree]

Спасибо за совет. Почитаю.

Больше всего напрягает то, что это просто для красоты, а париться приходиться больше чем хочется.

[skuvaWeb]

DenBree, порекомендую стримы Юрия Артюха, в каком-то выпуске у него было что-то похожее вроде бы)

[DenBree]

skuvaWeb, спасибо. видел такой канал, но пока что не смотрел!

Answer 2

[antares4045]

Если сдюжите при помощи чистого css -- это будет сильная победа, ибо css всё-таки про создание стилей а не отрисовку с нуля, но наверное, в вебе всё, что сделано на нём без серьёзных огрехов -- самое производительное. Но признаться честно, я вообще не представляю себе небходимого инструментария в css;
Канвас многим хорош, но он хочет чтобы вы решили много проблем, прочитали его мануалы и тогда будет вам счастье. Раз вместо того, чтобы гуглить правила ресайза для него, вы пошли писать на форум -- это тоже врядли ваш путь (без претензии: это нормально);
Осталось svg. Для того чтобы он работал, тоже надо учиться, но всевозможных материалов по нему максимальное количество. Суть вашей анимации я, признаться честно, не понял, но вероятно, проблема в том, что анимация по умолчанию идёт в режиме ускорение-замедление, и если вы скажете ей проходить по линейной временной функции, главная ваша проблема отпадёт. И да, svg лучше всего подходит для наведения интерактива. Скорее всего вам стоит разобраться как работает svg сам по себе и не пользоваться сторонними фреймворками, т.к. высока вероятность, что выбранный вами действительно кушает ощутимую производительность.

Comments

[DenBree]

Спасибо за ответ! Для начала хочу сказать, что не так уж и сразу я пошел на форум за помощью.

Суть анимации в том, что при наведении курсора, сторона должна как бы искажаться, пустить волну, если это так можно назвать.

Проблема с svg в том, что качество картинки портиться при комбинации градиента и тени, и я не смог найти решение этой проблемы. При чем не во всех браузерах такая беда. Да и для анимации, мне кажется, все равно придется прибегнуть какой-то из библиотек.

[sim3x]

DenBree, делайте все в том числе и тень на свг

[antares4045]

sim3x, с одной стороны +1, с другой у цсс слишком много слишком вкусных возможностей (например css animations), чтобы от них отказываться.

[sim3x]

antares4045, у свг их больше
Проблема в поддержке в движках браузеров

[antares4045]

sim3x, туше

[DenBree]

sim3x, я так и сделал, но проблема при рендеринге градиента + тень и просидает fps при скролле

[sim3x]

DenBree, при скроле вам нужно все замораживать

[DenBree]

sim3x, в каком смысле? Анимация на фигуре должна быть только при наведении мыши.

[sim3x]

DenBree,
Даже если мышь наведена, то при скроле все анимации отключаются
Или вам нужно заморочится и делать оптимизации отрисовки

[DenBree]

sim3x, ок, это я приму к сведению. Но проблема в том, что даже при скоролле без анимации происходят микрофризы.

p.s. размер фигуры ~200vh

[sim3x]

DenBree,
https://developers.google.com/web/fundamentals/per...

https://developers.google.com/web/tools/chrome-dev...