是javascript / HTML5能够支持“flash like”动画和拖放

Question

由于苹果浏览器不支持闪存或银光，因此有一种真正的动机可以避免闪存/银光，以避免在构建网站时丢失观众。话虽如此，有些功能似乎只能在flash / silverlight中实现

例如alot of simple games where you can move things on the screen like this site似乎都是用flash构建的。还有，a lot of drag and drop functionality where you can drag one object onto another like these game site s。   经过大量的搜索后，我找不到任何基于flash或silverlight的内容。

特别是我正在寻找将一个元素拖放到另一个元素上的支持

我的问题是，如果你需要这种类型的功能是javascript / html 5能够做这种类型的东西（所以你可以支持iphone / ipad）或者你运气不好。

是否有任何资源突出显示尝试执行此类交互功能的示例或建议，以及如何/如果您可以在没有silverlight / flash的情况下执行此类型的操作。此外，如果有任何现有网站的好例子，那么今天这样做也会很好。

Answer 1

这将是关于html5与flash竞争的能力的长期讨论。

在我看来，jquery与性能flash或silverlight动画没有任何关系。

如果比较是拖放，菜单下拉菜单，fadeIn.fadeOut - jQuery很有竞争力。

如果我将看到同时移​​动大量图层和对象的jQuery漫画 - 我可能会同意jQuery具有竞争性。

将事情进行比较以查看差异：

1. 光栅图片上的放大镜

2. 烟/水/火灾仿真

3. 复合3D对象，例如具有深分支的分形

当HTML5拥有它时 - 我会同意它具有竞争力的表现。我今天看到的只是图片幻灯片和几款适用于html5的游戏。

Answer 2

您可以在Easel.js中使用Grant Skinner查看Pirates Love Daisies。

此外，其他框架是：

• enchant
• limeJS
• akihabara

Answer 3

JQuery UI已经有很长一段时间了，适用于所有现代浏览器，而不仅仅是HTML5

JQuery UI Demos

Answer 4

你应该结帐canvasdemos.com。它有很多可以做的好例子。您可以查看这些背后的源代码 - 有些甚至可以帮助您。例如pool game

其他很好的例子包括doom like "game"（你可以在3D地牢中走动）。

Frog Log游戏是10KB coding challange

中的赢家

同样this是在Google中搜索 html5动画演示的第一个结果。它有48个演示的链接。其中一些真的很酷。不幸的是，很多这些代码已被缩小，但它们仍然可能会给你一些关于你可以实现的想法。

所以这对于制作简单的换装类游戏来说很好。但是，如果您希望制作CPU密集型产品，那么您应该研究一些性能基准测试，例如this。基于HTML5 / Canvas的动画在性能方面仍远远落后于flash。在各种浏览器中获得一致的行为也是一个问题。

Answer 5

HTML5和相关技术（WebSockets，WebGL，网络存储，文件API，媒体捕获等）正在快速向与Flash / Silverlight中可以完成的工作（在某些情况下超过）进行平等。

HTML5 Rocks slides是一个合理的起点，看看有什么可能（你需要一个支持HTML5的浏览器）。特别是，Canvas example演示了图像处理（拖动，旋转，调整大小），这是实现装扮游戏所需的核心功能。

Answer 6

Flash专为动画而设计。补间旨在用于动画图纸。因为它销售给每个汤姆，迪克和哈利，人们开始使用它来制作丑陋的菜单和飞行内容文本。而Adobe则遵循这一新用法，构建了一个完全混乱的居所。

Flash仍然是网络上最好的动画引擎，它永远不应该迎合完整的Flash网站。

许多HTML5粉丝都在那里，但需要说明的是：Canvas落后于Flash十年。但对于动画以外的一切，Flash都是令人厌恶的。

Answer 7

在旧版浏览器中，您可以模拟来自DOM 的elemnts 的拖放，但在新浏览器中，您还可以拖放文件（如图像）并且它：https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

