Cappuccino : CPTextField animating with CoreAnimation
February 6, 2009
You can find here an example (source code) of a CPTextField animating I’ve done in mid-December, using the CPPropertyAnimation code provided by Nicholas Small.
Initially the text is clipped (but visible part for the initial wrapping view bounds is correctly wrapped on available lines), and then extends (live) while the view size growths or shrinks (click on the view to expand or shrink). For that animation (explicit mode) we only pass the initial and final property (size) values and the animating duration. Core Animation computes the required Quartz drawing commands, relative to incremental size values returned by the CPPropertyAnimation class.
This is a proof of concept (no view design, basic shapes and colors to see more evidently the animating area). It will serve as a basis for the next version of the site, with advanced windows and views (Cappuccino still offers great looking Windows, with live dragging, compositing and dynamic shading – thanks to a Quartz implementation in javascript, that can lead to stunning applications, and even more when adding Core Animation – basic support provided).
However as the application is javascript, CoreAnimation cannot benefit from the graphic card acceleration here (one great advantage of OSX CoreAnimation – see iPhone strong use of CA – towards other frameworks), that normally allows to stack thousands of layers without performance hit.
Reference to Core Animation (OSX version) :
[...] Audio blog Featured articles selection from cjed mac & audio main website « Cappuccino : CPTextField animating with CoreAnimation WebKit CSS Animation / accelerated / VFX February 7, 2009 Apple unveiled CSS Animation, [...]
The Cappuccino implementation of Core Animation is indeed based on Canvas for Safari/Firefox/Opera, and VML for IE. Support for CSS animation and transforms will be added later when available.