MotionPathPlugin.getGlobalMatrix
MotionPathPlugin.getGlobalMatrix( element:Element, inverse:Boolean, adjustGOffset:Boolean ) : Matrix2D
获取用于将元素的本地坐标空间转换为全局坐标空间的 Matrix2D。例如,如果你对一个点应用{x:0, y:0}
和apply()
该矩阵,则得到的点将是该元素左上角在视口中的坐标。
参数
元素: Element
要返回其全局矩阵的元素。这应该是一个元素引用(如 myElem),而不是选择器字符串(如 "#myElem")。
inverse:布尔值
[可选] 如果为真
true
,将返回矩阵的逆矩阵,这意味着它会产生完全相反的变换效果(比如对该矩阵调用 inverse() 方法的效果)adjustGOffset:布尔值
[可选] 如果为真
true
,则会忽略<g>
元素的 x/y 偏移量(它们的行为与大多数其他元素不同)。
返回值:Matrix2D
一个具有a、b、c、d、e和f属性的对象,就像一个标准的SVGMatrix.
细节
获取用于将元素的本地坐标空间转换为全局坐标空间的 Matrix2D。例如,如果你对一个点应用{x:0, y:0}
并将矩阵应用到该点上,得到的结果坐标将是该元素左上角在窗口/视口中的坐标。
什么是Matrix2D?
Matrix2D只是一个包含a
, b
, c
, d
, e
,以及f
属性的对象,表示一个二维变换矩阵(非常类似于SVGMatrix)。它包含了所有的旋转、缩放、倾斜以及x/y平移信息,在不同坐标空间之间转换时很有用。它有一个apply()
方法,接受一个点对象(例如matrix.apply({x:0, y:100})
)并返回应用了矩阵变换的新点对象。
示例代码
let matrix = MotionPathPlugin.getGlobalMatrix(element),
// 0,0 is the top left corner, but you can use any local coordinates.
localPoint = { x: 0, y: 0 },
// get a new point with the matrix transformations applied.
globalPoint = matrix.apply(localPoint);
gsap.to("#dot", {
x: globalPoint.x,
y: globalPoint.y,
ease: "power1.inOut",
});