Как зашить анимацию в картинку на canvas?

Question

[EryTi]

Как сделать такую картинку?


Это не gif формат, а png, но картинка бесконечно анимируется. Не могу понять как она создается?

Нашел статью по которой повторил такой пример, но здесь анимация не бесконечна и не "вшита", то есть если открыть url картинки в новой вкладке, то анимации не будет
https://codepen.io/eryomin-t/pen/BaOxLKe?editors=1010

Answer 1

[Rise]

PNG тоже поддерживает анимацию APNG, но в вашем случае это GIF с ложным расширением, что можно увидеть, например, через MediaInfo Lite. Ни GIF ни APNG не будут анимироваться, если вы их отрисуете на canvas.

Answer 2

[GavriKos]

То что там расширение PNG - не значит что внутри PNG. Внутри там обычный GIF, просто так переименовали. Это видно если открыть любым текстовым/HEX редактором. Браузеры и многие вьюверы на расширение не смотрят, а смотрят на заголовок файла - поэтому анимация и проигрывается