响应式动画跨浏览器工作答案

【问题标题】：Responsive animation working cross-browser响应式动画跨浏览器工作
【发布时间】：2017-01-17 07:50:31
【问题描述】：

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

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

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

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

PS：理想情况下，我想将它包含在 WP 网站的幻灯片 (LayerSlider) 中。

【问题讨论】：

你在看什么类型的动画？是制作蝴蝶翅膀拍动的高级动画吗？还是只是淡入淡出？视差动画？那里有很多...

标签： wordpress flash animation iframe cross-browser

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我正在设计的是最初内置于 Flash 中的复杂动画。作为一种解决方案，我将它们转换为 HTML5 并将它们保存为单独的网页，然后在滑块中我使用 iFrames 来调用它们。然后我使用 Flash 转换工具将这个 sn-p 添加到 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();`

这样动画也完全响应并兼容所有浏览器。

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

【讨论】：