6.4_精灵动画制作器

最新推荐文章于 2020-03-21 20:41:30 发布

信封中的阳光

最新推荐文章于 2020-03-21 20:41:30 发布

阅读量599

点赞数

分类专栏： HTML5_CANVAS练习案例

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

版权

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

81 篇文章 1 订阅

订阅专栏

本文将深入探讨精灵动画制作器的使用，介绍如何通过该工具创建和管理游戏或应用中的精灵动画，涉及关键步骤和技术要点。

摘要由CSDN通过智能技术生成

6.4_精灵动画制作器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>精灵动画制作器</title>
        <style>
            body{
                background: #ddd;
            }
            #canvas{
                position: absolute;
                top: 30px;
                left: 10px;
                background: #FFFFFF;
                cursor: crosshair;
                margin-left: 10px;
                margin-top: 10px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
            input{
                margin-left: 15px;
            }
        </style>
    </head>
    <body>
        <input id="explosionButton" type="button" value="bomb" />
        <canvas id="canvas" width="462" height="500"></canvas>
    </body>
    <!-- 精灵对象 -->
    <script>
        var Sprite = function(name,painter,behaviors){
            if(name !== undefined){ this.name = name; }
            if(painter !== undefined){ this.painter = painter; }

            this.top = 0;
            this.left = 0;
            this.width = 10;
            this.height = 10;
            this.velocityX = 0;
            this.velocityY = 0;
            this.visible = true;
            this.animating = false;
            this.behaviors = behaviors || [];

        }

        Sprite.prototype = {
            paint:function(context){
                if(this.painter !== undefined && this.visible){
                    this.painter.paint(this,context);
                }
            },
            update:function(context,time){
                for(var i=0;i<this.behaviors.length;i++){
                    this.behaviors[i].execute(this,context,time);
                }
            }
        }
    </script>
    <!-- 图像绘制器 -->
    <script>
        var ImagePainter = function (imageUrl){
            this.image = new Image();
            this.image.src = imageUrl;
        }
        ImagePainter.prototype ={
            paint:function(sprite,context){
                //因为图像绘制器专门负责反复绘制精灵对象所用的图像，所以它并不负责图像的加载
                if(this.image.complete){
                    context.drawImage(this.image,sprite.left,sprite.top,sprite.width,sprite.height);
                }
            }
        }
    </script>
    <!-- 精灵动画制作器 -->
    <script>
        var SpriteAnimator = function(painters, elapsedCallback){
            this.painters = painters || [];
            this.elapsedCallback = elapsedCallback;
            this.duration = 1000;
            this.startTime = 0;
            this.index = 0;
        };

        SpriteAnimator.prototype = {
            start:function(sprite,duration){
                var endTime = +new Date() + duration;
                var period = duration/this.painters.length; // 绘制器组合中每个占用的时间
                var animator = this;
                var originalPainter = sprite.painter;
                var lastUpdate = +new Date();

                this.index = 0;
                sprite.animating = true; //防止按钮重复点击
                sprite.painter = this.painters[this.index];

                requestAnimationFrame(function spriteAnimatorAnimate(time){
                    time = +new Date();
                    if(time<endTime){
                        if(time - lastUpdate >period){ //时间间隔如果达到图片时间间隔就换下一个图片绘制器绘制
                            sprite.painter = animator.painters[++animator.index];
                            lastUpdate = time;
                        }
                        requestAnimationFrame(spriteAnimatorAnimate);
                    }else{
                        animator.end(sprite,originalPainter);
                    }
                });
            },
            end:function(sprite,originalPainter){
                if(this.painters == explosionPainters){
                    sprite.animating = false;
                    console.log('结束了');
                }
                if(this.elapsedCallback){
                    this.elapsedCallback(sprite);
                }else{
                    sprite.painter = originalPainter;
                }
            }
        }
    </script>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var explosionButton = document.getElementById('explosionButton');

        var bomb_left = 100;
        var bomb_top = 80;
        var bomb_width = 180;
        var bomb_height = 130;

        var num_explosion_painters = 9;
        var num_fuse_painters = 9;

        var bombPainter = new ImagePainter('img/bomb.jpg');
        var bombNoFusePainter = new ImagePainter('img/bomb-no-fuse.jpg');

        var fuseBurningPainters =[];  //引线点燃的绘制器组合
        var explosionPainters = []; //爆炸过程中的绘制器

        //精灵动画制作器
        var fuseBurningAnimator = new SpriteAnimator(fuseBurningPainters,function(){
            bomb.painter = bombNoFusePainter;
        });

        var explosionAnimator = new SpriteAnimator(explosionPainters,function(){
            bomb.painter = bombPainter;
        });

        //bomb精灵对象
        var bomb = new Sprite('bomb',bombPainter);

        //初始化
        bomb.left = bomb_left;
        bomb.top = bomb_top;
        bomb.width = bomb_width;
        bomb.height = bomb_height;

        for(var i =1; i<=num_fuse_painters;i++){
            fuseBurningPainters.push(
                new ImagePainter('img/fuse-0'+ i +'.jpg'));
        }

        for(var i =1; i<=num_explosion_painters;i++){
            explosionPainters.push(
                new ImagePainter('img/explosion-0'+ i +'.jpg'));
        }

        //逐帧动画
        window.requestAnimationFrame(animate);

        //函数
        function animate(now){
            console.log('动画持续绘制中');
            now = +new Date();
            context.clearRect(0,0,canvas.width,canvas.height);

            //负责绘制
            bomb.paint(context);
            window.requestAnimationFrame(animate);
        }

        //事件
        explosionButton.onclick = function(){
            if(bomb.animating){ //动画一但开始，在没有结束前，再点击是不能有反应的
                console.log('不执行点击操作');
                return;
            };

            //燃烧引线给2秒钟
            //只是负责更新sprite的绘制器
            fuseBurningAnimator.start(bomb,2000);

            //等待3秒钟，然后爆炸动画需要1秒
            setTimeout(function(){
                explosionAnimator.start(bomb,1000);

                //等待2s，重置画面
                setTimeout(function(){
                    bomb.painter = bombPainter;
                },2000)
            },3000);
        }
    </script>
</html>