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

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

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