JSTweener: Javascript Tweener for Animation

Zeh Fernando’s AS2 and AS3 Flash Animation Kit Tweener has inspired a JSTweener port to javascript, why thanks Yuichi Tateno (secondlife).

This actually could be used quite easily with Silverlight and an AgTweener could be very easily created from this. The Tweener like syntax with an object and adding tweens of available properties as an object or array is very simple and could make animation systems much more standard if everything used this not to mention easier for developers to animate in any presentation layer. The syntax makes for the best of the Animation Packages currently available for AS3. If this could be used in other kits it would make animation pretty standard and simple when changing platforms.

JQuery is very lightweight and has a similar syntax on their animate() call. There are many animation javascript kits such as mootools, jquery, dojokit and prototype and others that have similar functionality but it is all handled differently.

JSTweener

JSTweener.addTween(element.style, {
time: 3,
transition: 'linear',
onComplete: function() {},
width: 200,
height: 200,
left: 500,
top: 300
});

JSTweener Source

JSTweenerRepo

Samples:

Found via Zeh

Advertisements

Dojo Adds Silverlight Effects Support

Dojo Toolkit, a robust javascript library similar to my favorite js kit mootools, recently update and added some support for Silverlight effects. This is one really cool aspect of Silverlight in that it allows you to script/code it in many languages in the DLR (Dynamic Language Runtime) including ironpython, C#, IronRuby, javascript and others. Where as with Flash you only have Actionscript3 available.

Check out the Silverlight demos here:

butterfly.html 20-Aug-2007 18:19 33K
circles.html 20-Aug-2007 18:19 4.0K
clock.html 20-Aug-2007 18:19 7.3K
lion.html 20-Aug-2007 18:19 22K
tiger.html 20-Aug-2007 18:19 100K

DojoX

  • high quality implementations of previously experimental features: gfx (portable 2D drawing), data wires, offline, storage, cometd, etc.
  • dojox.gfx now includes Sliverlight support
  • many more features and improvements than there’s room for here.

Dijit

  • unified look and feel for all widgets
  • ambitious a11y and i18n features in every Dijit widget
  • a mature CSS-driven theme system with multiple, high-quality themes
  • huge improvements in system performance
  • data-bound widgets
  • Declarations for lightweight widget writing
  • a new page parser that allows instances of any class, not just widgets
  • no magic

Core

  • reduced API surface area (easier to remember and use)
  • dojo.query() always available, returns real arrays
  • from-scratch high-performance DnD system
  • Base (dojo.js) is 25K on the wire (gzipped)
  • dojo.data APIs finalized
  • new build system
  • new test harness for both CLI and browser use
  • dojo.behavior now marked stable and based on dojo.query
  • excellent animation APIs with Color animations in Base (always available)
  • all the features you’ve come to count on from Dojo (RPC, JSON-P, JSON, i18n, formatting utilities, etc.)

[ source ]

JavaFX RIA Test Added to Bubblemark RIA Benchmarks (Flex/Silverlight/Javascript)

Bubblemark has added a JavaFX version of his bubble animation test that spans now all of the RIA technologies out there. Bubblemark is a great site and has been a great site for comparing animation in the browser. Alexey Gavrilov has kept the site up to date on all versions of Silverlight since when it was WPF/E and it is a nice quick baseline test to check FPS performance across these new vector toolkits and scripting.

My results are very similar to Bubblemarks tests:

JavaFX — 14 fps
Firefox + Silverlight (JavaScript) — 56 fps
Firefox + Flex — 62 fps
Adobe AIR — 62 fps
Firefox + Silverlight (CLR) — 99 fps

Silverlight is not final and is quite light compared to Flex (I wonder if a vanilla Flash9/AS3 export has been done or if it would perform any different), but if Silverlight has a lead on FPS, where FPS is really success of any kit in RIA or vector, then it could be a rough battle. Flash/Flex is really far far ahead due to the browser penetration and the development community but the better performance is always a good indicator of possible success. Plus, Microsoft controls the desktop market and any “benefits” it might give their own kit which includes distribution and performance in preloading or caching.

Comparing the Performance of WPF/E, Flash9/Flex, Javascript

This is a great site that developed a pretty simple animation in the top vector packages and tested it on all browsers.  Testing WPF/E, Flex/Flash9 and Javascript/DHTML

Photo Sharing and Video Hosting at Photobucket