平滑对齐两个元素的 transformOrigin
瞬间改变一个元素的transformOrigin
的 transformOrigintransformOrigin
使其与另一个元素的 transformOrigin 对齐,而不会产生跳跃(需要MotionPathPlugin):
// fromElement is the one whose transformOrigin should change to match up with the toElement's transformOrigin.
function alignOrigins(fromElement, toElement) {
let [fromEl, toEl] = gsap.utils.toArray([fromElement, toElement]),
a = window.getComputedStyle(toEl).transformOrigin.split(" "),
newOrigin = MotionPathPlugin.convertCoordinates(toEl, fromEl, {
x: parseFloat(a[0]),
y: parseFloat(a[1]),
}),
bounds1 = fromEl.getBoundingClientRect(),
bounds2;
gsap.set(fromEl, {
transformOrigin: newOrigin.x + "px " + newOrigin.y + "px",
});
bounds2 = fromEl.getBoundingClientRect();
gsap.set(fromEl, {
x: "+=" + (bounds1.left - bounds2.left),
y: "+=" + (bounds1.top - bounds2.top),
});
}