Jquery 如何：Illustrator图形到web动画

我已经提供了一个Illustrator图形，所有的个人形状，（下面是低分辨率屏幕截图），我需要在网站上使用

我需要动画部分的图形，如鸟类飞行，人和汽车移动和灯开/关

问题是，我应该怎么做？我一直在研究SVG、CSS和JQuery动画。到目前为止，我们能够非常有效地使用CSS和JQuery

如果我能在有人重新调整浏览器窗口（响应性布局）时以某种方式使动画工作起来，那将是非常棒的，这就是我开始研究SVG的原因。我还需要动画在不同浏览器之间广泛兼容

有什么例子吗？你推荐什么

谢谢

编辑：

我将使用JQuery和关键帧动画。我使用的Jquery动画函数是：

    function animatethis(targetElement, speed, options, options2) {
        $(targetElement).animate(options,
        {
            duration: speed,
            complete: function ()
            {
                targetElement.animate(options2,
                {
                    duration: speed,
                    complete: function ()
                    {
                        animatethis(targetElement, speed, options, options2);
                    }
                });
            }
        });
    };

用法示例：

animatethis（$（'.big-cloud1'），40000，{'left'：'+=120%}，{'left'：'-=120%}）

我还计算了重新调整浏览器大小时各个图像的大小。我已经基于动画在全宽的最大比率

以下是此操作的代码：

// get main image
var mainImage = $('.main-bg');

// Create new offscreen image to test
var theImage = new Image();
theImage.src = mainImage.attr("src");

// Get accurate measurements from that.
var maxWidth = theImage.width;

jQuery.fn.resizeRatio = function(newHeight){
    // work out new ratio
    var currentWidth = $('.main-bg').width();
    var diff = maxWidth - currentWidth;
    var precent = diff / maxWidth;

    // get current image width
    var currentImage = new Image();
    currentImage.src = $(this).attr("src");
    var currentWidth = currentImage.width;

    // apply new width
    $(this).width(currentWidth - (currentWidth*precent))

}

var initAnimation = function(){
    $('#animation').imagesLoaded(function(){
        $('#animation img').not('.sun, .main-bg').each(function( index ) {
            $(this).resizeRatio()
        });     
    });
}
initAnimation()

$(window).resize(function(){
    initAnimation()
});

---

我没有SVG方面的经验

然而，我可能会使用CSS和jQuery制作类似的东西。使用百分比调整CSS中的图像大小，您可能能够在所有不同类型的屏幕上使用此功能。然而，要使所有这些都能很好地协同工作，需要做大量的工作

所有jQuery也需要以百分比的形式完成，或者您需要在调整大小时进行操作

jQuery(window).resize(function(){
    // Do your magic
});

由于您主要需要处理图像的宽度，而不是高度，因此我可能会使用以下CSS：

img {
    width: (certain amount in percentages)
    height: auto;
}

这将确保图像保持在正确的比例。（但考虑到您计划开发这样一个项目，我猜您已经知道了这一点）

---

如果您需要我进一步阐述我的想法，我很乐意这样做。但是，除此之外，我看不到更好/更快的方法（除非您认为Flash是一种好方法）。

您可以将svg与调整大小和动画一起使用，如下所示
HTML

您可以使用css设置svg元素的样式，如下所示

//jQuery    
$(document).ready(function () {
$("#rect_blue").click(function(){
     $("#animation_blue").get(0).beginElement();
});
$(window).resize(function(){
     $("#animation_green").get(0).beginElement();
});
});    
//or javascript    
document.getElementById('rect_blue').addEventListener("click", function(){
    document.getElementById('animation_blue').beginElement();
}, false);
window.addEventListener("resize", function(){
    document.getElementById('animation_green').beginElement();
}, false);    

#rect_blue:hover{
    fill:#0000ff;
    cursor:pointer;
}
#rect_red:hover{
    fill:#aa0000;
    cursor:pointer;
}    

---

谢谢你的回答，我坚决不使用Flash。你会推荐使用Jquery的

.animate

或CSS

关键帧来制作动画吗？因为你需要它在浏览器之间广泛兼容，Jquery是唯一的选择，否则Internet Explorer将无法看到任何动画。CSS关键帧是CSS3属性，未在IE9及以下版本中实现。请记住，您不能使用1.9版以上的jQuery，因为这已经放弃了对IE8及以下版本的支持。这很好，我必须对它进行测试，因为当我将Illustrator文件保存为SVG时，有大量SVG形状（250+）。因此，一旦我找到要设置动画的形状，为每个形状添加动画可能需要很长时间！您可以在javascript中创建animateMotion，并将它们添加到多个元素中，就像这样，我可以看到在Chrome中移动形状时留下的线条。知道为什么吗？不知道，但似乎与中风有关
#rect_blue:hover{
    fill:#0000ff;
    cursor:pointer;
}
#rect_red:hover{
    fill:#aa0000;
    cursor:pointer;
}