212 lines
5.4 KiB
JavaScript
212 lines
5.4 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const keyOf = require('fbjs/lib/keyOf');
|
|
|
|
const X_DIM = keyOf({x: null});
|
|
const Y_DIM = keyOf({y: null});
|
|
const Z_DIM = keyOf({z: null});
|
|
|
|
const InitialOperationField = {
|
|
transformTranslate: [0, 0, 0],
|
|
transformScale: [1, 1, 1],
|
|
};
|
|
|
|
const InterpolateMatrix = {
|
|
transformScale: function(mat, x, y, z) {
|
|
mat[0] = mat[0] * x;
|
|
mat[1] = mat[1] * x;
|
|
mat[2] = mat[2] * x;
|
|
mat[3] = mat[3] * x;
|
|
mat[4] = mat[4] * y;
|
|
mat[5] = mat[5] * y;
|
|
mat[6] = mat[6] * y;
|
|
mat[7] = mat[7] * y;
|
|
mat[8] = mat[8] * z;
|
|
mat[9] = mat[9] * z;
|
|
mat[10] = mat[10] * z;
|
|
mat[11] = mat[11] * z;
|
|
},
|
|
transformTranslate: function(mat, x, y, z) {
|
|
mat[12] = mat[0] * x + mat[4] * y + mat[8] * z + mat[12];
|
|
mat[13] = mat[1] * x + mat[5] * y + mat[9] * z + mat[13];
|
|
mat[14] = mat[2] * x + mat[6] * y + mat[10] * z + mat[14];
|
|
mat[15] = mat[3] * x + mat[7] * y + mat[11] * z + mat[15];
|
|
},
|
|
};
|
|
|
|
const computeNextValLinear = function(anim, from, to, value) {
|
|
const hasRoundRatio = 'round' in anim;
|
|
const roundRatio = anim.round;
|
|
let ratio = (value - anim.min) / (anim.max - anim.min);
|
|
if (!anim.extrapolate) {
|
|
ratio = ratio > 1 ? 1 : ratio < 0 ? 0 : ratio;
|
|
}
|
|
let nextVal = from * (1 - ratio) + to * ratio;
|
|
if (hasRoundRatio) {
|
|
nextVal = Math.round(roundRatio * nextVal) / roundRatio;
|
|
}
|
|
if (!isFinite(nextVal)) {
|
|
nextVal = null;
|
|
}
|
|
return nextVal;
|
|
};
|
|
|
|
const computeNextValLinearScalar = function(anim, value) {
|
|
return computeNextValLinear(anim, anim.from, anim.to, value);
|
|
};
|
|
|
|
const setNextValAndDetectChange = function(result, name, nextVal, didChange) {
|
|
if (!didChange) {
|
|
const prevVal = result[name];
|
|
result[name] = nextVal;
|
|
didChange = didChange || nextVal !== prevVal;
|
|
} else {
|
|
result[name] = nextVal;
|
|
}
|
|
return didChange;
|
|
};
|
|
|
|
const initIdentity = function(mat) {
|
|
mat[0] = 1;
|
|
mat[1] = 0;
|
|
mat[2] = 0;
|
|
mat[3] = 0;
|
|
mat[4] = 0;
|
|
mat[5] = 1;
|
|
mat[6] = 0;
|
|
mat[7] = 0;
|
|
mat[8] = 0;
|
|
mat[9] = 0;
|
|
mat[10] = 1;
|
|
mat[11] = 0;
|
|
mat[12] = 0;
|
|
mat[13] = 0;
|
|
mat[14] = 0;
|
|
mat[15] = 1;
|
|
};
|
|
|
|
const computeNextMatrixOperationField = function(
|
|
anim,
|
|
name,
|
|
dim,
|
|
index,
|
|
value,
|
|
) {
|
|
if (anim.from[dim] !== undefined && anim.to[dim] !== undefined) {
|
|
return computeNextValLinear(anim, anim.from[dim], anim.to[dim], value);
|
|
} else {
|
|
return InitialOperationField[name][index];
|
|
}
|
|
};
|
|
|
|
const computeTransform = function(
|
|
anim,
|
|
name,
|
|
value,
|
|
result,
|
|
didChange,
|
|
didMatrix,
|
|
) {
|
|
const transform =
|
|
result.transform !== undefined
|
|
? result.transform
|
|
: (result.transform = [{matrix: []}]);
|
|
const mat = transform[0].matrix;
|
|
const m0 = mat[0];
|
|
const m1 = mat[1];
|
|
const m2 = mat[2];
|
|
const m3 = mat[3];
|
|
const m4 = mat[4];
|
|
const m5 = mat[5];
|
|
const m6 = mat[6];
|
|
const m7 = mat[7];
|
|
const m8 = mat[8];
|
|
const m9 = mat[9];
|
|
const m10 = mat[10];
|
|
const m11 = mat[11];
|
|
const m12 = mat[12];
|
|
const m13 = mat[13];
|
|
const m14 = mat[14];
|
|
const m15 = mat[15];
|
|
if (!didMatrix) {
|
|
initIdentity(mat); // This will be the first transform.
|
|
}
|
|
const x = computeNextMatrixOperationField(anim, name, X_DIM, 0, value);
|
|
const y = computeNextMatrixOperationField(anim, name, Y_DIM, 1, value);
|
|
const z = computeNextMatrixOperationField(anim, name, Z_DIM, 2, value);
|
|
InterpolateMatrix[name](mat, x, y, z);
|
|
if (!didChange) {
|
|
didChange =
|
|
m0 !== mat[0] ||
|
|
m1 !== mat[1] ||
|
|
m2 !== mat[2] ||
|
|
m3 !== mat[3] ||
|
|
m4 !== mat[4] ||
|
|
m5 !== mat[5] ||
|
|
m6 !== mat[6] ||
|
|
m7 !== mat[7] ||
|
|
m8 !== mat[8] ||
|
|
m9 !== mat[9] ||
|
|
m10 !== mat[10] ||
|
|
m11 !== mat[11] ||
|
|
m12 !== mat[12] ||
|
|
m13 !== mat[13] ||
|
|
m14 !== mat[14] ||
|
|
m15 !== mat[15];
|
|
}
|
|
return didChange;
|
|
};
|
|
|
|
/**
|
|
* @param {object} anims Animation configuration by style property name.
|
|
* @return {function} Function accepting style object, that mutates that style
|
|
* object and returns a boolean describing if any update was actually applied.
|
|
*/
|
|
const buildStyleInterpolator = function(anims) {
|
|
function styleInterpolator(result, value) {
|
|
let didChange = false;
|
|
let didMatrix = false;
|
|
for (const name in anims) {
|
|
const anim = anims[name];
|
|
if (anim.type === 'linear') {
|
|
if (name in InterpolateMatrix) {
|
|
didChange = computeTransform(
|
|
anim,
|
|
name,
|
|
value,
|
|
result,
|
|
didChange,
|
|
didMatrix,
|
|
);
|
|
didMatrix = true;
|
|
} else {
|
|
const next = computeNextValLinearScalar(anim, value);
|
|
didChange = setNextValAndDetectChange(result, name, next, didChange);
|
|
}
|
|
} else if (anim.type === 'constant') {
|
|
const next = anim.value;
|
|
didChange = setNextValAndDetectChange(result, name, next, didChange);
|
|
} else if (anim.type === 'step') {
|
|
const next = value >= anim.threshold ? anim.to : anim.from;
|
|
didChange = setNextValAndDetectChange(result, name, next, didChange);
|
|
} else if (anim.type === 'identity') {
|
|
const next = value;
|
|
didChange = setNextValAndDetectChange(result, name, next, didChange);
|
|
}
|
|
}
|
|
return didChange;
|
|
}
|
|
return styleInterpolator;
|
|
};
|
|
|
|
module.exports = buildStyleInterpolator;
|