Introduction

wicketstuff-animator integrates animator.js into wicket.

Documentation

most of the api provided by the javascript class is already implemented, including:

• setting general animation options (duration, interval, transition)
• adding StyleSubjects (the who (target) and what of the animation):
  • NumericalStyleSubject: animates a pixel-based style property between two integer values (eg. margin-left)
  • ColorStyleSubject: animates a color based style property between two hex values (eg. background-color)
  • DiscreteStyleSubject: Animates discrete styles, i.e. ones that do not scale but have discrete values that can't be interpolated (eg. font-weight from normal to bold)
  • CssStyleSubject: animates between two styles or css classes
  • JavascriptSubject: represents the body of an update function, in which you can refer to the variable "value", representing the current state of the animation (between 0 and 1):
    

    function(value) { /* JavascriptSubject will be planted here */ }

    
    
    
    
• attaching the animator to components using the Animator.attachTo method. since the animator can be attached to any number of components reacting to different events and performing different actions (play, reverse, toggle, ...), the Animator class takes care of adding a behavior to the desired component (instead of adding the animator to the component).

attention: do not mix up the targets of the animation and the component the animator is attached to. the targets describe who gets animated. attaching the animator to a component is just the means to get the animation started (or whatever action is used).

fwiw, i encourage you to visit the original page of animator.js to understand how it works. after that, it shouldn't be that difficult to comprehend the java version of it.

Example 

let's have a look at how you can use the animator to turn the color of a label (it's actually a div) from red to blue on the first click, and back to red on the second click, and again to blue on another click, ...

MyPage.html:

... <div wicket:id="label">my label</div> ...

... // somewhere in the constructor
Label label = new Label("label");
add(label);
Animator animator = new Animator().addCssStyleSubject(new MarkupIdModel(label),  "red", "blue");
animator.attachTo(label, "onclick", Action.toggle());
...

1. create a new Animator object.
2. add CssStyleSubject to the animator. this changes target (here 'label', wrapped in a MarkupIdModel which simply extracts the MarkupId, hence the name...) from css-class 'red' to css-class 'blue'.
3. attach the animator to the click event of the label (this actually generates an AttributeAppender-behavior).
4. don't forget to define the styles 'red' and 'blue' somewhere

Maintainers 

Gerolf Seitz 

Sourcecode

https://wicket-stuff.svn.sourceforge.net/svnroot/wicket-stuff/trunk/wicketstuff-animator/

License

wicketstuff-animator is provided under the terms of the Apache License, Version 2.0 

animator.js is released under the terms of the BSD License