跳过主要内容

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

演示

加载中...

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