2015-03-11 02:11:28 +00:00
|
|
|
/**
|
2015-03-23 22:07:33 +00:00
|
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
|
|
* All rights reserved.
|
|
|
|
*
|
|
|
|
* This source code is licensed under the BSD-style license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
2015-03-11 02:11:28 +00:00
|
|
|
*
|
|
|
|
* @providesModule AnimationUtils
|
|
|
|
* @flow
|
|
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
type EasingFunction = (t: number) => number;
|
|
|
|
|
|
|
|
var defaults = {
|
|
|
|
easeInQuad: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return t * t;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutQuad: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return -t * (t - 2);
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutQuad: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t = t * 2;
|
|
|
|
if (t < 1) {
|
|
|
|
return 0.5 * t * t;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
return -((t - 1) * (t - 3) - 1) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInCubic: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return t * t * t;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutCubic: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 1;
|
|
|
|
return t * t * t + 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutCubic: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t *= 2;
|
|
|
|
if (t < 1) {
|
|
|
|
return 0.5 * t * t * t;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 2;
|
|
|
|
return (t * t * t + 2) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInQuart: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return t * t * t * t;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutQuart: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 1;
|
|
|
|
return -(t * t * t * t - 1);
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutQuart: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t *= 2;
|
|
|
|
if (t < 1) {
|
|
|
|
return 0.5 * t * t * t * t;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 2;
|
|
|
|
return -(t * t * t * t - 2) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInQuint: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return t * t * t * t * t;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutQuint: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 1;
|
|
|
|
return t * t * t * t * t + 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutQuint: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t *= 2;
|
|
|
|
if (t < 1) {
|
|
|
|
return (t * t * t * t * t) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 2;
|
|
|
|
return (t * t * t * t * t + 2) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInSine: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return -Math.cos(t * (Math.PI / 2)) + 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutSine: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return Math.sin(t * (Math.PI / 2));
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutSine: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return -(Math.cos(Math.PI * t) - 1) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInExpo: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return (t === 0) ? 0 : Math.pow(2, 10 * (t - 1));
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutExpo: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return (t === 1) ? 1 : (-Math.pow(2, -10 * t) + 1);
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutExpo: function(t) {
|
|
|
|
if (t === 0) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return 0;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
if (t === 1) {
|
|
|
|
return 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
t *= 2;
|
|
|
|
if (t < 1) {
|
|
|
|
return 0.5 * Math.pow(2, 10 * (t - 1));
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
return (-Math.pow(2, -10 * (t - 1)) + 2) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInCirc: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return -(Math.sqrt(1 - t * t) - 1);
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutCirc: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 1;
|
|
|
|
return Math.sqrt(1 - t * t);
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutCirc: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t *= 2;
|
|
|
|
if (t < 1) {
|
|
|
|
return -(Math.sqrt(1 - t * t) - 1) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 2;
|
|
|
|
return (Math.sqrt(1 - t * t) + 1) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInElastic: function(t) {
|
|
|
|
var s = 1.70158;
|
2015-03-17 20:42:44 +00:00
|
|
|
var p = 0.3;
|
2015-03-11 02:11:28 +00:00
|
|
|
if (t === 0) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return 0;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
if (t === 1) {
|
|
|
|
return 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
var s = p / (2 * Math.PI) * Math.asin(1);
|
|
|
|
t -= 1;
|
|
|
|
return -(Math.pow(2, 10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutElastic: function(t) {
|
|
|
|
var s = 1.70158;
|
2015-03-17 20:42:44 +00:00
|
|
|
var p = 0.3;
|
2015-03-11 02:11:28 +00:00
|
|
|
if (t === 0) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return 0;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
if (t === 1) {
|
|
|
|
return 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
var s = p / (2 * Math.PI) * Math.asin(1);
|
|
|
|
return Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutElastic: function(t) {
|
|
|
|
var s = 1.70158;
|
2015-03-17 20:42:44 +00:00
|
|
|
var p = 0.3 * 1.5;
|
2015-03-11 02:11:28 +00:00
|
|
|
if (t === 0) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return 0;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
t *= 2;
|
|
|
|
if (t === 2) {
|
|
|
|
return 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
var s = p / (2 * Math.PI) * Math.asin(1);
|
2015-03-11 02:11:28 +00:00
|
|
|
if (t < 1) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 1;
|
|
|
|
return -(Math.pow(2, 10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p)) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 1;
|
|
|
|
return Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) / 2 + 1;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInBack: function(t) {
|
|
|
|
var s = 1.70158;
|
2015-03-17 20:42:44 +00:00
|
|
|
return t * t * ((s + 1) * t - s);
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutBack: function(t) {
|
|
|
|
var s = 1.70158;
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 1;
|
|
|
|
return (t * t * ((s + 1) * t + s) + 1);
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInOutBack: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
var s = 1.70158 * 1.525;
|
|
|
|
t *= 2;
|
|
|
|
if (t < 1) {
|
|
|
|
return (t * t * ((s + 1) * t - s)) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 2;
|
|
|
|
return (t * t * ((s + 1) * t + s) + 2) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeInBounce: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
return 1 - this.easeOutBounce(1 - t);
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
easeOutBounce: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
if (t < (1 / 2.75)) {
|
|
|
|
return 7.5625 * t * t;
|
2015-03-11 02:11:28 +00:00
|
|
|
} else if (t < (2 / 2.75)) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 1.5 / 2.75;
|
|
|
|
return 7.5625 * t * t + 0.75;
|
2015-03-11 02:11:28 +00:00
|
|
|
} else if (t < (2.5 / 2.75)) {
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 2.25 / 2.75;
|
|
|
|
return 7.5625 * t * t + 0.9375;
|
2015-03-11 02:11:28 +00:00
|
|
|
} else {
|
2015-03-17 20:42:44 +00:00
|
|
|
t -= 2.625 / 2.75;
|
|
|
|
return 7.5625 * t * t + 0.984375;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
easeInOutBounce: function(t) {
|
2015-03-17 20:42:44 +00:00
|
|
|
if (t < 0.5) {
|
|
|
|
return this.easeInBounce(t * 2) / 2;
|
2015-03-11 02:11:28 +00:00
|
|
|
}
|
2015-03-17 20:42:44 +00:00
|
|
|
return this.easeOutBounce(t * 2 - 1) / 2 + 0.5;
|
2015-03-11 02:11:28 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
var ticksPerSecond = 60;
|
|
|
|
var lastUsedTag = 0;
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
allocateTag: function(): number {
|
|
|
|
return ++lastUsedTag;
|
|
|
|
},
|
|
|
|
|
|
|
|
evaluateEasingFunction: function(duration: number, easing: string | EasingFunction): Array<number> {
|
|
|
|
if (typeof easing === 'string') {
|
|
|
|
easing = defaults[easing] || defaults.easeOutQuad;
|
|
|
|
}
|
|
|
|
|
|
|
|
var tickCount = Math.round(duration * ticksPerSecond / 1000);
|
|
|
|
var sample = [];
|
|
|
|
for (var i = 0; i <= tickCount; i++) {
|
|
|
|
sample.push(easing(i / tickCount));
|
|
|
|
}
|
|
|
|
|
|
|
|
return sample;
|
|
|
|
},
|
|
|
|
};
|