如何：Illustrator 图形到网络动画 [关闭]

Posted 2023-03-06

【中文标题】如何：Illustrator 图形到网络动画 [关闭]

【英文标题】：How to: Illustrator graphic to web animation [closed]

【发布时间】：2013-11-10 07:16:42

【问题描述】：

我得到了一个 Illustrator 图形，所有图形都是单独的形状（低于低分辨率屏幕截图），我需要在网站上使用它。

我需要为图形的各个部分设置动画，例如鸟儿飞翔、人和汽车移动以及灯光的开/关。

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

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

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

谢谢。

编辑：

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

    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()
);

【参考方案1】：

你可以使用 svg 来调整大小和像这样的动画 html

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid"  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
<g id="targets">
    <g id="red">
        <rect id="rect_red" x="110" y="115"   rx="8" ry="8" fill="#FF173D" stroke="#000000" transform="translate(-108, -114)" />
        <animateMotion id="animation_red" begin="0" end="indefinite" dur="10s" repeatCount="indefinite" path="M 0 0 H 500 Z"></animateMotion>
    </g>
    <g id="blue">
        <rect id="rect_blue" x="110" y="115"   rx="8" ry="8" fill="#0000aa" stroke="#000000" />
        <animateMotion id="animation_blue" begin="indefinite" end="indefinite" dur="10s" repeatCount="indefinite" path="M 0 0 H 500 Z"></animateMotion>
    </g>
    <g id="gree">
        <rect id="rect_green" x="10" y="300"   rx="8" ry="8" fill="#00aa00" stroke="#000000" />
        <animateMotion id="animation_green" begin="indefinite" end="indefinite" dur="5s" repeatCount="indefinite" path="M 0 0 H 300 Z"></animateMotion>
    </g>
</g>
</svg>    

您可以使用属性开始动画，例如“rect_red” 或者你可以使用 javascript 来像这样开始动画

//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);    

你可以像这样使用 css 来设置 svg 元素的样式

#rect_blue:hover
    fill:#0000ff;
    cursor:pointer;

#rect_red:hover
    fill:#aa0000;
    cursor:pointer;
    

http://jsfiddle.net/Kv8Ju/1/

【讨论】：

这很好，当我将 Illustrator 文件另存为 SVG 时，我必须对其进行测试，因为有大量的 SVG 形状 (250+)。因此，一旦我找到要制作动画的形状，可能需要很长时间才能为每个形状添加动画！

您可以在 javascript 中创建 animateMotion 并将它们添加到多个元素中，例如 http://jsfiddle.net/Kv8Ju/2/

我可以看到形状在 Chrome 中移动时留下的线条。知道这是为什么吗？

不知道但好像和中风有关http://jsfiddle.net/Kv8Ju/3/

【参考方案2】：

我没有使用 SVG 的经验。

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

所有 jQuery 也需要以百分比来完成，或者你需要在调整大小时让事情发生。

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

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

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

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

如果您需要我详细说明我的想法，我很乐意这样做。然而，除此之外，我认为没有更好/更快的方法来做到这一点（除非你认为 Flash 是一种好方法）。

【讨论】：

感谢您的回答，我坚决不会使用 Flash。你会推荐使用 Jquery 的 .animate 或 CSS keyframes 来制作动画吗？

既然你需要它在浏览器之间广泛兼容，jQuery 是唯一的选择，否则 Internet Explorer 将无法看到任何动画。 CSS 关键帧是 CSS3 属性，在 IE9 及更低版本中未实现。请记住，您不能使用 jQuery 1.9 以上版本，因为它已经放弃了对 IE8 及以下版本的支持。