图形开发学院
图形开发学院

图形系统开发实战课程：基础篇——8.动画


图形系统开发实战课程：基础篇——8.动画_第1张图片

图形开发学院｜GraphAnyWhere

  • 课程名称：图形系统开发实战课程（基础篇）
  • 课程章节：“动画”
  • 原文地址：https://graphanywhere.com/graph/foundation/1-8.html

第八章：动画

\quad 图形系统的动画是指在计算机图形系统中通过一系列连续的画面来展示物体或场景的运动和变化。这些画面通常被称为帧，它们以一定的帧率（即每秒显示的帧数）进行播放，从而在视觉上呈现出连续的运动效果。

1. 实现原理

\quad 在Canvas中绘制的图形，在绘制之后以位图的形式融合到了Canvas中，如果需要让图形内容动起来，就需要清除已有内容，重新绘制新的内容，这样不停的擦除和重新绘制，就可以实现动画效果。在1秒内如果能够重复绘制15帧以上，图形看起来就不卡了，通常所说的60帧是指每秒重绘60次，这已经超过了人眼的极限，可以达到非常流畅的效果。

\quad 为了实现动画，我们需要一些可以定时执行重绘的方法。在Canvas中有三种方法可以实现：分别为setInterval() 、 setTimeout() 和 requestAnimationFrame() ，这3个方法都是html中全局window对象提供的。

名称 说明
setInterval(function, delay) 按时间间隔定期执行function
setTimeout(function, delay) 在设定好的时间之后执行函数
requestAnimationFrame(function) 请求浏览器执行一个特定的函数来更新动画

按时间间隔定期执行

setInterval(function, delay)

\quad 该函数将一直重复定期地执行某函数，直到执行clearInterval()，不管当前网页是否可见，该函数都将定期重复执行。通常如下编写动画代码：

let timeId;
let done = true;

function frame() {
    console.info("redraw");
    if(done === true) {
        draw();
    } else {
        clearInterval(timeId);
    }
}
timeId = setInterval(frame, 1000/60);  // 每1000毫秒（每秒）执行60次

在设定好的时间之后执行函数

setTimeout(function, delay)

\quad 执行该函数将建立一个定时器，一旦定时器到期，就会执行指定的函数，该函数只会执行一次，如果需要再次执行，可以在该函数中调用setTimeout()。如果时间还未到，则可通过clearTimeout()取消该定时器。通常如下编写动画代码：

let timeId;
let done = false;

function frame() {
    console.info("redraw");
    if(done === true) {
        draw();
        timeId = setTimeout(frame, 20);
    }
}
timeId = setTimeout(frame, 20);  // 20毫秒之后执行loop函数

按屏幕刷新时执行

requestAnimationFrame(function)

\quad 该函数告诉浏览器执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该回调函数会在浏览器下一次重绘之前执行一次，如果需要继续执行，则需在回调函数中再次调用 requestAnimationFrame()。

\quad 浏览器在下一次重绘指的是显示器下一次刷新的时候，显示器刷新频率通常是60Hz，即每秒刷新60次。为了提高性能和电池寿命，在大多数浏览器里，当 requestAnimationFrame() 运行在后台标签页或者隐藏的