Question

这是我的整个申请。很简单的东西。

我有两个面板上有click个事件。但是，由于某种原因，它们都调用相同的函数。当我只有一个面板可见时，动画正常工作。但是，如果我在click事件的舞台上添加另一个，则两个面板同时进行动画制作。

我只是不知道我做错了什么。我的功能只是寻找当前的目标，但显然我不能正确地做到这一点，因为它是动画两个面板而不仅仅是我点击的面板。我的预期结果是仅为点击的面板设置动画。

任何帮助都会非常感激。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" 
               minHeight="600"
               applicationComplete="application1_applicationCompleteHandler(event)"
               left="20">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    <!--<s:Sequence id="EffectsHide">-->
        <!--<s:Rotate id="rotatein" target="{panel1}"  angleBy="90"/>-->

        <mx:Parallel id="EffectsHide">
        <s:Rotate3D angleYFrom="0" angleYTo="360"  duration="1000"  />
        <s:Resize id="shrink" duration="1000"  heightBy="-170" />
        <s:Move3D  id="MoveIn"   yBy="{_applicationHeighth-30}" duration="1000"/> 
        </mx:Parallel>
<!--    </s:Sequence>-->

    <s:Sequence id="EffectsShow">
        <s:Rotate id="rotateOut" target="{panel1}"  angleBy="-90"/>
        <s:Move id="MoveOUt"  target="{panel1}" xBy="-30"/> 
        <s:Resize id="grow" target="{panel1}" duration="2000" widthBy="{_applicationWidth}" heightBy="{_applicationHeighth}"/>
    </s:Sequence>

    </fx:Declarations>



    <fx:Script>

        <![CDATA[
            import mx.effects.Effect;
            import mx.effects.Parallel;
            import mx.events.FlexEvent;
            private var myParallel:Parallel = new Parallel();
            private var myParallelReverse:Parallel = new Parallel();


            [Bindable]
            public var _applicationWidth:Number = new Number();
            [Bindable]
            public var _applicationHeighth:Number = new Number();
            [Bindable]
            public var Maximized :Boolean = true;
            public var minimized :Boolean = false;


            public  function rotateTarget(event:Event):void{

                //define the rotate effect
                /*
                var myRotated3d:Rotate3D= new Rotate3D(event.currentTarget);
                myRotated3d.angleYFrom = 0;
                myRotated3d.angleYTo=360;
                myRotated3d.duration=1000;
                */


            if(Maximized == true)
            {
            //EffectsHide.target(_target);

            //EffectsHide.stop();   
            //EffectsHide.play();   
                //var myRotated3d:Rotate3D= new Rotate3D(event.currentTarget);
                //myRotated3d.angleYFrom = 0;
                //myRotated3d.angleYTo=360;
                //myRotated3d.duration=1000

                var myResize:Resize = new Resize(event.currentTarget);
                myResize.heightBy = -160;
                myResize.duration = 500;

                var myMove3D:Move= new Move(event.currentTarget);
                myMove3D.yTo=_applicationHeighth-30;
                myMove3D.duration=500;

                //myParallel.addChild(myRotated3d);
                myParallel.addChild(myResize);
                myParallel.addChild(myMove3D);
                //this.invalidateDisplayList();
                //this.validateNow();
                //this.panel1.validateProperties();




            minimized= true;
            Maximized = false;
            myParallel.stop();
            myParallel.play();
            trace('tried to run')
            }

            else if (Maximized == false){

            trace(numElements)
            //trace(getElementIndex(panel1));

            //var myRotated3drever:Rotate3D= new Rotate3D(event.currentTarget);
            //myRotated3drever.angleYFrom = 0;
            //myRotated3drever.angleYTo=-360;
            //myRotated3drever.duration=1000;

            var myResizerever:Resize = new Resize(event.currentTarget);
            myResizerever.heightTo= 200;
            myResizerever.duration =500;

            var myMove3Drever:Move = new Move(event.currentTarget);
            myMove3Drever.yTo=(0);
            myMove3Drever.duration=500;


            myParallelReverse.addChild(myMove3Drever);
            myParallelReverse.addChild(myResizerever);
            //myParallelReverse.addChild(myRotated3drever);

            myParallelReverse.play();
            Maximized = true;




            }   

    }


            protected function application1_applicationCompleteHandler(event:FlexEvent):void
            {
                _applicationWidth = stage.width;
                _applicationHeighth = stage.height;

            }


            protected function _butt_clickHandler(event:MouseEvent):void
            {
                trace(panel1.x);
                trace(panel1.y);
                trace(panel1.height);


            }

        ]]>
    </fx:Script>


    enter code here
<mx:Canvas>

<mx:Panel id="panel1" title="Label1" x="400" y="0" width="200"  height="200" click="rotateTarget(event)"/>
<mx:Panel id="panel2" title="Label2" x="0" y="0" width="200"  height="200" click="rotateTarget(event)"/>

</mx:Canvas>
    <!--<s:Panel id="panel2" y="240" title="Label2" width="200"  height="200" click="rotateTarget(event)"/>
--> 
<!--</s:VGroup>-->  
<s:Button x="250" id="_butt" click="_butt_clickHandler(event)"/>
<s:Button x="250" y="20" id="_butt2" click="rotateTarget(event)"/>

</s:Application>

Answer 1

没有完整代码（带面板的位），我最好的两个猜测：

您应该使用event.target而不是event.currentTarget。
你将'EffectsHide'（顺便说一下所有的ID都应该是小写的）与'panel1'直接并行，这样每当它得到它将要作为目标的组件的游戏时。

*我现在看到你继续将在rotatetarget函数中创建的新动画效果添加到并行'myParallel'。然而，你不会在任何给定点移除它们，所以它只是继续播放你每次播放时添加的所有效果。您只需在应用程序设置中添加一次，然后再播放它们。

在flex问题中通过actionscript将动画应用于UI组件

1 个答案: