Javascript React Native-使用变换矩阵将比例变换的原点从中心更改为顶部

我正在使用以下代码执行变换动画：

transform: [
    // scaleX, scaleY, scale, theres plenty more options you can find online for this.
    {  scaleY: this.state.ViewScale } // this would be the result of the animation code below and is just a number.
]}}>

---

当前，变换原点（需要3个矩阵变换。1）将视图中心平移到所需原点，2）应用缩放，3）应用负平移

const matrix=MatrixMath.createIdentityMatrix（）；
//第一次平移，将视图中心移动到左上角
const translate=MatrixMath.createIdentityMatrix（）；
reuseTranslate3dCommand（translate，-viewWidth/2，-viewHeight/2，0）；
multiplyInto（矩阵，矩阵，转换）；
//比例、中心点和左上角现在重叠，因此视图将从左上角展开或收缩
const scale=MatrixMath.createIdentityMatrix（）；
MatrixMath.reuseScale3dCommand（scale，this.state.ScaleView，this.state.ScaleView，1）；
MatrixMath.multiplyInto（矩阵、矩阵、比例）；
//将视图的左上角移动到其原始位置
const untranslate=MatrixMath.createIdentityMatrix（）；
reuseTranslate3dCommand（untranslate，viewWidth/2，viewHeight/2，0）；
multiplyInto（矩阵，矩阵，未转换）；
//您需要在JSX中的某个位置设置转换矩阵，如下所示：
// 
//或者，您可以调用ref.setNativeProps（）。

我认为这种方法必须使用矩阵进行缩放，因此不需要使用特定的变换函数，如scale/scaleX/scaleY

您还可以手动计算translate值，并使用transform的

translateX

/

translateY

函数来实现相同的效果

transformOrigin(matrix, origin) {
    const { x, y, z } = origin;

    const translate = MatrixMath.createIdentityMatrix();
    MatrixMath.reuseTranslate3dCommand(translate, x, y, z);
    MatrixMath.multiplyInto(matrix, translate, matrix);

    const untranslate = MatrixMath.createIdentityMatrix();
    MatrixMath.reuseTranslate3dCommand(untranslate, -x, -y, -z);
    MatrixMath.multiplyInto(matrix, matrix, untranslate);
}