Question

我正在尝试对照片执行一些3D旋转，但它比看起来更难。事实是，当您在X轴和/或Y轴上旋转图片时，它看起来很拉伸（但它是正常的）。但是当您从轴Z进行旋转时，图片会围绕屏幕的Z轴而不是自己的轴旋转。因此它看起来像一张拉伸的图片，它转动一个轴而不是一个平板图片，从侧面看，并围绕它居中。

因为我知道它有点令人困惑，所以这是我正在使用的功能。您可以尝试使用圆形图片以获得更好的效果＆＃34;。想象一下你想要一个旋转的圆圈，而不是方向。您将看到图片围绕其自身轴的屏幕轴旋转。

public function rotate(target:IVisualElement, x:Number = 0, y:Number = 0, z:Number = 0, duration:Number = 1000):void
{
    var rotation:Rotate3D = new Rotate3D();
    rotation.autoCenterTransform = true;
    rotation.angleXTo = x;
    rotation.angleYTo = y;
    rotation.angleZTo = z;
    rotation.duration = duration;
    rotation.target = target;

    rotation.play();
}

有没有简单的方法来执行这些旋转而无需重新开发轮子？

Answer 1

最后，我设法完成了没有外部库的完美工作。诀窍很简单，我不明白为什么我以前没有尝试过。

我不是在同一个元素上应用X，Y和Z变换，而是在容器上应用X和Y旋转，在容器内的图片上应用Z轴。

像这样，Z旋转不会再扰乱另一个轴。

以下是工作测试代码：

<fx:Script>
    <![CDATA[
        private function init():void
        {
            moveZ();
            var timer:Timer = new Timer(5000);
            timer.addEventListener(TimerEvent.TIMER, repeat);
            timer.start();
        }

        private function repeat(e:TimerEvent):void
        {
            moveZ();
        }

        private function moveX():void
        {
            rotX += 20;
            fx.angleXTo = rotX;
            fx.angleYTo = rotY;
            fx.angleZTo = 0;
            fx.duration = 1000;
            fx.play(new Array(container));
        }
        private function moveY():void
        {
            rotY += 20;
            fx.angleXTo = rotX;
            fx.angleYTo = rotY;
            fx.angleZTo = 0;
            fx.duration = 1000;
            fx.play(new Array(container));
        }
        private function moveZ():void
        {
            rotZ += 360;
            fx.angleXTo = 0;
            fx.angleYTo = 0;
            fx.angleZTo = rotZ;
            fx.duration = 5000;
            fx.play(new Array(image));
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <fx:Number id="rotX">0</fx:Number>
    <fx:Number id="rotY">0</fx:Number>
    <fx:Number id="rotZ">0</fx:Number>
    <s:Rotate3D id="fx" autoCenterProjection="true" autoCenterTransform="true"/>
</fx:Declarations>
<s:VGroup id="vGroup" left="10" top="10">
    <s:Button label="X" buttonDown="moveX()"/>
    <s:Button label="Y" buttonDown="moveY()"/>
</s:VGroup>
<s:BorderContainer id="container" width="200" height="200" horizontalCenter="0"
                   verticalCenter="0">
    <s:BitmapImage id="image" width="200" height="200" horizontalCenter="0" smooth="true"
                   source="@Embed('assets/circle.png')" verticalCenter="0"/>
</s:BorderContainer>

flex 4.6 3D旋转轴

1 个答案: