《TypeScript图形渲染实战：2D架构设计与实现》 —3.2.2 启动动画循环和停止动画循环

3.2.2  启动动画循环和停止动画循环

　　声明一个Application类，具有如下成员变量：

export class Application {

    // _start成员变量用于标记当前Application是否进入不间断地循环状态

    protected  _start : boolean = false ;

    // 由Window对象的requestAnimationFrame返回的大于0的id号

    // 可以使用cancelAnimationFrame ( this ._requestId )来取消动画循环

    protected  _requestId : number = -1 ;

    // 用于基于时间的物理更新，这些成员变量类型前面使用了!，可以进行延迟赋值操作

    protected  _lastTime ! : number ;

    protected  _startTime ! : number ;

}

　　可以看到，上面的代码中的所有成员变量都使用了protected访问修饰符，意味着Application本类，以及继承自Application的子类都能访问这些成员变量。作为一个经验，如果我们设计的类能够被继承、被扩展，那么最好将成员变量声明为protected，这样子类也能访问这些成员变量。

　　接着来看一下start / stop / isRunning成员方法。具体代码如下：

public start  ( ) : void {

    if ( ! this . _start ) {

        this . _start = true ;

        this . _requestId = -1 ;         // 将_requestId设置为-1

        // 在start和stop函数中，_lastTime和_startTime都设置为-1

        this . _lastTime = -1 ;

        this . _startTime = -1 ;

        // 启动更新渲染循环

        this . _requestId = requestAnimationFrame ( ( elapsedMsec : number ) :

        void => {

            // 启动step方法

            this . step ( elapsedMsec ) ;

        } ) ;

    }

}

public stop  ( ) : void {

    if ( this . _start ) {

        // cancelAnimationFrame函数用于:

        //取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的

        动画帧请求

        cancelAnimationFrame ( this . _requestId ) ;

        this . _requestId = -1 ;  // 将_requestId设置为-1

        // 在start和stop函数中，_lastTime和_startTime都设置为-1

        this . _lastTime = -1 ;

        this . _startTime = -1 ;

        this . _start = false ;  

    }

}

// 用于查询当前是否处于动画循环状态

public isRunning ( ) : boolean {

    return this . _start ;

}

　　上述代码很简单，主要是启动动画循环、查询当前是否处于动画循环，以及结束动画循环这3种操作，接下来看一下step这个成员方法。