【canvas】动画封装（游戏前置）【canvas】动画封装（游戏前置）

106 阅读 0 评论 70 点赞

我是靠谱客的博主陶醉小伙，这篇文章主要介绍【canvas】动画封装（游戏前置）【canvas】动画封装（游戏前置），现在分享给大家，希望可以做个参考。

【canvas】动画封装（游戏前置）

在这里插入图片描述

canvas动画要求

1.不停渲染
2.可控

使用相关方法

1.es6定义类解决封装问题
2.requestAnimationFrame 解决动画渲染问题（兼容替换方法 setInterval，setTimeout）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
export default class AnimationFrame {
    constructor(p) {
        p = p || {};
        this.repeat = p['repeat']; // 需要执行的循环方法句柄
        this.stopCallback = p['stopCallback']; // 需要执行的回调方法句柄
        this.running = false; // 属性，查看该对象是否在运行
        this.requestStop = false; // 循环执行方法中如果发现该属性为true，就停止执行
        this.repeatCount = 0; // 循环执行的次数。
    }

    _run(source) {
        if (source.requestStop) return;
        if (source.repeat) {
            requestAnimationFrame(function () {
                source._run(source);
            });
            source.repeat(source.repeatCount++);
        }
    }

    start() {//开始渲染
        this.repeatCount = 0;
        this.running = true;
        this.requestStop = false;
        this._run(this);
    }
    
    stop() {//停止渲染
        this.requestStop = true;
        this.running = false;
        if (this.stopCallback) {
            this.stopCallback();
        }
    }
}

注意点

1.参数中repeat和stopCallback只是句柄，不是回调函数，注意用法
2.stop后并不是初始化，状态仍旧保持，start后会继续渲染

使用示例

假设封装文件名为requestAnimationFrame.js

复制代码

1
2
3
4
5
6
7
8
9
10
import requestAnimationFrame from '../requestAnimationFrame.js'
let RAF = new requestAnimationFrame();
RAF.repeat=function(repeatCount){ //repeatCount参数选填，可以让对象模拟出状态
	/*
  	渲染主体内容
  */
}
RAF.start();//开始渲染
RAF.stop();//停止渲染