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

canvas动画要求

1.不停渲染
2.可控

使用相关方法

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

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

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

最后

以上就是陶醉小伙为你收集整理的【canvas】动画封装（游戏前置）【canvas】动画封装（游戏前置）的全部内容，希望文章能够帮你解决【canvas】动画封装（游戏前置）【canvas】动画封装（游戏前置）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。