轻松理解 EaseJs 中 regX 和 regY：让图形变形更轻松

2023-12-04 07:12:47

EaseJs 中 regX / regY 的用法：简化图形中心点的设置

在动效开发中，缩放、旋转等基本变形动作非常常用，而这些变形操作都涉及到中心点的设置。EaseJs 中的 regX 和 regY 属性正是为了简化中心点的设置而设计的，可以帮助你轻松实现图形的变形效果。

理解 regX 和 regY

regX 和 regY 分别表示图形在 X 轴和 Y 轴上的中心点坐标。默认情况下，图形的中心点位于其左上角，但你可以通过修改 regX 和 regY 的值来改变中心点的位置。

设置中心点

要设置图形的中心点，只需将 regX 和 regY 的值设置为希望的 X 轴和 Y 轴坐标即可。例如，要将图形的中心点设置为其右上角，可以将 regX 设置为图形的宽度，将 regY 设置为图形的高度。

myShape.regX = myShape.width;
myShape.regY = myShape.height;

缩放和旋转

设置好中心点后，就可以轻松地对图形进行缩放和旋转操作了。缩放操作会以中心点为原点进行，而旋转操作也会围绕中心点进行。

// 缩放图形
myShape.scaleX = 2;
myShape.scaleY = 2;

// 旋转图形
myShape.rotation = 45;

实战案例

为了更好地理解 regX 和 regY 的用法，我们来看一个实战案例。假设我们想要创建一个缩放并旋转的动画效果。我们可以先创建一个矩形图形，然后将它的中心点设置为其右上角。接下来，我们可以使用 TweenMax 库来创建缩放和旋转动画。

// 创建矩形图形
var rect = new createjs.Shape();
rect.graphics.beginFill("red").drawRect(0, 0, 100, 100);

// 设置中心点
rect.regX = 100;
rect.regY = 100;

// 创建缩放动画
var scaleTween = TweenMax.to(rect, 1, {scaleX: 2, scaleY: 2});

// 创建旋转动画
var rotationTween = TweenMax.to(rect, 1, {rotation: 360});

// 启动动画
scaleTween.play();
rotationTween.play();