1、JS动画的准备工作

最新推荐文章于 2024-07-20 01:15:00 发布

奇遇世界

最新推荐文章于 2024-07-20 01:15:00 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/late_in_autumn/article/details/89921725

版权

JavaScript动画基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

本系列主要借鉴《HTML5+JavaScript 动画基础》一书，对使用JavaScript来实现动画的相关知识点进行简要梳理，让大家能够一目了然动画实现的逻辑以及如何用代码实现动画的整个效果。

一、HTML5基本文档

首先我们确定一份基本的HTML5文件作为初始模板，后期所有的动画实例将基于此模板的基础上进行开发，后期会根据开发需要在初始模板上进行必要的补充。

1、项目animation目录结构如下：

2、index.html 文件代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <title>JavaScript动画学习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #eeeeee;
        }
        canvas {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400">
        <p>This brower dose not support the <code>canvas</code> element.</p>
    </canvas>
    
    <script src="/js/utils.js"></script>
    <script>
        window.onload = function() {
            let canvas = document.getElementById("canvas");
            if (!supportCanvas(canvas)) {
                return;
            }
            let context = canvas.getContext("2d");

            drawScreen(canvas, context);
        };

        function drawScreen(canvas, context) {
            let canvasW = canvas.width,
                canvasH = canvas.height;

            (function drawFrame() {
                window.requestAnimationFrame(drawFrame);
                context.clearRect(0, 0, canvasW, canvasH);
                
                // write you code here...
            }());
        }

        function supportCanvas(e) {
            return !!e.getContext;
        }
    </script>
</body>
</html>

如果想直接复制代码到编辑器运行，还需要在根目录下新建 js 文件夹，并在 js 文件夹里新建 utils.js 文件。在浏览器运行该代码后，我们看不到任何内容，因为我们只是搭好了一个框架，还没有进行相应的动画开发代码书写。

二、细说HTML5基本文档

1、CSS

由上代码我们发现，CSS 代码只声明了文件中 body 和 canvas 原始的背景色，以方便我们辨别canvas 的区域，并且使用 *{margin: 0;padding: 0;} 来设置所有元素的 margin 和 padding 为 0，以避免HTML标签自带的CSS样式造成的干扰。

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #eeeeee;
}
canvas {
    background-color: #ffffff;
}

2、HTML

我们在 body 元素中放置了一个 canvas 元素。为了我们可以在浏览器中清晰的看到 canvas 元素，我们为 canvas 设定了 width 和 height ，同时通过指定 id，我们可以使用 DOM 接口访问该元素。

<canvas id="canvas" width="600" height="400">
    <p>This brower dose not support the <code>canvas</code> element.</p>
</canvas>

3、JavaScript

首先引用了一个 utils.js 文件，我们会将一些工具函数放在该文件里并加以维护。在该文件中，许多工具函数会作为属性添加到一个名为 utils 的 JavaScript 全局对象中。这样做可以避免在全局名称空间中堆满许多函数。为此，我们在 utils.js 文件中首先声明一个空对象 utils 并把它附加到作为全局命名空间的 window 对象上：

window.utils = {};

我们的动画对象主要在 drawScreen(canvas, context) 函数里进行定义和初始化，动画的实现过程则是在 drawFrame() 函数里进行动画的绘制。

(function drawFrame() {
    window.requestAnimationFrame(drawFrame);
    context.clearRect(0, 0, canvasW, canvasH);
    
    // write you code here...
}());

当执行drawFrame函数时，

window.requestAnimationFrame将drawFrame 函数放入队列等待在下一个动画间隙中再次执行，而当它再次执行时又会重复这一过程。由于不断地请求执行该函数，因此就串联成了一个循环。所以，该函数中定义的代码会不断地调用，使得我们可以在 canvas 上以细微的间隔时间绘制动画。

由于 requestAnimationFrame 是一个相对新的功能，因此目前的浏览器还致力于各自的实现。如果你希望代码具备更好的跨平台性，下面的代码就可以用来规范该函数在不同浏览器中的实现。

if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function (callback) {
        return window.setTimeout(callback, 1000/60);
    });
}

该代码先检查了

window.requestAnimationFrame 函数的定义是否存在，如果不存在，就遍历已知的各种浏览器实现并替代该函数。如果还是找不到一个与浏览器相关的实现，最终就会采用基于 JavaScript 定时器的动画以每秒 60 帧的间隔调用 setTimeout 函数。

由于该针对浏览器的环境检查会被所有实例用到，因此把这个函数放入了 utils.js 文件中以导入 HTML5 文件中。

utils.js 文件初始代码如下：

if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function (callback) {
        return window.setTimeout(callback, 1000/60);
    });
}

window.utils = {};

源码下载地址：

https://gitee.com/dplate/animation_template_code.git