对于类似Flash的动画，很长一段时间都可以使用JavaScript，但是做一些bug非常困难并且通常会减慢页面速度。 现在，有画布和WebGL允许您以更方便的方式（对于复杂的方式）。 而使用canvas，WebGL，CSS动画（如果你使用tric使浏览器认为它是3D），你会加速CPU，因此速度更快。 还有requestAnimationFrame，它允许优化回流，从而优化脚本。

我知道可以做什么的最好的例子是网络的Quake II端口：

• 视频：http://www.youtube.com/watch?v=XhMN0wlITLk&feature=player_embedded

• 项目网站：http://code.google.com/p/quake2-gwt-port/

Answer 8

正如上面的答案中所说的那样，我很确定j query's draggable/droppable plugin将为你完成这项工作，如果你只需要一个基本的拖放装扮类型的游戏。基本前提是：

1. 在默认示例中，您穿着衣服的头像将是一个带有png / gif.jpg背景图像的女孩/男孩的div（而不是背景中的橙色滴）

   < / LI>

2. 衣服将是示例中的“将我拖到我的目标”对象。您可以将它们创建为div或甚至包含可拖动类的图像标签，这样您就可以拖动它们并将它们放在橙色框/头像中。

3. 你可以使用ajax保存数据，这也包括在那里的例子中（或网上的其他教程，很容易）

4. ???

5. PROFIT

试一试，亲眼看看吧。如果您需要任何帮助，可以再次询问，但我认为jquery UI答案是您问题的有效答案。

我没有一个示例网站向您展示，但我非常确定给出一些图像和东西我可以掏出一些东西......如果我有时间哈哈。

Answer 9

你绝对可以做到这些＆＃34; flash-like＆＃34;现在在HTML5 Web浏览器中的东西。查看http://www.chromeexperiments.com/

上的示例

Answer 10

实际上HTML5 / CSS3 / JS可以做任何flash都可以做的事情。但是有一些缺点：

• 尚未成熟。许多错误，根据浏览器的实现有很多差异，许多人根本就没有支持它的浏览器。
• Adob​​e有一套非常好的工具可以帮助制作复杂的Flash应用程序。对于HTML5，这不存在（但是？）。

另一方面，既不闪存，HTML5也不会真正在手机上闪耀。无论如何，人们更喜欢原生应用您可能需要提供网络版本，但您还需要一个应用版本（每个大型手机播放器一个）。

我们可以推测HTML5将在未来几年内如何统治这个词，但截至目前，影响仅限于看起来很漂亮的演示，它消耗了100％的CPU（对于移动设备来说真的非常糟糕）。

对于拖放支持，任何人都可以这样做 - 在HTML4和任何浏览器中使用几行javascript - 在一个页面内，或者可以考虑在同一网站的两个浏览器窗口之间进行。做拖拽在浏览器和任何本机桌面应用程序之间删除是另一回事。

Answer 11

关于HTML5在拖放方面可以做些什么的一个很好的例子，我建议你看一下这个article，特别是开头的简短演示。本文还重点介绍了HTML5附带的其他一些好东西，例如localStorage和HTML5 Canvas。

有关HTML5 drag-n-drop API的更详细教程（实际上它是一个Javascript API），请查看此other article。它的日期是2009年12月，但仍然有效。

最后，这个video让您对HTML5（SVG，Canvas，CSS3，WebGL，...）能够做的一些很酷的视觉效果有了深入的了解。我承认更多的营销视频，但是很好地说明了一些更强大的HTML5功能（至少从视觉角度来看）以及我们将在不久的将来在浏览器中看到的内容......

免责声明：我不为Mozilla工作。我刚刚碰巧在过去研究过这个主题，发现Mozilla制作的材料，特别是Paul Rouget的演示，是最有启发性的。

Answer 12

jQuery UI是一个了不起的库...

拖动：http://jqueryui.com/demos/draggable/#default

放弃：http://jqueryui.com/demos/droppable/

我相信可放置的示例将回答您的问题“特别是我正在寻找将一个元素拖放到另一个元素上的支持”