过渡在规定时间内完成移动
2023-07-06 本文已影响0人
littlesunn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="target" class="target">Hello</div>
</body>
</html>
<script>
const target = document.querySelector('#target')
let totalTime = 2000
let progress = 0 // 当前移动的百分比(相对于总长度)
let distance = 500
let startTime
const anim = (time) => { // 每次执行的时间戳
progress = ((time - startTime) / totalTime)
if (progress >= distance) {
progress = distance
} else {
window.requestAnimationFrame(anim)
}
target.style.left = progress * distance + 'px'
}
const start = () => {
startTime = performance.now() // 记录开始执行的时间戳
window.requestAnimationFrame(anim)
}
start()
</script>
<style>
.target {
position: absolute;
left: 0;
top: 0;
height: 50px;
width: 50px;
background-color: red;
}
</style>
