Namespace wink.fx.animation
The animation object is an extension of wink.fx (2d fx) that allows to animate the content. A transition is the change of a property's value over time. An animation is a sequence of steps, each step corresponds to one or several transitions. In addition, there are also the AnimationGroup, which allows multiple animations to start together and then be notified when the group ends. For each animation, it is possible to specify a callback. It is also possible to chain animations.
- Defined in: animation.js
| Constructor Attributes | Constructor Name and Description |
|---|---|
| Compatibility list | Supported platforms / browsers |
|---|---|
|
iOS2, iOS3, iOS4, iOS5, iOS6, Android 1.5, Android 2.1, Android 2.2, Android 2.3, Android 3.0, Android 3.1, Android 4.0, BlackBerry 6, BlackBerry 7, Bada 1.0, Windows Phone 8
|
Namespace Detail
wink.fx.animation
var node1 = wink.byId('nodeId1'), node2 = wink.byId('nodeId2'), node3 = wink.byId('nodeId3'), node4 = wink.byId('nodeId4'), node5 = wink.byId('nodeId5'), node6 = wink.byId('nodeId6');
wink.fx.fadeOut(node1);
wink.fx.animate(node2, { property: 'background-color', value: '#000', duration: 500 });
var anim = new wink.fx.animation.Animation();
anim.addStep({ property: 'opacity', value: 0.9, duration: 500, delay: 1000, func: 'linear' });
anim.start(node3);
anim.start(node4);
var anim2 = new wink.fx.animation.Animation();
var anim3 = new wink.fx.animation.Animation();
anim2.addStep({ property: 'color', value: 'green', duration: 2000, delay: 3000, func: 'default' });
anim3.addStep({ property: 'color', value: 'blue', duration: 2000, delay: 3000, func: 'default' });
var animGroup = new wink.fx.animation.AnimationGroup();
animGroup.addAnimation(node5, anim2);
animGroup.addAnimation(node6, anim3);
animGroup.start();