@dieie
Студент колледжа

Как создать эффект взрыва фото?

У меня есть фото, как сделать эффект взрыва?
  • Вопрос задан
  • 616 просмотров
Решения вопроса 1
ArchiTawer
@ArchiTawer
"Ok, Google" и все твои проблемы решены
Тока так или канвас
Пример разлета
Примеры
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
HunteR-VRX
@HunteR-VRX
frontend-разработчик
Одним из вариантов является:
1) Исходное (целое) изображение
2) Предварительно нарезанное по вкусу (на маленькие рваные пазлы) с помошью слайсер-инструмента в фоторедакторе
3) Далее вы работаете с селектором тега изображения и скрываете его при наведении курсора
img:hover {
   display: none;
}


4) Фрагменты нарезанного изображения должны быть абсолютно позиционированы таким образом, что вы собираете этот пазл виртуально в целое изображение, причем все эти фрагменты должны иметь свой контейнер-родитель, которому прописываете относительное позиционирование (position: relative) и относительно него вы двигаете эти пазлы собирая в целую картину, и все это к тому же спрятано за исходное изображение за счет Лееринга (работы со слоями) z-index: значение;

img.fragment_1 {
   position: absolute;
   top: _px;
   left: _px;
}


5) После этого к каждому фрагменту вы обращаетесь к его идентиффикатору (id) и посредством javascript пишете функцию движения этих элементов, при событии onmouseover="name_function()" в желаемую сторону за счет transform: translate() или же меняя координаты top/right/bottom/left, каждому из них.

Ну и далее уже дело творчества, можно довести все это до порядочного результата применяя различного рода фильтры к кускам (прозрачность/затухание или же резкое изчезновение (их поведение после разлетания) дело уже вкуса и задачи
Ответ написан
@jamtuson
К этой задаче есть несколько решений. Поделюсь двумя, которые знаю
Допустим, у Вас есть фото размером 800x600, то это получится 480 тысяч пикселей, что очень много для html, svg и даже "2d" канвас, который, примерно, до 10к частиц может отрисовать, но потом уже без танцев с бубном не обойтись. Первое решение про танцы с бубном.

Можно использовать технику многослойного канваса, а именно преобразовать картинку в холст(canvas) создать большое кол-во пустых канвас- элементов и рандомно заполнить каждый этот элемент пикселями с картинки и потом каждый холст рандомно повернуть/подвинуть в разные стороны. Будет эффект разлета частиц.
Так сделала google в своем thanos effect. Посмотреть его можно, если зайти с компа в гугл и написать thanos, а после кликнуть по перчатке. Внезапно, это дает 60fps без проседаний.

Второй вариант это юзать библиотеку pixijs. Есть там две штуки, которые помогут решить эту задачу. а именно particle container, который будет рисовать точки не на проце, а уже на видюхе и может потянуть такой объем точек. И второй метод, который может разбить саму картинку, это PIXI.textrure.frame.
Ответ написан
Ваш ответ на вопрос

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

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