Title: анимации
Date: 2021-12-20 00:00
Category: Страница
Slug: animations
Lang: ru

* Анимации реализованы на JavaScript с помощью setInterval без CSS.
* Так называемые спрайты (кадры) анимация берёт из `вида` изображения.
* Одна анимация работает ровно с одним изображением/объектом, т.е. задать несколько анимаций для одного изображения/объекта нельзя.
* Создать спрайты (кадры) для анимации можно [из отдельных изображений с помощью, например, ImageMagick](https://superuser.com/a/316189).

</div><div class="contents">

Пример № 1. Отображение бесконечной анимации на основе вертикальных кадров.

<iframe style="width: 100%; height: 30em" src="../../MYPOM/5.0/редактор.html?z64=eJx9UstOwkAU3fsVk64gKTOlPjMudUtwa4yLAk0hwJTMtGFhSCoLN5oYd34GmiKV8PiFmT/yDsVHR3SSZl7n3jmPyoXMVIJVIidyJlfyRa/UWD2UbvYQDPkqM5mqe4ry/eZsLacqUbcAX0LZ2887PRpesxvwMGYtiqyY90rtKBoISkjQiXA48Fng9X0Rxa1OiEMekG7Imc85qV1e1GuV8/oZ4d6QNLjHmm3S90Tkc8J9Qcx3iRhi0cVhHPU6zMcDFpQt+4vJKF9uJ8AvQckCxN3BnP2nRz6D4ic1NnWBFytArcGiFfSYwX4qU/h053eKHLsIT+F4As1zZ5cUXTk2gNDJsY2qzpHrXhsFc4CmKgGghlTcqosPDg0QEJgDjURT0TlRtO/8KTr7zhRkbYiqx6J0uNO2TPWzhtz1hkrVcTTdLe+dnPKfBMI2nbQMXCEEzeRXxaf3O4MclU8/ABoeIWY="></iframe>

</div><div class="contents">

Пример № 2. Отображение конечной анимации.

<iframe style="width: 100%; height: 30em" src="../../MYPOM/5.0/редактор.html?z64=eJx9UstOwkAU3fsVE1aQlJnSiJq61C3BrTEuCjSFAC2ZtmFhSCoLN5oYd34GmiKV8PiFmT/yDMUHIzqZybzOvXPOuSMWIpMJlYmYiJlYiRe1kmP5ULw5IGjiVWQilfc2yfebs7WYykTeAr5E2NvPO9UaTrPr8SD2WzYpxLxXbEfRILQZ8zoRDQau7zl9N4ziViegAfdYN+C+yzmrXV7Ua+Xz+hnjzpA1uOM326zvhJHLGXdDpr/LwiENuzSIo17Hd+nA90oF44vJKF9uJ+CXULKAuDvM2X96xDMUP8mxrgterIBaw6IVcsywn4oUQ2V+t0nF2IWnOJ4gee7s0iZXpkHQT44NUjGPLOtaC5gDmsoEQAUpWxWLHlY1EAjMQSNRVFSdbGKZ5p+qs++iQteGqXzc1Y475ctUvavpXW+4VEG5uqW9l1L+R1Br3ciChtupgeLxK+LT+r11HJVOPwAKGiE+"></iframe>

</div><div class="contents">

Пример № 3. Отображение анимации на объекте.

<iframe style="width: 100%; height: 50em" src="../../MYPOM/5.0/редактор.html?z64=eJy9k01r2zAYx+/5FMLskEJiOW66DZed1mtoYadSBnFT47pJ7CDL9FACbjZaWAult36MLKRLluXlK0jfqH8l2RLbyQo7TCBLlp+X31/P44bDiYzFs7yWX2SM5x35QLRzzluhRanrcT1oOb5rN52QR2deoAfMpfWA+Q5jtHJ8dFgpHhx+pMy+pKfM9mvntGmH3GGUOaG2n8uJsRjKWEeKrhiIqfiudrIj7/NXOYIhemIo+vLOIov3+dkMPGCB+QRuP9a/qXFq1+ouCyL/zCLViDXyb66SEto0HYKGl3pY14OINzzf0Vu+u1Mt/AnaXm3FFE4TuPVE91/yrrnrF61NWZaL/ArhA8xRMhHidNQNZb+o4YWfuM29mkU4i5xtsaF4Av8x4txgHf7tcsUTrv9RdtKZoEBpmUHhdE7aE8+ij6ki/7SIUUia93HcRfBFmScWOTEKMCLv3xVIyXhrmp9TDlCHzDEMlUnRLJl6eS9lBIARMGKFoprGIrvGVtGqub4BcATLZD8NcDoWv+RDRuRsDgDMsmEozsUzjTrvUYto69XVUqSJcmrJKmqbW22kfg1c2VDebgfbVUjlvf+I9crft0IrloxlgTcWb8WXiphiTHarKlLG43eTZomxtHf2XwCqqPHz"></iframe>

</div>