I have some data visualization animations I want to do in a webapp I have and am considering different alternatives I have. It will basically just be moving around text strings in a pretty way.
I am using the Mootools framework and the Mootools FX library basically have the stuff i want, but I want to manipulate around 100 text strings, which means each string would need a separate FX object (I think).
The alternative to doing this is coding the entire thing in Processing and use Processing.js to render it to an HTML5 canvas.
this question asked Aug 20 '09 at 20:44 Fredrik 2,731 8 20 28 1 Processing.js is easiest on the browser as per my experience. Nice question,BTW. – Mahesh Sep 20 '09 at 15:19
Or use client-side SVG. It should have no problems displaying and manipulating 100 text strings, and is supported in much the same browsers as Canvas is (and IE supports VML, which provides similar functionality).
@austin, Apache Batik is a server-side SVG renderer.
this answer answered Aug 21 '09 at 7:36 Laurens Holst 1 I have found a great JS library to render client-side SVG, so I will end up using that :) Link: raphaeljs.com – Fredrik Sep 22 '09 at 18:43
I would not adopt for support of the canvas element at this time since only the newest version of most browsers support it. I would wait until support is common, which could take a little while. Keep in mind HTML5 is not a standard yet, and is still subject to change.
一个简单的动画：两个点在两个圆上运动。页面中有两个canvas,有一个背景设置为透明。 欢迎访问博主的网站： http://www.108js.com/link.html 效果图： <!DOCTYPE
You might want to research SVG and see if there is a server side SVG parser where the output could be converted to PNG.
this answer answered Aug 20 '09 at 23:11 austin cheney 1 Older versions of most browsers (excluding IE) support canvas. – Eli Grey Aug 21 '09 at 1:58 The page in question would be on the Admin side of the app, so I can in that way guarantee that all admins will run the latest Safari och FF build. – Fredrik Aug 21 '09 at 7:51
Processing is just Java, by the way, so you should be able to just write it in that and display it in an applet.
Why not actionscript 3, at this point there is a wider penetration of the flash player than support for html 5.
this answer answered Aug 20 '09 at 23:57 WillyCornbread 627 10 21 1 This is true, but Flash seems to be quite crash prone and have always (maybe because I code bad actionscript) consumed a lot of memory and CPU. The page will be displayed continuously for several hours. – Fredrik Aug 21 '09 at 7:53 yes you code bad actionscript;) – eco_bach Apr 25 '12 at 18:01
- 2HTML5 Canvas实现360度全景图
- 3HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- 57 款基于 HTML5 Canvas 的超炫 3D 动画效果
- 3HTML5 Canvas动画模板
- 4HTML5 Canvas简单动画：圆周运动
- 5HTML5 Canvas 旋转的“金字塔”
- 6简单HTML5 Canvas Arrow旋转动画