5.10.2_动画计时器

来源：互联网发布：初音未来捏脸数据编辑：程序博客网时间：2024/06/11 21:37
5.10.2_动画计时器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>动画计时器</title>        <style>            body{                background: #fff;            }            #canvas{                background: #eee;            }            #controls{                position: absolute;                left: 25px;                top: 25px;            }        </style>    </head>    <body>        <div id="controls">            <input id="startStopButton" type="button" value="开始"  />        </div>        <canvas id="canvas" width="1000" height="600"></canvas>    </body>    <!-- 秒表的构造函数 -->    <script>        StopWatch = function(){};        StopWatch.prototype = {            startTime: 0,            running: false,            elapsed: undefined, //过去的时间            start:function(){                this.startTime = +new Date();                this.elapsed = undefined;                this.running = true;            },            stop:function(){                this.elapsed = (+new Date()) - this.startTime;                this.running = false;            },            getElapsedTime:function(){                if(this.running){                    return (+new Date()) - this.startTime;                }else{                    return this.elapsed;                }            },            isRunning:function(){                return this.running;            },            reset:function(){                this.elapsed = 0;            }        }        AnimationTimer = function(duration){            this.duration = duration;        }        AnimationTimer.prototype ={            duration:undefined,            stopwatch:new StopWatch(),            start:function(){                this.stopwatch.start();            },            stop:function(){                this.stopwatch.stop();            },            getElapsedTime:function(){                var elapsedTime = this.stopwatch.getElapsedTime();//              if(!this.stopwatch.running){//                  return undefined;//              }else{                    return elapsedTime;//              }            },            isRunning:function(){                return this.stopwatch.isRunning();            },            isOver:function(){                return this.stopwatch.getElapsedTime()>this.duration;            }        }    </script>    <script>        var canvas = document.getElementById('canvas'),            context = canvas.getContext('2d'),            startStopButton = document.getElementById('startStopButton'),            animationTimer = new AnimationTimer(5000);        startStopButton.onclick = function(){            if(this.value == '开始'){                this.value = '结束';                animationTimer.start();                requestAnimationFrame(animate);            }else{                this.value = '开始';                animationTimer.stop();            }        }        function animate(){            if(animationTimer.isRunning()&&!animationTimer.isOver()){                console.log('动画还在持续中,当前已进行了'+animationTimer.getElapsedTime());                requestAnimationFrame(animate);            }else if(animationTimer.isOver()){                animationTimer.stop();                startStopButton.value = '开始';                console.log('自动结束了，时间为'+animationTimer.getElapsedTime());            }else{                console.log('手动停止了动画，停止时已运行动画时间为'+animationTimer.getElapsedTime());            }        }    </script></html>
阅读全文
0 0