如何:Illustrator图形到网页动画

Question

我已经提供了一个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()
});

Answer 1

我没有使用 SVG 的经验。

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

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

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

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

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

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

如果您需要我进一步阐述我的想法，我很乐意这样做。然而除此之外，我认为没有更好/更快的方法来做到这一点（除非您认为 Flash 是一个好方法）。