calc-animate-val
Version:
根据总时长、当前时间、缓动函数来计算动画元素每次执行时所在的位置。
41 lines (40 loc) • 934 B
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
background-color: aquamarine;
border-radius: 50%;
transform: translateX(0);
}
</style>
</head>
<body>
<div></div>
<script src="../index.js"></script>
<script>
calcAnimateVal.rAF = (fn) => {
return setTimeout(() => {
fn(Date.now())
}, 16)
}
calcAnimateVal.cancelRAF = (id) => {
clearTimeout(id)
}
const div = document.querySelector('div')
calcAnimateVal({
position: [0, 500],
duration: 1000,
timingFn: 'linear',
running: (x) => {
div.style.transform = `translateX(${x}px)`
}
}).run()
</script>
</body>
</html>