首页 > 其他分享 >如何优雅的实现动画效果

如何优雅的实现动画效果

时间:2023-02-15 11:12:42浏览次数:31  
标签:动画 下次 浏览器 函数 效果 requestAnimationFrame 优雅 html

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

相关文章