53 lines
No EOL
1.3 KiB
HTML
53 lines
No EOL
1.3 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
|
||
<head>
|
||
<style>
|
||
#train {
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<img id="train" src="https://js.cx/clipart/train.gif">
|
||
|
||
|
||
<script>
|
||
train.onclick = function() {
|
||
animate(function(timePassed) {
|
||
train.style.left = timePassed / 5 + 'px';
|
||
}, 2000);
|
||
};
|
||
|
||
// Рисует функция draw
|
||
// Продолжительность анимации duration
|
||
function animate(draw, duration) {
|
||
var start = performance.now();
|
||
|
||
requestAnimationFrame(function animate(time) {
|
||
// определить, сколько прошло времени с начала анимации
|
||
var timePassed = time - start;
|
||
|
||
console.log(time, start)
|
||
// возможно небольшое превышение времени, в этом случае зафиксировать конец
|
||
if (timePassed > duration) timePassed = duration;
|
||
|
||
// нарисовать состояние анимации в момент timePassed
|
||
draw(timePassed);
|
||
|
||
// если время анимации не закончилось - запланировать ещё кадр
|
||
if (timePassed < duration) {
|
||
requestAnimationFrame(animate);
|
||
}
|
||
|
||
});
|
||
}
|
||
</script>
|
||
|
||
|
||
</body>
|
||
|
||
</html> |