Как сделать анимацию линейных рисунков?

Question

[razzakov]

Как сделать анимацию линейных рисунков?
Точно так же как на этом сайте
www.sound-of-change.com/#/intro
И чтобы они менялась как слайд, и переходила в другую картинку
Можно хотя бы ресурсы что бы изучить этот вопрос. Желательно код
С помощью какого языка можно это реализовать?
Заранее спасибо огромное!

Comments

[Rustam Bainazarov]

В данном конкретном случае это сделано на canvas.

Answer 1

[Максим]

Можно и canvas а можно на scroll повесить типа вот этого : https://codepen.io/topicstarter/pen/OevaZO
только в codepen по click
а вот типа волны это уже webGL шейдэры
а когда фоновая картинка за курсором бегает то это вообще пионерский эффект для начинающих

Answer 2

[twobomb]

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