You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
6.9 KiB
Plaintext
218 lines
6.9 KiB
Plaintext
namespace Animation {
|
|
const animatableExpandAtts = [ #height, #width, #border-top-width, #border-bottom-width,
|
|
#border-left-width, #border-right-width, #border-top-color, #border-bottom-color,
|
|
#border-left-color, #border-right-color, #padding-top, #padding-bottom, #padding-left,
|
|
#padding-right, #margin-top, #margin-bottom, #margin-left, #margin-right,
|
|
#background-color-top-left, #background-color-top-right, #background-color-bottom-left,
|
|
#background-color-bottom-right, #opacity ];
|
|
const animatableMoveAtts = [ #height, #width, #top, #bottom, #left, #right ];
|
|
|
|
namespace Ease {
|
|
function Linear(t, b, c, d) {
|
|
return (t/d)*c + b;
|
|
}
|
|
function InQuad(t, b, c, d) {
|
|
return c*(t /= d)*t + b;
|
|
}
|
|
function OutQuad(t, b, c, d) {
|
|
return -c *(t /= d)*(t-2) + b;
|
|
}
|
|
function InOutQuad(t, b, c, d) {
|
|
if ((t /= d/2) < 1) return c/2*t*t + b;
|
|
return -c/2 * ((--t)*(t-2) - 1) + b;
|
|
}
|
|
function InCubic(t, b, c, d) {
|
|
return c*(t /= d)*t*t + b;
|
|
}
|
|
function OutCubic(t, b, c, d) {
|
|
return c*((t = t/d-1)*t*t + 1) + b;
|
|
}
|
|
function InOutCubic(t, b, c, d) {
|
|
if ((t /= d/2) < 1) return c/2*t*t*t + b;
|
|
return c/2*((t -= 2)*t*t + 2) + b;
|
|
}
|
|
function InQuart(t, b, c, d) {
|
|
return c*(t /= d)*t*t*t + b;
|
|
}
|
|
function OutQuart (t, b, c, d) {
|
|
return -c * ((t = t/d-1)*t*t*t - 1) + b;
|
|
}
|
|
function InOutQuart (t, b, c, d) {
|
|
if ((t /= d/2) < 1) return c/2*t*t*t*t + b;
|
|
return -c/2 * ((t -= 2)*t*t*t - 2) + b;
|
|
}
|
|
function InQuint (t, b, c, d) {
|
|
return c*(t /= d)*t*t*t*t + b;
|
|
}
|
|
function OutQuint (t, b, c, d) {
|
|
return c*((t = t/d-1)*t*t*t*t + 1) + b;
|
|
}
|
|
function InOutQuint(t, b, c, d) {
|
|
if ((t /= d/2) < 1) return c/2*t*t*t*t*t + b;
|
|
return c/2*((t -= 2)*t*t*t*t + 2) + b;
|
|
}
|
|
function InSine(t, b, c, d) {
|
|
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
|
}
|
|
function OutSine(t, b, c, d) {
|
|
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
|
}
|
|
function InOutSine(t, b, c, d) {
|
|
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
|
}
|
|
function InExpo(t, b, c, d) {
|
|
return (t==0)? b: c * Math.pow(2, 10 * (t/d - 1)) + b;
|
|
}
|
|
function OutExpo(t, b, c, d) {
|
|
return (t==d)? b+c: c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
|
}
|
|
function InOutExpo(t, b, c, d) {
|
|
if (t==0) return b;
|
|
if (t==d) return b+c;
|
|
if ((t /= d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
|
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
|
}
|
|
function InCirc(t, b, c, d) {
|
|
return -c * (Math.sqrt(1 - (t /= d)*t) - 1) + b;
|
|
}
|
|
function OutCirc(t, b, c, d) {
|
|
return c * Math.sqrt(1 - (t = t/d-1)*t) + b;
|
|
}
|
|
function InOutCirc(t, b, c, d) {
|
|
if ((t /= d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
|
return c/2 * (Math.sqrt(1 - (t -= 2)*t) + 1) + b;
|
|
}
|
|
function InElastic(t, b, c, d) {
|
|
var s = 1.70158;
|
|
var p = 0;
|
|
var a = c;
|
|
if (t==0) return b; if ((t /= d)==1) return b+c; if (!p) p = d*.3;
|
|
if (a < Math.abs(c)) {
|
|
a = c; s = p/4;
|
|
}
|
|
else s = p/(2*Math.PI) * Math.asin (c/a);
|
|
return -(a*Math.pow(2, 10*(t -= 1)) * Math.sin((t*d-s)*(2*Math.PI)/p)) + b;
|
|
}
|
|
function OutElastic(t, b, c, d) {
|
|
var s = 1.70158;
|
|
var p = 0;
|
|
var a = c;
|
|
if (t==0) return b; if ((t /= d)==1) return b+c; if (!p) p = d*.3;
|
|
if (a < Math.abs(c)) {
|
|
a = c; s = p/4;
|
|
}
|
|
else s = p/(2*Math.PI) * Math.asin (c/a);
|
|
return a*Math.pow(2, -10*t) * Math.sin((t*d-s)*(2*Math.PI)/p) + c + b;
|
|
}
|
|
function InOutElastic(t, b, c, d) {
|
|
var s = 1.70158;
|
|
var p = 0;
|
|
var a = c;
|
|
if (t==0) return b; if ((t /= d/2)==2) return b+c; if (!p) p = d*(.3*1.5);
|
|
if (a < Math.abs(c)) {
|
|
a = c; s = p/4;
|
|
}
|
|
else s = p/(2*Math.PI) * Math.asin (c/a);
|
|
if (t < 1) return -.5*(a*Math.pow(2, 10*(t -= 1)) * Math.sin((t*d-s)*(2*Math.PI)/p)) + b;
|
|
return a*Math.pow(2, -10*(t -= 1)) * Math.sin((t*d-s)*(2*Math.PI)/p)*.5 + c + b;
|
|
}
|
|
function InBack(t, b, c, d, s = 1.70158) {
|
|
return c*(t /= d)*t*((s+1)*t - s) + b;
|
|
}
|
|
function OutBack(t, b, c, d, s = 1.70158) {
|
|
return c*((t = t/d-1)*t*((s+1)*t + s) + 1) + b;
|
|
}
|
|
function InOutBack(t, b, c, d, s = 1.70158) {
|
|
if ((t /= d/2) < 1) return c/2*(t*t*(((s *= (1.525))+1)*t - s)) + b;
|
|
return c/2*((t -= 2)*t*(((s *= (1.525))+1)*t + s) + 2) + b;
|
|
}
|
|
function OutBounce(t, b, c, d) {
|
|
if ((t /= d) < (1/2.75))
|
|
return c*(7.5625*t*t) + b;
|
|
else if (t < (2/2.75))
|
|
return c*(7.5625*(t -= (1.5/2.75))*t + .75) + b;
|
|
else if (t < (2.5/2.75))
|
|
return c*(7.5625*(t -= (2.25/2.75))*t + .9375) + b;
|
|
else
|
|
return c*(7.5625*(t -= (2.625/2.75))*t + .984375) + b;
|
|
}
|
|
function InBounce(t, b, c, d) {
|
|
return c - OutBounce (d-t, 0, c, d) + b;
|
|
}
|
|
function InOutBounce(t, b, c, d) {
|
|
if (t < d/2) return InBounce (t*2, 0, c, d) * .5 + b;
|
|
return OutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;
|
|
}
|
|
}
|
|
|
|
function morphStyle(element, styleAtts, stepDelay, switchStateFunction, easeF, clearAfter = true) {
|
|
function styleSnapshot(element) {
|
|
var col = {};
|
|
for (var styleAtt in styleAtts) {
|
|
var v = element.style[styleAtt];
|
|
if(!v) continue;
|
|
col[styleAtt] = v;
|
|
}
|
|
return col;
|
|
}
|
|
|
|
var progress = 0.0;
|
|
|
|
function makeMidValue(initVal, finalVal) {
|
|
if (typeof initVal == #color && typeof finalVal == #color) {
|
|
var r = (progress * (finalVal.r - initVal.r) + initVal.r).toInteger();
|
|
var g = (progress * (finalVal.g - initVal.g) + initVal.g).toInteger();
|
|
var b = (progress * (finalVal.b - initVal.b) + initVal.b).toInteger();
|
|
return color(r, g, b);
|
|
}
|
|
if (typeof initVal == #length) {
|
|
var units = initVal.units;
|
|
initVal = initVal.toFloat();
|
|
finalVal = finalVal.toFloat();
|
|
var v = easeF(progress, initVal, finalVal - initVal, 1.0);
|
|
return length(v, units);
|
|
}
|
|
}
|
|
|
|
var initialStyles = styleSnapshot(element);
|
|
switchStateFunction();
|
|
var finalStyles = styleSnapshot(element);
|
|
|
|
function do_morph() {
|
|
progress += 0.02;
|
|
if(progress > 1.0) {
|
|
if (clearAfter) element.style.clear();
|
|
return;
|
|
}
|
|
for (var satt in initialStyles) {
|
|
var initVal = initialStyles[satt];
|
|
var finalVal = finalStyles[satt];
|
|
if(!initVal || !finalVal)
|
|
continue;
|
|
if(initVal == finalVal)
|
|
continue;
|
|
element.style[satt] = makeMidValue(initVal, finalVal);
|
|
}
|
|
return stepDelay;
|
|
}
|
|
element.animate(do_morph);
|
|
}
|
|
|
|
function expand(element, easeF = Animation.Ease.InQuad, stepDelay = 8) {
|
|
function toggle() {
|
|
if (element.state.expanded)
|
|
element.state.collapsed = true;
|
|
else
|
|
element.state.expanded = true;
|
|
}
|
|
morphStyle(element, animatableExpandAtts, stepDelay, toggle, easeF);
|
|
}
|
|
|
|
function move(element, x, y, easeF = Animation.Ease.InQuad, stepDelay = 6) {
|
|
function toggle() {
|
|
element.style#left = px(x);
|
|
element.style#top = px(y);
|
|
}
|
|
morphStyle(element, animatableMoveAtts, stepDelay, toggle, easeF, false);
|
|
}
|
|
} |