Permalink
Browse files

[BUG #4983] Restructured usage of animation on the collection. All ha…

…ndler methods are now available on the collection itself.
  • Loading branch information...
1 parent c1fc6fd commit 721a3ae02812eae480c6adbd9688bb5f6da60f7c @wittemann wittemann committed Mar 28, 2012
Showing with 76 additions and 34 deletions.
  1. +7 −5 framework/index.html
  2. +69 −29 framework/source/class/qx/module/Animation.js
View
@@ -6,7 +6,7 @@
<script type="text/javascript" src="q.js"></script>
<script type="text/javascript" charset="utf-8">
q.ready(function() {
- alert("READY!!!!");
+ console && console.log("READY!!!!");
});
</script>
<style type="text/css" media="screen">
@@ -26,6 +26,7 @@
<p>not empty</p>
<section id="trav"><p>trav</p></section>
<section id="trav2"><p>trav</p></section>
+ <h2>Blink</h2>
<script type="template" id="template">
<div style="color: {{color}}">{{name}}</div>
</script>
@@ -95,12 +96,13 @@
<!-- ANIMATION -->
- d.fadeOut().on("end", function() {d.fadeIn()});
- q.wrap(document.body).animate({duration: 1000, keyFrames : {
+ d.fadeOut().once("end", function() {this.fadeIn();});
+ q("h2").animate({duration: 1000, alternate: true, repeat: "infinite", keyFrames : {
0 : {"background-color" : "white"},
50 : {"background-color" : "red"},
- 100 : {"background-color" : "white"}
- }});
+ }}).on("click", function() {
+ this.isPlaying() ? this.pause() : this.play();
+ }).pause();
</script>
</body>
</html>
@@ -4,7 +4,11 @@
************************************************************************ */
-qx.Bootstrap.define("qx.module.Animation", {
+qx.Bootstrap.define("qx.module.Animation", {
+ events : {
+ "animationEnd" : undefined
+ },
+
statics :
{
init : function() {
@@ -34,46 +38,77 @@ qx.Bootstrap.define("qx.module.Animation", {
animate : function(desc) {
- var returnHandle;
+ if (this.__animationHandles.length > 0) {
+ throw new Error("Only one animation at a time.");
+ }
for (var i=0; i < this.length; i++) {
var handle = qx.bom.element.Animation.animate(this[i], desc);
- if (i === 0) {
- returnHandle = handle;
- }
+ var self = this;
+ handle.on("end", function() {
+ var handles = self.__animationHandles;
+ handles.splice(self.indexOf(handle), 1);
+ if (handles.length == 0) {
+ self.emit("end");
+ }
+ }, handle);
+ this.__animationHandles.push(handle);
};
- return returnHandle;
+ return this;
},
- fadeIn : function() {
- var returnHandle;
- for (var i=0; i < this.length; i++) {
- qx.module.Animation.__setStyle(this[i], "opacity", 0);
- qx.module.Animation.__setStyle(this[i], "display", "");
- var handle = qx.bom.element.Animation.animate(this[i], qx.module.Animation._fadeIn);
- handle.on("end", function(el) {
- qx.module.Animation.__setStyle(el, "opacity", 1);
- });
- if (i === 0) {
- returnHandle = handle;
+ play : function() {
+ for (var i=0; i < this.__animationHandles.length; i++) {
+ this.__animationHandles[i].play();
+ };
+ return this;
+ },
+
+
+ pause : function() {
+ for (var i=0; i < this.__animationHandles.length; i++) {
+ this.__animationHandles[i].pause();
+ };
+ return this;
+ },
+
+
+ stop : function() {
+ for (var i=0; i < this.__animationHandles.length; i++) {
+ this.__animationHandles[i].stop();
+ };
+ this.__animationHandles = [];
+ return this;
+ },
+
+
+ isPlaying : function() {
+ for (var i=0; i < this.__animationHandles.length; i++) {
+ if (this.__animationHandles[i].isPlaying()) {
+ return true;
}
};
- return returnHandle;
+ return false;
},
- fadeOut : function() {
- var returnHandle;
- for (var i=0; i < this.length; i++) {
- var handle = qx.bom.element.Animation.animate(this[i], qx.module.Animation._fadeOut);
- handle.on("end", function(el) {
- qx.module.Animation.__setStyle(el, "display", "none");
- });
- if (i === 0) {
- returnHandle = handle;
+ isEnded : function() {
+ for (var i=0; i < this.__animationHandles.length; i++) {
+ if (!this.__animationHandles[i].isEnded()) {
+ return false;
}
};
- return handle;
+ return true;
+ },
+
+
+ fadeIn : function() {
+ return this.animate(qx.module.Animation._fadeIn);
+ },
+
+
+ fadeOut : function() {
+ return this.animate(qx.module.Animation._fadeOut);
}
},
@@ -82,7 +117,12 @@ qx.Bootstrap.define("qx.module.Animation", {
q.attach({
"animate" : statics.animate,
"fadeIn" : statics.fadeIn,
- "fadeOut" : statics.fadeOut
+ "fadeOut" : statics.fadeOut,
+ "play" : statics.play,
+ "pause" : statics.pause,
+ "stop" : statics.stop,
+ "isEnded" : statics.isEnded,
+ "isPlaying" : statics.isPlaying
});
q.attachInit(statics.init);

0 comments on commit 721a3ae

Please sign in to comment.