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帧。 {0}代码的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/

HTML中的动画没有滞后

1 个答案: