Если вы в порядке с преобразованием gif в лист спрайта, вы можете сделать это таким образом (используя ImageMagick):
montage animation.gif -coalesce -tile x1 -geometry +0+0 -background None -quality 100 spritesheet.png
Возможно, что новое изображение будет иметь меньший размер .
После того, как у вас есть спрайт-лист, используйте анимацию CSS. Здесь используется анимация с фиксированным временем кадра:
var el = document.getElementById('anim');
function play() {
el.style.animationPlayState = 'running';
}
function pause() {
el.style.animationPlayState = 'paused';
}
function reset() {
el.style.animation = 'none';
el.offsetHeight; /* trigger reflow to apply the change immediately */
el.style.animation = null;
}
function stop() {
reset();
pause();
}
#anim {
background-image: url('https://i.stack.imgur.com/J5drY.png');
width: 250px;
height: 188px;
animation: anim 1.0s steps(10) infinite;
}
@keyframes anim {
100% { background-position: -2500px; }
}
<div id="anim" title="Animated Bat by Calciumtrice"></div>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="reset()">Reset</button>
<button onclick="stop()">Stop</button>
Если вы хотите, чтобы анимация не запускалась автоматически , добавьте paused
в конец правила animation
.
Функция библиотеки write
обрабатывает ввод только от 0 до 180, что означает, что при серво 270 градусов 180 градусов представляют максимальное значение. Я бы порекомендовал переключиться на использование функции writeMicroseconds
, так как более понятно, с каким значением вы работаете.
write(120)
должны производить близко к углу 180 градусов.