Среда программирования:
Sublime Text
Статья по теме:
В этом примере используется анимация из компьютерной игры, которая для более плавной анимации использует 7 меняющихся изображений, которые я склеил в одно изображение для удобства, и получилось широкое покадровое изображение.
Используем функцию ,которая анимирует наши спрайты
Код программы:
<code> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS-JS-Animation</title> <style> body{ background-color:#white; } </style> </head> <body> <div id="mk"></div> <script> var styles = {}; styles.width = '65px'; // задаем параметры styles.height = '135px'; Animation('mk', 'mk.png', styles); // вызываем функцию function Animation(elementId, Name, styles) { var img = document.createElement('img'); var q = 0; img.onload = function () { //как только спрайт загружается var el = document.getElementById(elementId); el.style.width = styles.width; el.style.height = styles.height; var i = 0; interval = setInterval(function() { //запускаем интервал if (q < img.width) { //для смены позиции изображения i=i+30; // если дошли до конца спрайта } else { i = 0; // то возвращаемся к началу } q = 8.8*i; //сдвиг по слайду el.style.background = "url('" + Name + "') " + q + "px 50%"; } , 1000/7) //меняем позиционирование спрайта } img.src = Name; //задаем имянашего спрайта } </script> </body> </html>
Прикрепленный файл | Размер |
---|---|
sprite js.rar | 36.04 кб |