无延迟的 HTML 动画

Question

我正在尝试使用HTML 和jQuery 创建一个旋转动画。

我尝试了两种不同的方法：

1) 编写了我的自定义动画函数来制作动画。

    $(window).load(function() 
    {
        $(".vfx_1").css({width:'550px', height:'400px', position:'absolute', top: '250px', left: '150px'});

        //40 milliseconds for 1 frame
        //always put the width, height, and position of the vfx and rushers to the first array
        //multipliers for background image from left, top, interval, visibility flag(false by default, true for hidden), absolute top, absolute left,
        //width, height

        var vfx_1_anim = [[0,0,40,false,0,0,550,400],[0,1,40,false],[0,2,40,false],[0,3,40,false],[0,4,40,false],[0,5,40,false],[0,6,40,false],[0,7,40,false],[0,8,40,false],[0,9,40,false],[1,0,40,false],[1,1,40,false],[1,2,40,false],[1,3,40,false],[1,4,40,false],[1,5,40,false],[1,6,40,false],[1,7,40,false],[1,8,40,false],[1,9,40,false],[2,0,40,false],[2,1,40,false],[2,2,40,false],[2,3,40,false],[2,4,40,false],[2,5,40,false],[2,6,40,false],[2,7,40,false],[2,8,40,false],[2,9,40,false]];

        //_animate('.blitzbot', 'timeout.png', blitz_anim);
        _animate('.bottom_rotator', 'bottomTurning.png', vfx_1_anim);

        function _animate(class_name, bg, anim, hide)
        {
            var hide = (typeof anim[0][3] === "undefined") ? false : anim[0][3];

            if(hide) $(class_name).css("visibility", "hidden");
            else $(class_name).css("visibility", "visible");

            $(class_name).css({background:"url("+ bg +") "+ (-anim[0][0] * $(class_name).width()) + "px "+ (-anim[0][1] * $(class_name).height())  +"px"});
            if(typeof anim[0][4] != "undefined") $(class_name).css("top", anim[0][4]);
            if(typeof anim[0][5] != "undefined") $(class_name).css("left", anim[0][5]);
            if(typeof anim[0][6] != "undefined") $(class_name).css("width", anim[0][6]);
            if(typeof anim[0][7] != "undefined") $(class_name).css("height", anim[0][7]);
            anim.splice(0,1);

            if(anim.length>0)
            {
                setTimeout(function() 
                {
                    _animate(class_name, bg, anim);
                }, anim[0][2]);
            }   
        }
    });

2.SPRITELY

在这两种情况下，我的动画都运行得很慢。在 vfx_1_anim 中，我只去了 30 帧，但实际上有 100 帧。 spritely 代码的 png 序列图像的大小约为 55000 x 400，自定义动画代码的大小约为 5500x4000。

我无法创建小提琴，因为我找不到一个免费的图片托管网站，我可以将图片上传到该网站，但不能自动缩小它们。

我的问题：如何创建一个不会因图像尺寸和帧数大而受到影响的动画。帆布会是一个不错的选择吗？链接到我用于精灵动画的图像。

IMAGE

谢谢！

Answer 1

由于你的问题是画布，我假设 CSS3（在现代浏览器中）也是一种选择。

.spinner {
    width: 550px;
    height: 400px;
    background-image: url("http://fc04.deviantart.net/fs71/f/2013/202/5/e/bottom_turning_1_by_skyrbe-d6ehlac.png");
    animation: play 1s steps(100) infinite;
}

@keyframes play {
   from { background-position: 0px; }
     to { background-position: -55000px; }
}

http://jsfiddle.net/xCv3L/1/

仅支持 HTML5 / CSS3。当然你可以使用javascript来操作css样式和自定义动画速度或背景图片等参数。

一些注意事项：

• 在 jsfiddle 上有一些最初的口吃。预加载图像可能会有所帮助？本地副本在我的电脑上没有卡顿。
• 基本思路来自http://jsfiddle.net/simurai/CGmCe/