Как анимировать Png чтобы был эффект тянущегося желе?

Ребят, привет, подскажите, плиз, как можно растянуть только часть изображения в реально времени, сделав подобие прелоудера?
Покажу на примере какой-то головы, необходимо, чтобы ты часть, что состоит из "киселя" растягивалась, а головые при этом оставались в своих пропорциях (поэтому css здесь не пойдет)

Пример:
Начальная точка
5de3a5cc220f7314612880.png

Конечная точка
5de3a60aa96e7097903322.png

Быть может на канвасе можно подобное сделать или еще как?
Спасибо)
  • Вопрос задан
  • 379 просмотров
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега JavaScript
Три картинки, бошки отдельно, жижа отдельно. Бошки просто двигай, жижу держи на месте и растягивай. Получится то, что получится. Красивым не назовешь, но простой картинки большего ожидать не стоит. Хочешь большего - three.js и шейдеры, шейдеры, шейдеры.
Ответ написан
Комментировать
Очевидный SVG одной картинкой, в котором желе выделено в отдельную подгруппу \ фигуру. Растягиваете только ее.
Ответ написан
Комментировать
Отрисовывать с помощью canvas. Удалить "желе" с png, оставить отдельно две части головы, между ними отрисовать похожее "желе" с помощью кривых и градиентов. А затем анимировать кривые.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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