js:requestAnimationFrame的使用
基础版：inner在warp里面从上往下移动，无限循环
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>:root {--w: 5px;}* {margin: 0;padding: 0;}.wrap {width: 500px;height: 500px;border: 1px solid #ccc;position: relative;overflow: hidden;margin: 30px auto;border-radius: var(--w);}.inner {border-radius: var(--w);background: #000;width: 100px;height: 100px;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}</style>
</head><body><!-- 我想使用requestAnimationFrame来写一个动画帧 --><!-- 写一个div里面的一个小的div，从上往下面移动的吧，时间是4s --><div class="wrap"><div id="inner" class="inner"></div></div><script>const inner = document.getElementById('inner');let startTime;const step = (timestamp) => {if (startTime === undefined) {//第一次执行的时候，给startTime赋值startTime = timestamp}//计算过去了的时间const elapsed = timestamp - startTime;//计算当前的一个进度 假设总的时间是 4000毫秒const progress = Math.min(elapsed / 4000, 1)// 计算curPosition 总距离是500pxconst curPosition = progress * 500;inner.style.transform = `translate(-50%, ${curPosition}px)`;//当超出500时，重新开始if (progress >= 1) {startTime = undefined;}requestAnimationFrame(step)}requestAnimationFrame(step)</script></body></html>进阶：将总时长和最大距离提取出来，当做参数来传递，控制inner的速度
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>:root {--w: 5px;}* {margin: 0;padding: 0;}.wrap {width: 500px;height: 500px;border: 1px solid #ccc;position: relative;overflow: hidden;margin: 30px auto;border-radius: var(--w);}.inner {border-radius: var(--w);background: #000;width: 100px;height: 100px;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}</style>
</head><body><!-- 我想使用requestAnimationFrame来写一个动画帧 --><!-- 写一个div里面的一个小的div，从上往下面移动的吧，时间是4s --><div class="wrap"><div id="inner" class="inner"></div></div><script>const inner = document.getElementById('inner');let startTime;//将参数timestamp,总时长4s和maxDistance 500px提出来const step = (timestamp, duration = 4, maxDistance = 500) => {if (startTime === undefined) {//第一次执行的时候，给startTime赋值startTime = timestamp}//计算过去了的时间const elapsed = timestamp - startTime;//计算当前的一个进度 const progress = Math.min(elapsed / (duration * 1000), 1)// 计算curPosition const curPosition = progress * maxDistance;inner.style.transform = `translate(-50%, ${curPosition}px)`;//当超出maxDistance时，重新开始if (progress >= 1) {startTime = undefined;}requestAnimationFrame((ts) => step(ts, duration, maxDistance))}requestAnimationFrame((timestamp) => step(timestamp, 16))</script></body></html>