Рубрика «покадровая анимация»

Продуктовые сайты любят анимацию «крутишь колесо мыши — объект меняется на глазах». Первый инстинкт: сделать это видео с currentTime. Вот почему это почти всегда неправильный первый инстинкт, и что вместо этого используют на практике.

Эффект знаком почти всем: скроллишь страницу, и товар на экране поворачивается, открывается, меняет состояние, будто это видео, которым управляет колесо мыши. Реализовать это «в лоб» пытаются почти всегда одинаково: берут файл видео и дёргают video.currentTime от scroll‑позиции. Через пару дней разработки выясняется, почему так почти никто не делает всерьёз.

Читать полностью »

Много раз встречал на сайтах тему с анимацией кадров из видео.
По просьбе одного паренька решил написать небольшой универсальный движок.

За основу этого движка я взял файлы javascript описанные в этом посте

У нас есть 2 картинки
Первая это первый кадр из второй картинки

|1кадр|

Вторая картинка с множеством кадров

|1кадр|2кадр|3кадр|4кадр|5кадр|...|

Для простоты представим что во второй картинке кадры из фильма через определенные промежутки времени.

При загрузке сайта, пользователь должен видеть только первую картинку.
Это обеспечит быструю загрузку сайта.
При наведении мыши на первую картинку, пользователю будет показана анимация загрузки и начнется загрузка второй картинки с кадрами.
Как только вторая картинка загрузится. начнется ее анимация, и будет продолжаться до тех пор, пока пользователь не уберет указатель мыши с картинки.
Читать полностью »

На идею создания небольшого движка покадровой анимации меня подтолкнул гугл.

image

Виды покадровых картинок, которые javascript движок превращает в анимацию:

1.

|1кадр|2кадр|3кадр|4кадр|5кадр|...|

2.

|1кадр|
|2кадр|
|3кадр|
|4кадр|
|5кадр|
|...|

3.

|1кадр|2кадр|3кадр|
|4кадр|5кадр|6кадр|
|7кадр|8кадр|9кадр|

В итоге я написал два движка которые позволяют создавать анимацию из спрайтов.
cartoon_background.js
cartoon_image.js
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js