HTML动画，无滞后

Animation in HTML without lag

本文关键字：滞后 动画 HTML      更新时间：2023-09-26

我正在尝试使用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.精灵

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

我无法创建一个小提琴，因为我找不到一个免费的图像托管网站，我可以上传图像，而不是自动缩小图像。

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

图像

谢谢！

由于画布是您的问题，我假设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/
相关文章：