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

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

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

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

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

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

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

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

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

Фигура
5d12354a1c298956114360.png

Анимация
5d12362143e58177080652.png
  • Вопрос задан
  • 327 просмотров
Пригласить эксперта
Ответы на вопрос 2
@antares4045
Если сдюжите при помощи чистого css -- это будет сильная победа, ибо css всё-таки про создание стилей а не отрисовку с нуля, но наверное, в вебе всё, что сделано на нём без серьёзных огрехов -- самое производительное. Но признаться честно, я вообще не представляю себе небходимого инструментария в css;
Канвас многим хорош, но он хочет чтобы вы решили много проблем, прочитали его мануалы и тогда будет вам счастье. Раз вместо того, чтобы гуглить правила ресайза для него, вы пошли писать на форум -- это тоже врядли ваш путь (без претензии: это нормально);
Осталось svg. Для того чтобы он работал, тоже надо учиться, но всевозможных материалов по нему максимальное количество. Суть вашей анимации я, признаться честно, не понял, но вероятно, проблема в том, что анимация по умолчанию идёт в режиме ускорение-замедление, и если вы скажете ей проходить по линейной временной функции, главная ваша проблема отпадёт. И да, svg лучше всего подходит для наведения интерактива. Скорее всего вам стоит разобраться как работает svg сам по себе и не пользоваться сторонними фреймворками, т.к. высока вероятность, что выбранный вами действительно кушает ощутимую производительность.
Ответ написан
@skuvaWeb
Варианта 2,
1) canvas (скорее всего качество плохое, потому что на телефоне высокий DPI, и canvas нужно увеличивать в 2-3 раза, почитайте об этом)
2) WebGl, можете использовать нативный, придется немного запарится, но нарисовать градиентный треугольник сможете. Либо возьмите Pixi.js , это обертка над webGl, с ним будет проще. Погуглите про displacementFilter в pixi.js, как раз эффект "волны" получится)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы