Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

animations using deferred

  • Loading branch information...
commit 632ec530066891ee1546dc89bcfad7cfc270acc5 1 parent 6cc0b3c
K. Scott Allen authored

Showing 3 changed files with 90 additions and 78 deletions. Show diff stats Hide diff stats

  1. +24 28 scripts/p5.js
  2. +35 27 scripts/p5animations.js
  3. +31 23 tests/tests.js
52 scripts/p5.js
@@ -92,55 +92,43 @@
92 92
93 93 var startAnimations = function (slide) {
94 94 $("[data-animation]", slide).add(slide).each(function () {
95   - var animation = extractAnimation($(this));
96   - if (animation) {
97   - animation.initialize($(this));
98   - currentAnimations.push(animation);
99   - }
  95 + addAnimationFor($(this));
100 96 });
101 97 };
102 98
  99 + var addAnimationFor = function (element) {
  100 + var animation = extractAnimation(element);
  101 + if (animation) {
  102 + currentAnimations.push(animation);
  103 + $.when(animation.done)
  104 + .then(function () { currentAnimations.remove(animation); });
  105 + }
  106 + };
  107 +
103 108 var extractAnimation = function (element) {
104 109 var name = element.data("animation");
105 110 if (name) {
106 111 var factory = registeredAnimations[name];
107 112 if (factory) {
108   - return factory();
  113 + return factory(element);
109 114 }
110 115 }
111 116 return null;
112 117 };
113 118
114 119 var stepAnimation = function () {
115   - var stepped = false;
116 120 if (currentAnimations.length > 0) {
117   - stepped = runStep();
118   - }
119   - return stepped;
120   - };
121   -
122   - var runStep = function () {
123   - var animation = currentAnimations[0];
124   - if (animation) {
125   - var more = animation.step();
126   - if (!more) {
127   - if (animation.cancel) {
128   - animation.cancel();
129   - }
130   - currentAnimations.pop();
  121 + var animation = currentAnimations[0];
  122 + if (animation) {
  123 + animation.step();
131 124 }
132   - return more;
  125 + return true;
133 126 }
134 127 return false;
135 128 };
136 129
137 130 var killAnimations = function () {
138   - $(currentAnimations).each(function () {
139   - if (this.cancel) {
140   - this.cancel();
141   - }
142   - });
143   - currentAnimations = [];
  131 + $(window).trigger("killAnimations");
144 132 };
145 133
146 134 var slides = function () {
@@ -184,6 +172,14 @@
184 172
185 173 } ();
186 174
  175 +(function () {
  176 +
  177 + Array.prototype.remove = function(object) {
  178 + this.splice(this.indexOf(object),1);
  179 + };
  180 +
  181 +})();
  182 +
187 183 $(function () {
188 184 p5.start();
189 185 });
62 scripts/p5animations.js
... ... @@ -1,48 +1,52 @@
1   -var onebyone = function () {
  1 +var completionSignal = function () {
2 2
3   - var target = null;
  3 + var deferred = $.Deferred();
4 4
5   - var initialize = function (element) {
6   - target = element;
7   - target.children().addClass("onebyone");
  5 + var complete = function () {
  6 + $(window).unbind("killAnimations", complete);
  7 + deferred.resolve();
8 8 };
9 9
  10 + $(window).bind("killAnimations", complete);
  11 +
  12 + return {
  13 + complete: complete,
  14 + promise: deferred.promise()
  15 + };
  16 +};
  17 +
  18 +var onebyone = function (element) {
  19 +
  20 + var target = element;
  21 + var signal = completionSignal();
  22 +
10 23 var step = function () {
11 24 var hidden = target.children(".onebyone");
12 25 hidden.first().removeClass("onebyone");
13   - return hidden.length > 0;
  26 + if (hidden.length <= 1) {
  27 + signal.complete();
  28 + }
14 29 };
15 30
16   - var cancel = function() {
17   -
18   - };
  31 + target.children().addClass("onebyone");
19 32
20 33 return {
21   - initialize: initialize,
22 34 step: step,
23   - cancel: cancel
  35 + done: signal.promise
24 36 };
25   -
26 37 };
27 38
28   -var timedAppear = function () {
  39 +var timedAppear = function (element) {
29 40
30   - var target = null;
  41 + var target = element;
31 42 var timeoutHandle = null;
32   -
33   - var initialize = function (element) {
34   - target = element;
35   - target.hide();
36   -
37   - var delay = target.data("animation-delay");
38   - timeoutHandle = setTimeout(fadeIn, delay);
39   - };
  43 + var signal = completionSignal();
40 44
41 45 var step = function () {
42   - return timeoutHandle != null;
  46 +
43 47 };
44 48
45   - var cancel = function () {
  49 + var cleanup = function () {
46 50 if (timeoutHandle) {
47 51 clearTimeout(timeoutHandle);
48 52 }
@@ -50,13 +54,17 @@ var timedAppear = function () {
50 54
51 55 var fadeIn = function () {
52 56 target.fadeIn();
53   - timeoutHandle = null;
  57 + signal.complete();
54 58 };
55 59
  60 + var delay = target.data("animation-delay");
  61 + target.hide();
  62 + timeoutHandle = setTimeout(fadeIn, delay);
  63 + signal.promise.always(cleanup);
  64 +
56 65 return {
57   - initialize: initialize,
58 66 step: step,
59   - cancel: cancel
  67 + done: signal.promise
60 68 };
61 69 };
62 70
54 tests/tests.js
@@ -69,11 +69,6 @@ var animTestEnvironment = {
69 69
70 70 module("Animation", animTestEnvironment);
71 71
72   -test("Initializes animation", function () {
73   - $(window).trigger(rightArrow());
74   - ok(lastAnimation.getState().isInitialized);
75   -});
76   -
77 72 test("Steps animation with right arrow", function () {
78 73 $(window).trigger(rightArrow());
79 74 $(window).trigger(rightArrow());
@@ -87,12 +82,12 @@ test("Cancels animation on left arrow", function () {
87 82 ok(lastAnimation.getState().isCancelled);
88 83 });
89 84
90   -test("Cancels when stepping stops", function () {
  85 +test("Resolved when stepping stops", function () {
91 86 $(window).trigger(rightArrow());
92 87 $(window).trigger(rightArrow());
93 88 $(window).trigger(rightArrow());
94 89 $(window).trigger(rightArrow());
95   - ok(lastAnimation.getState().isCancelled);
  90 + ok(lastAnimation.getState().isResolved);
96 91 });
97 92
98 93 test("Moves to next slide when animation complete", function () {
@@ -104,6 +99,18 @@ test("Moves to next slide when animation complete", function () {
104 99 ok($("#slide3").hasClass("current"));
105 100 });
106 101
  102 +module("array remove test");
  103 +
  104 +test("Can remove object reference from Array", function () {
  105 + var o1 = {};
  106 + var o2 = {};
  107 + var o3 = {};
  108 + var array = [o1, o2, o3];
  109 +
  110 + array.remove(o2);
  111 + ok(array.length == 2);
  112 +});
  113 +
107 114 var rightArrow = function () {
108 115 var event = new $.Event("keydown");
109 116 event.keyCode = 39;
@@ -142,34 +149,35 @@ var lastAnimation = null;
142 149
143 150 var testAnimation = function () {
144 151
145   - var isInitialized = false;
146 152 var stepCount = 0;
147 153 var isCancelled = false;
  154 + var deferred = $.Deferred();
148 155
149   - lastAnimation = {
  156 + var complete = function () {
  157 + $(window).unbind("killAnimations", complete);
  158 + isCancelled = true;
  159 + deferred.resolve();
  160 + };
150 161
151   - initialize: function () {
152   - isInitialized = true;
153   - },
  162 + $(window).bind("killAnimations", complete);
154 163
  164 + lastAnimation = {
  165 + done: deferred.promise(),
155 166 step: function () {
156 167 stepCount++;
157   - return stepCount < 3;
158   - },
159   -
160   - cancel: function () {
161   - isCancelled = true;
162   - },
163   -
  168 + if (stepCount >= 3) {
  169 + deferred.resolve();
  170 + }
  171 + },
164 172 getState: function () {
165   - return {
166   - isInitialized: isInitialized,
  173 + return {
167 174 stepCount: stepCount,
168   - isCancelled: isCancelled
  175 + isCancelled: isCancelled,
  176 + isResolved: deferred.isResolved()
169 177 };
170 178 }
171 179 };
172   -
  180 +
173 181 return lastAnimation;
174 182 };
175 183

0 comments on commit 632ec53

Please sign in to comment.
Something went wrong with that request. Please try again.