Title: [143598] trunk/Source/WebCore
Revision
143598
Author
kei...@webkit.org
Date
2013-02-21 06:57:41 -0800 (Thu, 21 Feb 2013)

Log Message

Add animation class for new calendar picker
https://bugs.webkit.org/show_bug.cgi?id=110132

Reviewed by Kent Tamura.

Adding animation related classes as part of the calendar picker
redesign(Bug 109439).

No new tests. Code is not used yet.

* Resources/pagepopups/calendarPicker.js:
(AnimationTimingFunction.Linear): Parameter t should be a number between 0 and 1.
(AnimationTimingFunction.EaseInOut): Ditto.
(AnimationManager): All animators are managed by this class so we
can dispatch "animationFrameWillFinish" event after all the updates.
(AnimationManager.prototype._startAnimation):
(AnimationManager.prototype._stopAnimation):
(AnimationManager.prototype.add): Adds an animator to the list of running animators.
(AnimationManager.prototype.remove): Removes an animator.
(AnimationManager.prototype._animationFrameCallback): Callback for requestAnimationFrame.
(AnimationManager.prototype._needsAnimationFrame): Returns true if we should request the next animation frame.
(AnimationManager.prototype.on): If we add a callback, request animation frame.
(AnimationManager.prototype.removeListener):
(Animator): Animates between the from value and to value.
(Animator.prototype.setFrom): Sets the from value.
(Animator.prototype.setTo): Sets the to value.
(Animator.prototype.start):
(Animator.prototype.stop):
(Animator.prototype.onAnimationFrame): Called by AnimationManager.

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (143597 => 143598)


--- trunk/Source/WebCore/ChangeLog	2013-02-21 14:26:17 UTC (rev 143597)
+++ trunk/Source/WebCore/ChangeLog	2013-02-21 14:57:41 UTC (rev 143598)
@@ -1,3 +1,35 @@
+2013-02-21  Keishi Hattori  <kei...@webkit.org>
+
+        Add animation class for new calendar picker
+        https://bugs.webkit.org/show_bug.cgi?id=110132
+
+        Reviewed by Kent Tamura.
+
+        Adding animation related classes as part of the calendar picker
+        redesign(Bug 109439).
+
+        No new tests. Code is not used yet.
+
+        * Resources/pagepopups/calendarPicker.js:
+        (AnimationTimingFunction.Linear): Parameter t should be a number between 0 and 1.
+        (AnimationTimingFunction.EaseInOut): Ditto.
+        (AnimationManager): All animators are managed by this class so we
+        can dispatch "animationFrameWillFinish" event after all the updates.
+        (AnimationManager.prototype._startAnimation):
+        (AnimationManager.prototype._stopAnimation):
+        (AnimationManager.prototype.add): Adds an animator to the list of running animators.
+        (AnimationManager.prototype.remove): Removes an animator.
+        (AnimationManager.prototype._animationFrameCallback): Callback for requestAnimationFrame.
+        (AnimationManager.prototype._needsAnimationFrame): Returns true if we should request the next animation frame.
+        (AnimationManager.prototype.on): If we add a callback, request animation frame.
+        (AnimationManager.prototype.removeListener):
+        (Animator): Animates between the from value and to value.
+        (Animator.prototype.setFrom): Sets the from value.
+        (Animator.prototype.setTo): Sets the to value.
+        (Animator.prototype.start):
+        (Animator.prototype.stop):
+        (Animator.prototype.onAnimationFrame): Called by AnimationManager.
+
 2013-02-21  Andrey Adaikin  <aand...@chromium.org>
 
         Web Inspector: [Canvas] UI: more intuitive control buttons

Modified: trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js (143597 => 143598)


--- trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js	2013-02-21 14:26:17 UTC (rev 143597)
+++ trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js	2013-02-21 14:57:41 UTC (rev 143598)
@@ -708,8 +708,191 @@
     }
 };
 
