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

Question

我正在使用下面的代码来做一个变换动画：

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.
]}}>

目前，transform-origin (<-在react原生中实际上不可用)是中心。对于动画，组件从中心缩放，因此它看起来像是从中心“扩展”。我希望它从顶部“展开”(例如，将变换原点设置为组件的顶部……我想)。

我找到了一个模拟transform-origin css的方法：

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);
}

但是我不确定应该使用什么矩阵来以我想要的方式影响组件。我对变换矩阵有一些了解，但仅限于平移和旋转-我不确定如何影响scale变换的原点。

对于任何想要深入挖掘的人，谢谢：https://en.wikipedia.org/wiki/Transformation_matrix

Answer 1

你需要3次矩阵变换。1)将视图中心平移到所需的原点，2)应用缩放，3)应用负平移。

const matrix = MatrixMath.createIdentityMatrix();

// First translation, move view center to top left corner
const translate = MatrixMath.createIdentityMatrix();
MatrixMath.reuseTranslate3dCommand(translate, -viewWidth / 2, -viewHeight / 2, 0);
MatrixMath.multiplyInto(matrix, matrix, translate);

// Scale, center point and the top left corner are now overlapping so view will expand or shrink from the top left corner
const scale = MatrixMath.createIdentityMatrix();
MatrixMath.reuseScale3dCommand(scale, this.state.ScaleView, this.state.ScaleView, 1);
MatrixMath.multiplyInto(matrix, matrix, scale);

// Move your view's top left corner to it's original position
const untranslate = MatrixMath.createIdentityMatrix();
MatrixMath.reuseTranslate3dCommand(untranslate, viewWidth / 2, viewHeight / 2, 0);
MatrixMath.multiplyInto(matrix, matrix, untranslate);

// You need to set transform matrix somewhere in your JSX like this:
// <View style={{ transform: [ { matrix } ] }} />
// Or, you can call ref.setNativeProps().

我认为这样你必须使用矩阵进行缩放，所以不需要使用特定的转换函数，如scale/scaleX/scaleY。

您还可以手动计算翻译值并使用transform的translateX/translateY函数来实现相同的效果。