井井客

搜索

Canvas 硬币动画

剪切固定尺寸的图像,并绘制在 Canvas 上循环更新显示,就产生了银币旋转的动画效果。个人感觉这个同样可以使用CSS3的动画帧的效果来完成~

Canvas 硬币动画

原文摘自:http://canvas.migong.org/category/canvas-animation/page/4

代码如下,建议可以看一下原文,里面有解释更多。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas 硬币动画</title>
    <style>
        body {
            background-color:#FFF9ED;
            overflow: hidden;
        }
        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        canvas{
            position:absolute;
            margin:auto;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }
    </style>
</head>
<body>
    <canvas id="coinAnim"></canvas>
    <script>
        var coinImage = new Image;
        coinImage.src = 'http://canvas.migong.org/wp-content/uploads/2016/02/coin-sprite-animation.png';

        function sprite (options) {
            var that = {},
                frameIndex = 0,
                tickCount = 0,
                ticksPerFrame =  options.ticksPerFrame || 0,
                numberOfFrames = options.numberOfFrames || 1;
            
            that.context = options.context;
            that.width = options.width;
            that.height = options.height;
            that.image = options.image;
            that.loop = options.loop;
            
            //渲染函数
            that.render = function () {
                //清空 Canvas
                that.context.clearRect(0, 0, that.width, that.height);
                //绘制图像,产生动画效果
                that.context.drawImage(
                    that.image,                                 //图像
                    frameIndex * that.width / numberOfFrames,   //开始剪切的 X 坐标位置
                    0,                                          //开始剪切的 Y 坐标位置
                    that.width / numberOfFrames,                //被剪切图像的宽度
                    that.height,                                //被剪切图像的高度
                    0,                                          //在画布上放置图像的 X 坐标位置
                    0,                                          //在画布上放置图像的 Y 坐标位置
                    that.width / numberOfFrames,                //要使用的图像的宽度
                    that.height);                               //要使用的图像的高度
            };
            
            //更新循环函数
            that.update = function () {
                tickCount += 1;
                if (tickCount > ticksPerFrame) {
                    tickCount = 0;
                    //frameIndex 重新赋值
                    if (frameIndex < numberOfFrames - 1) {
                        frameIndex += 1;
                    } else if (that.loop) {     //重新循环
                        frameIndex = 0;
                    }
                }
            };
            return that;
        }

        //初始化
        var coinCanvas = document.getElementById('coinAnim');

        coinCanvas.width = 100;
        coinCanvas.height = 100;

        //硬币雪碧图对象
        var coin = sprite ({
            context: coinCanvas.getContext("2d"),
            width: 1000,            //宽
            height: 100,            //高
            image : coinImage,      //硬币图
            ticksPerFrame : 4,      //旋转速度(60/4=15fps每秒)
            numberOfFrames: 10,     //一共10帧
            loop: true              //是否循环
        })

        //循环
        function gameLoop () {
            window.requestAnimationFrame(gameLoop);
            
            coin.update();
            coin.render();
        }

        //硬币图片加载完成后执行 gameLoop 函数
        coinImage.addEventListener("load", gameLoop);
    </script>
</body>
</html>

文章TAG:canvas

作者:井井客整理来源:互联网
本文标题:Canvas 硬币动画
本文链接:http://www.jingjingke.com/c/24289.html

上一篇:Canvas 颗粒文字动画
下一篇:Canvas 飘浮的云动画

文章分类

相关阅读

随便看看