5.10.2_动画计时器

最新推荐文章于 2019-06-20 13:51:57 发布

信封中的阳光

最新推荐文章于 2019-06-20 13:51:57 发布

阅读量246

点赞数

分类专栏： HTML5_CANVAS练习案例文章标签：动画

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/72301815

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
5.10.2_动画计时器

5.10.2_动画计时器<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动画计时器</title> <style> body{ background: #fff; } #
复制链接

扫一扫

专栏目录