Opened 11 years ago

Closed 9 years ago

#6671 closed enhancement (worksforme)

[patch/cla] Cacheable Animation Framework / API + dojox.fx.WipeLeft Contribution

Reported by: guest Owned by: dante
Priority: high Milestone: future
Component: General Version: 1.1.0
Keywords: Cc: ole.ersoy@…, alex
Blocked By: Blocking:

Description

This ticket is related to: http://trac.dojotoolkit.org/ticket/6060

This API has the following goals:

(1) Work just like Dojo's current animation framework

(2) Support caching of animations / dom node switching

(3) Support simple unit testing

(4) Enhance reuse through an animation class hierarchy

(5) Simple animation debugging

(1) I think I implemented all the methods and semantics in dojox.fx.Animation that come with the use of dojo.animateProperty().

onEnd, onBegin, and perFrame template methods have been added that can be implemented by subclasses of dojox.fx.Animation.

These are automatically called by dojox.fx.Animation per the template design pattern.

(2) Caching is supported. Just change the animation instances DOM node reference, and the new reference is animated when calling Animation.play() on the Animation instance.

(3) Unit testing of the animation is supported by isolating each frame inside the Animation.frame() method.

This allows animation developers to test node properties before and after each frame.

(4) If you take a look at dojox.fx.AbsoluteDimension? you'll see that this could easily be reused by dojox.fx.sizeTo...however dojox.fx.sizeTo would have to be reimplemented as dojox.fx.SizeTo?, which would be a subclass of dojox.fx.AbsoluteDimension?.

(5) I personally think this is easier to debug, since each class in the hierarchy provides specific services, implemented on framework methods. I'm naturally biased though :-)

Cheers,

  • Ole

Attachments (6)

AbsoluteDimension.js (1.5 KB) - added by guest 11 years ago.
Animation.js (4.5 KB) - added by guest 11 years ago.
WipeLeft.js (1.8 KB) - added by guest 11 years ago.
Animation.html (1.8 KB) - added by guest 11 years ago.
WipeRight.js (2.0 KB) - added by guest 11 years ago.
CombinedAnimation.js (1.4 KB) - added by ole 11 years ago.

Download all attachments as: .zip

Change History (13)

Changed 11 years ago by guest

Attachment: AbsoluteDimension.js added

Changed 11 years ago by guest

Attachment: Animation.js added

Changed 11 years ago by guest

Attachment: WipeLeft.js added

Changed 11 years ago by guest

Attachment: Animation.html added

comment:1 Changed 11 years ago by dante

Owner: changed from anonymous to dante
Status: newassigned
Summary: Cacheable Animation Framework / API + dojox.fx.WipeLeft Contribution[patch/cla] Cacheable Animation Framework / API + dojox.fx.WipeLeft Contribution

comment:2 Changed 11 years ago by guest

Oooops - That would be WipeToMyOtherLeft?...WipeRight?

Changed 11 years ago by guest

Attachment: WipeRight.js added

comment:3 Changed 11 years ago by guest

Note also that I used to have an Animation.initialize() method, but that was silly, since all initialization should be done in the constructor of Animation subclasses.

comment:4 Changed 11 years ago by alex

Cc: alex added

comment:5 Changed 11 years ago by dante

Milestone: future

Changed 11 years ago by ole

Attachment: CombinedAnimation.js added

comment:6 Changed 11 years ago by ole

I added a CombinedAnimation? class that takes an array of Animation instances and runs them simultaneously. The motivation was this:

http://www.schillmania.com/content/projects/javascript-animation-2/

Specifically the single timer function loop section. So instead of each animation looping through it's frames separately, the CombinedAnimation? creates a new frame that calles Animation.frame() on each animation in the array passed to the CombinedAnimation? constructor, and thus on each tick of the timer all animation frames are run...

comment:7 Changed 9 years ago by dante

Resolution: worksforme
Status: assignedclosed

I'm liking the stability of dojo.Animation, and the ext-dojo helpers in dojox.

Note: See TracTickets for help on using tickets.