1


I'm going to develop an html5 rich animation. I've already design the components in Illustrator, but now the question is how to export this components? via Canvas object? or via Image(png)?.

Notice that the components may have some changes(like a flower who get an wings at some point)..

  1. Canvas it will able me easily add and remove this additions, But with Image I should make them absolute with z-index..
  2. Image will prevnt copying my components without permission(at least it prevent anybody take them as vector image).. so it really advantage.

Thanks!, ~ Almog Baku

4

4 回答 4

0

如果你想要一些快速的东西，有很多精灵和直接交互，那很容易：使用画布。

该 API 与其他语言中最常见的 2D 图形 API 之一非常相似，并且支持“直接”绘图和合成。

一旦你有很多对象和转换，使用 html 引擎来组合和重绘东西是非常无效的。

于 2012-05-30T14:28:44.140 回答
0


我发现为网络构建丰富的动画（短片）最简单、最有效的方法是using both JS and css animations/transictions..

用 sass+compass 构建它也使它变得简单而强大。

为什么？关于我的研究

实际上，我是用同样的动画电影制作了两次半：
首先我只用 jQuery 制作了整部电影（这真的很慢、笨拙且难以构建）。
比，我尝试了画布..但我发现很难创建一些常见的转换，比如上滑等等。所以，我尝试使用一些常见的画布库来实现它......并在一段时间后放弃了（电影完成了 1/5）。
我选择使用 compass+sass 和 CSS ANIMATIONS/TRANSICTIONS 从头开始​​实现它，我发现它是处理这个问题的最强大、最简单的解决方法和快速开发。

我在 css 类检测到的 css 动画中实现了每一个“幻灯片”。并使用监听 css 动画事件的 JS 确定每张幻灯片的结尾。

于 2013-03-07T12:07:15.647 回答
0

因为 Illustrator 是一个矢量应用程序，您可能想要查看大多数 HTML5 浏览器支持的SVG格式。

您可以在此处获得 Illustrator HTML5 SVG 包，并在此处获得说明。

于 2012-06-09T13:27:58.690 回答
0

如果您使用 svg，请查看Raphaeljs库，它可以更轻松地从 javascript 操作 svg

于 2013-01-26T10:40:18.570 回答