+// Parameter t should be a number between 0 and 1.
+var AnimationTimingFunction = {
+    Linear: function(t){
+        return t;
+    },
+    EaseInOut: function(t){
+        t *= 2;
+        if (t < 1)
+            return Math.pow(t, 3) / 2;
+        t -= 2;
+        return Math.pow(t, 3) / 2 + 1;
+    }
+};
+
 /**
  * @constructor
+ * @extends EventEmitter
+ */
+function AnimationManager() {
+    EventEmitter.call(this);
+
+    this._isRunning = false;
+    this._runningAnimatorCount = 0;
+    this._runningAnimators = {};
+    this._animationFrameCallbackBound = this._animationFrameCallback.bind(this);
+}
+
+AnimationManager.prototype = Object.create(EventEmitter.prototype);
+
+AnimationManager.EventTypeAnimationFrameWillFinish = "animationFrameWillFinish";
+
+AnimationManager.prototype._startAnimation = function() {
+    if (this._isRunning)
+        return;
+    this._isRunning = true;
+    window.webkitRequestAnimationFrame(this._animationFrameCallbackBound);
+};
+
+AnimationManager.prototype._stopAnimation = function() {
+    if (!this._isRunning)
+        return;
+    this._isRunning = false;
+};
+
+/**
+ * @param {!Animator} animator
+ */
+AnimationManager.prototype.add = function(animator) {
+    if (this._runningAnimators[animator.id])
+        return;
+    this._runningAnimators[animator.id] = animator;
+    this._runningAnimatorCount++;
+    if (this._needsTimer())
+        this._startAnimation();
+};
+
+/**
+ * @param {!Animator} animator
+ */
+AnimationManager.prototype.remove = function(animator) {
+    if (!this._runningAnimators[animator.id])
+        return;
+    delete this._runningAnimators[animator.id];
+    this._runningAnimatorCount--;
+    if (!this._needsTimer())
+        this._stopAnimation();
+};
+
+AnimationManager.prototype._animationFrameCallback = function(now) {
+    if (this._runningAnimatorCount > 0) {
+        for (var id in this._runningAnimators) {
+            this._runningAnimators[id].onAnimationFrame(now);
+        }
+    }
+    this.dispatchEvent(AnimationManager.EventTypeAnimationFrameWillFinish);
+    if (this._isRunning)
+        window.webkitRequestAnimationFrame(this._animationFrameCallbackBound);
+};
+
+/**
+ * @return {!boolean}
+ */
+AnimationManager.prototype._needsTimer = function() {
+    return this._runningAnimatorCount > 0 || this.hasListener(AnimationManager.EventTypeAnimationFrameWillFinish);
+};
+
+/**
+ * @param {!string} type
+ * @param {!Function} callback
+ * @override
+ */
+AnimationManager.prototype.on = function(type, callback) {
+    EventEmitter.prototype.on.call(this, type, callback);
+    if (this._needsTimer())
+        this._startAnimation();
+};
+
+/**
+ * @param {!string} type
+ * @param {!Function} callback
+ * @override
+ */
+AnimationManager.prototype.removeListener = function(type, callback) {
+    EventEmitter.prototype.removeListener.call(this, type, callback);
+    if (!this._needsTimer())
+        this._stopAnimation();
+};
+
+AnimationManager.shared = new AnimationManager();
+
+/**
+ * @constructor
+ * @extends EventEmitter
+ */
+function Animator() {
+    EventEmitter.call(this);
+
+    this.id = Animator._lastId++;
+    this._from = 0;
+    this._to = 0;
+    this._delta = 0;
+    this.duration = 100;
+    this.step = null;
+    this._lastStepTime = null;
+    this.progress = 0.0;
+    this.timingFunction = AnimationTimingFunction.Linear;
+}
+
+Animator.prototype = Object.create(EventEmitter.prototype);
+
+Animator._lastId = 0;
+
+Animator.EventTypeDidAnimationStop = "didAnimationStop";
+
+/**
+ * @param {!number} value
+ */
+Animator.prototype.setFrom = function(value) {
+    this._from = value;
+    this._delta = this._to - this._from;
+};
+
+/**
+ * @param {!number} value
+ */
+Animator.prototype.setTo = function(value) {
+    this._to = value;
+    this._delta = this._to - this._from;
+};
+
+Animator.prototype.start = function() {
+    this._lastStepTime = Date.now();
+    this.progress = 0.0;
+    this._isRunning = true;
+    this.currentValue = this._from;
+    AnimationManager.shared.add(this);
+};
+
+Animator.prototype.stop = function() {
+    if (!this._isRunning)
+        return;
+    this._isRunning = false;
+    this.currentValue = this._to;
+    this.step(this);
+    AnimationManager.shared.remove(this);
+    this.dispatchEvent(Animator.EventTypeDidAnimationStop, this);
+};
+
+/**
+ * @param {!number} now
+ */
+Animator.prototype._onAnimationFrame_ = function(now) {
+    this.progress += (now - this._lastStepTime) / this.duration;
+    if (this.progress >= 1.0) {
+        this.progress = 1.0;
+        this.stop();
+        return;
+    }
+    this.currentValue = this.timingFunction(this.progress) * this._delta + this._from;
+    this.step(this);
+    this._lastStepTime = now;
+};
+
+/**
+ * @constructor
  * @param {!Element} element
  * @param {!Object} config
  */
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to