RotateX квадрат вокруг своего центра

Question

У меня есть 3 квадрата (50 px x 50 px) в Sprite, один рядом друг с другом. Pivot каждого в 0, 0. 1-й квадрат X, Y: 0, 0 2-й квадрат X, Y: 50, 0 3-й квадрат X, Y: 100, 0 Я хотел бы повернуть X каждый квадрат вокруг его центральной линии. Я не могу понять, как установить точку схода так, чтобы все квадраты вращались вокруг своей индивидуальной точки, а не все вокруг одной и той же точки. Любая помощь с благодарностью!

Answer 1

Вы можете вращать дочерние видеоклипы, поворачивая и переводя их в новое положение. Обязательный стержень дочернего мувиклипа совпадает с точкой регистрации

в следующем коде держатель - ваш спрайт, а содержимое - квадраты. (Требуется, чтобы квадраты имели точку поворота, совпадающую с точкой регистрации)

PS: Держатель должен иметь ширину и высоту больше, чем содержание. Предполагается, что держателем здесь является какой-то большой контейнер (скажем, сцена).

var holder_Mc:MovieClip = holder_Mc
var content_Mc:MovieClip  = holder_Mc.content_Mc ;
var rotation_val_num:Number = 50// in degrees

        var bnd = holder_Mc.getBounds(MovieClip(holder_Mc.parent)) ;
        var cw:Number = bnd.width ;
        var ch:Number = bnd.height;

        var cx:Number = bnd.x ; 
        var cy:Number = bnd.y ; 
            content_Mc.rotation = rotation_val_num ;


            var bnd2 = holder_Mc.getBounds(MovieClip(holder_Mc.parent)) ;
            var cw2 = bnd2.width ;
            var ch2 = bnd2.height;

            var cx2 = bnd2.x ; 
            var cy2 = bnd2.y ; 



            var dx = Math.abs( holder_Mc.x - cx2 ) ;
            var dy = Math.abs( holder_Mc.y - cy2) ;

            holder_Mc.x  = cx + cw/2 + dx - cw2/2
            holder_Mc.y  = cy + ch/2 + dy - ch2/2

Answer 2

По сути, вам нужно переместить коробку, когда она вращается, чтобы получить этот эффект. Поскольку вы также знаете ширину / высоту блока и положение точек поворота, вычисления не так уж и сложны.

Однако зачем рассчитывать это самостоятельно? С TweenLite Вы можете использовать TransformAroundCenterPlugin, который обрабатывает преобразование для вас. Я бы порекомендовал использовать его. Если вы не хотите использовать его, установите для параметра tween-duration (второй параметр) значение 0,

// Activate plugin (should be called once)
TweenPlugin.activate([TransformAroundPointPlugin]);

// Transform your boxes around it's center, does not use the pivot point.
TweenLite.to(this.mcBox1, 1, new TweenLiteVars().transformAroundCenter({rotationX: 50}));
TweenLite.to(this.mcBox2, 1, new TweenLiteVars().transformAroundCenter({rotationX: 190}));
TweenLite.to(this.mcBox3, 0, new TweenLiteVars().transformAroundCenter({rotationX: 5}));