New Flash Animation Library
What!? Why would I write another tweening engine? Because it’s awesome! It addresses some of the things that other libraries don’t. I realized that if I wasn’t just animating from here to there, or fading in, I’d end up having to write a custom solution. Even seemingly simple stuff like moving an object in a circle isn’t really doable.
So the solution is to break animations into 2 component parts: a path and a curve. The path represents the spatial component of the animation and the curve represents the temporal.
Currently there’s only a linear curve and a PennerCurve, which can have any Robert Penner-esque easing function assigned to it.
Paths:
- CirclePath2D
- ComplexPath2D
- CubicBezierPath2D
- LinearPath2D
- Path1D
- PhysicsPath2D
- QuadraticBezierPath2D
- SineWavePath2D
- SpiralPath2D
The coolest thing here is the complex path which allows you to combine multiple paths into 1 animation. So the progression of the curve is applied across the whole of the complex path. And, because complex paths are paths themselves, they are nestable!
From the demo below (select ComplexPath2D 2), here’s the most verbose example, which combines 3 circle paths as 1 complex path and nests that inside another complex path containing a bezier and sine wave path:
//circle's go center point, radius, start radian, end radian var c1:CirclePath2D = new CirclePath2D( new Point( 150, 200 ), 50, Math.PI * 2, 0 ); var c2:CirclePath2D = new CirclePath2D( new Point( 250, 200 ), 50, Math.PI, Math.PI * 3 ); var c3:CirclePath2D = new CirclePath2D( new Point( 300, 200 ), 100, Math.PI, Math.PI * 3 ); //the complex path takes the list of paths and a list of cue points var complex:Path = new ComplexPath2D( Vector.<Path>( [ c1, c2, c3 ] ), Vector.<Number>( [ 0, 0.25, 0.5 ] ) ); //the bezier classes take the anchor and control points var bez:CubicBezierPath2D = new CubicBezierPath2D( new Point( 200, 200 ), new Point( 350, 0 ), new Point( 350, 500 ), new Point( 350, 200 ) ); //sine wave takes a start and end point, frequency and amplitude var sine:SineWavePath2D = new SineWavePath2D( new Point( 350, 200 ), new Point( 200, 200 ), 3, 50 ); var path:ComplexPath2D = new ComplexPath2D( Vector.<Path>( [ complex, bez, sine ] ), Vector<Number>( [ 0, 0.5, 0.75 ] ) ); //the runner binds the view to the animation runner = new Runner2D( view, path, durationStepper.value, -1, getCurve(), loop.selected, reverse.selected );
Here’s the demo:
I’ll be releasing it under the MIT license in a few days.
Looks very cool
Just a headsup – it seems like your RSS feed for this item was full of spam…
Hey, thanks! The rss feed looks fine, but my site has been blacklisted by Google, so there’s something going on. Could you paste a sample of the spam so I can try to figure it out?
I’m seeing the spam in rss for google reader as well.
Same rss hack happened to calypso88.com. He posted about it and linked to a discussion which might help fix it.
I think it’s got some referrer checking in it so that it doesn’t appear except for google’s ip.
http://www.calypso88.com/?p=465
Thank you very much. I think it might be fixed now, are you still seeing the same pharma-spam?
Look really promissing! Been looking for tweening engine like this for some time now. Since every kb is important for my work, I wonder about how much extra kb are added to the final swf file.
Keep up the good work!
I absolutely see some great uses for this. In fact I’ll be testing this out on a project this week.
The Flash Animation Library can be used in mobile development? I am a Flash Lite developer.
Looking forward to your replay
Li Yong Fei
@Paulo
The core comes out to ~2.3kb and the entire library ~5kb. Compiled size will scale nicely because paths are all separate classes. In practice you’ll probably only use a few different paths.
@Li Yong Fei
Sorry, it’s Flash 10. It wouldn’t take much to port it though.
Fantastic
Thanks Drew, even better than the 2.9bk from Greesock’s Tweenlite.
@drew Things do seem to be fixed now. The new post came up as intended in google reader.
I have been looking for something like this for a while. I am rotating text around a spiral but only the x/y coordinates change (correctly). I would like that the text rotate also (kind of like “fit text to path” in Freehand/Illustrator). Is this possible?
@mga: Do you want each character to fit around the spiral, or just a single TextField? A few people have asked for an “align to path” option, I might add it in to the next release. Wouldn’t be too hard to hack it in yourself though!
Hi,
I think this seems like a real fun class to play around with.
-am very interested if there is a APU-method for orientToPath? So that you can have an arrow or similar follow the path, but that rotates so that it suites the directions… as when doing static guide-motions on the timeline.
thanks