MotionPathPlugin.getAlignMatrix

MotionPathPlugin.getAlignMatrix（ fromElement:Element | window, toElement:Element | window, fromOrigin:Array, toOrigin:Array | String ） : Matrix2D

获取用于在不同坐标空间之间转换的 Matrix2D，通常这样你可以移动fromElement以使其与toElement对齐，同时考虑所有变换（即使是嵌套的）。该矩阵允许你使用它的 apply() 方法转换任意点/坐标。

参数

fromElement: 元素 | window
作为对齐矩阵基础的元素。通常这是将要移动到目标位置的元素。toElement使用生成的矩阵。
toElement: 元素 | window
要与之对齐的目标元素。fromElement应该与其对齐。
fromOrigin: 数组
[可选] 确定toElement上的哪个点需要被对齐。可以是一个包含x和y轴进度值的数组，如fromElement that gets aligned. It can be either an Array with progress values along the x and y axis like [0.5, 0.5](中心),[1, 0](右上角)等，或者一个带有基于像素的本地坐标的点对象，例如：{x: 100, y: 0}
toOrigin: 数组 | 字符串
[可选] 确定toElement上的哪个点需要被对齐。可以是一个包含x和y轴进度值的数组，如toElement that gets aligned. It can be either an Array with progress values along the x and y axis like [0.5, 0.5](中心),[1, 0](右上角)等，或者一个带有基于像素的本地坐标的点对象，例如：{x: 100, y: 0}或者，如果toElement是<path>元素，则可以使用"auto"来与路径本身的起点对齐，而不是使用包围盒。

返回值：Matrix2D

一个具有a、b、c、d、e和f属性的对象，就像一个标准的SVGMatrix.

细节

获取用于在不同坐标空间之间转换的 Matrix2D，通常这样你可以移动fromElement以使其与toElement并考虑所有变换（即使是嵌套的变换）。该矩阵允许你使用它的apply()方法来转换任何点或坐标。例如，你可以获得一个矩阵，将#div1的左上角与#div2的左上角对齐（无论嵌套变换如何），然后绘制出在#div2的坐标系中向右200px、向下100px的位置对应于#div1中的坐标。matrix.apply({x:200, y:100}).

什么是Matrix2D？

Matrix2D只是一个包含a, b, c, d, e，以及f属性的对象，表示一个二维变换矩阵（非常类似于SVGMatrix)。它包含了所有的旋转、缩放、倾斜以及x/y平移信息，在不同坐标空间之间转换时很有用。它有一个apply()方法，接受一个点对象（例如matrix.apply({x:0, y:100})）并返回应用了矩阵变换的新点对象。

示例代码

// get a matrix for aligning the center of the dot element with the top left corner of the dragme element (which will be treated as 0,0)
let matrix = MotionPathPlugin.getAlignMatrix(dot, dragme, [0.5, 0.5], [0, 0]),
  // 0,0 is the origin of the alignment (the top left corner in this case), but try any local coordinates.
  dragmePoint = { x: 0, y: 0 },
  // convert into the dot's coordinate space (technically its parentNode's)
  dotPoint = matrix.apply(dragmePoint);

gsap.to(dot, {
  // if there were already transforms applied, those would affect the matrix, so we should treat them as relative.
  x: "+=" + dotPoint.x,
  y: "+=" + dotPoint.y,
  ease: "power1.inOut",
});

演示

加载中...

getAlignMatrix()在GSAP 3.2.0版本中加入

通知

消息

MotionPathPlugin.getAlignMatrix