Question

我正在为客户设计一个网站，他们希望在每个页面的顶部都有一些动画（非交互式）。任何浏览器和设备都可以访问该站点。你能帮我找一个解决方案吗？

场景1：在Flash中设计动画。好处：它很轻。问题：不会在iPad / iPones中显示。
场景2：使用HTML转换动画（我在Flash中使用Toolkit for createJS，它将动画转换为HTML文档加上.JS）。然后我将动画包含在幻灯片放映的iFrame中（我使用LayerSlider）。问题：Firefox对iFrames存在巨大的问题，只是它没有显示它（虽然如果我点击“重新加载此框架，它显示，但当然我们不希望访问者这样做，不是吗？）。同样在Android中它是不可见的。
场景3：将动画转换为动画GIF。 Problme：不会在Android中显示，加上它是一个沉重的文件。

您能否向我推荐在任何浏览器中进行动画显示的最佳解决方案？ Flash，iFrame和animatedGIF中的HTML似乎无法正常工作：任何其他建议？ HTML和iFrame在我看来是最好的，如果只有Firefox会接受它。但也许还有其他一些我没想过的格式？

非常感谢您的帮助，也许我正在努力重新发明轮子，您的经验可以帮助我！

PS：理想情况下，我想将它包含在WP站点的幻灯片（LayerSlider）中。

Answer 1

您可以尝试检测用户代理和操作系统等，然后以编程方式确定要显示的图像类型。

对于PHP，请参阅http://www.php.net/manual/en/function.get-browser.php

Answer 2

我正在设计的是最初在flash中构建的复杂动画。作为一种解决方案，我将它们转换为HTML5并将它们保存为单独的网页，然后在滑块中我使用iFrame来调用它们。使用Flash转换工具，我将此片段添加到JS文件中以实现响应：

$(document).ready( function(){
var c = $(‘#respondcanvas’);
var ct = c.get(0).getContext(’2d’);
var container = $(c).parent();

$(window).resize( respondcanvas );

function respondcanvas(){
c.attr(‘width’, $(container).width() );
c.attr(‘height’, $(container).height() );}

respondcanvas();`

通过这种方式，动画也可以完全响应并与所有浏览器兼容。

希望这个解决方案可以帮助他人。

响应式动画跨浏览器工作

2 个答案: