1.实现动画的方式
- javaScript:setTimeout、setInterval
- css3: transition、animation
- html: canvas
- requestAnimationFrame Api
前三种我们都很熟悉,重点说说requestAnimationFrame
2.requestAnimationFrame
2.1 定义
告诉浏览器,你需要执行一个动画,并要求浏览器在下次重绘之前调用指定的更新函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在下次重绘前执行
//html代码全文通用,所以只在此贴出一次
<body>
<h1>requestAnimationFrame API</h1>
<button id='begin' class="begin">开始</button>
<button id='end' class="end">停止</button>
</body>
//js
(() => {
function test() {
console.log('
标签:动画,下次,浏览器,函数,效果,requestAnimationFrame,优雅,html
From: https://www.cnblogs.com/never404/p/17122039.html