在画布上创建幻灯片效果的最佳方法是什么？

Question

我需要创建一个向左滑动和向右滑动的效果。将它添加到舞台时，将在面板上使用它。

另外，我想要使用效果的画布的高度由“顶部”和“底部”属性决定，我听说这可能会在应用这样的效果时引起问题。

Answer 1

您可能希望查看名为TweenMax的内容：http://www.greensock.com/tweenmax/它极大地简化了许多内容的动画，并且它有许多您期望的选项，例如轻松进/出，onTween事件/回调，完成时回调等。

我不是百分之百确定你要做的事情，但理论上你会想要在屏幕上开始你的画布，然后做这样的事情：

TweenMax.to(theCanvas, 1.0, {x:0});

这行代码将告诉TweenMax（通过静态函数“to”）启动补间（动画）。动画的目标是theCanvas，动画的持续时间是1.0秒，动画的属性是x。在这种情况下.x是从当前“到”0的地方动画的。如果你写了：

TweenMax.to(theCanvas, 1.0, {x:100});

然后画布将从当前的位置设置动画.x = 100.注意，如果为“值”指定字符串

TweenMax.to(theCanvas, 1.0, {x:"100"});

这被视为delta - 因此画布不会以x = 100结束，而是以x = originalX + 100结束。

就画布的高度而言，应该可以使用顶部和底部样式设置来约束高度，但我不是100％肯定这个......你会想要明确定义宽度但是，你需要明确地（绝对地）定义x位置。

修改

这是一个例子，我认为它涵盖了基础知识。请注意，滑块画布的高度由顶部和底部定义，没有问题。

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
    width="500" height="500"
    xmlns:mx="http://www.adobe.com/2006/mxml"
>
<mx:Script>
    <![CDATA[
        import com.greensock.TweenMax;

        private function slideIn():void
        {
            TweenMax.to(theSlider, 1.0, {x:50});
        }

        private function slideOut():void
        {
            TweenMax.to(theSlider, 1.0, {x:300});
        }

    ]]>
</mx:Script>

<mx:Button label="Slide In" click="{slideIn()}"/>
<mx:Button x="80" label="Slide Out" click="{slideOut()}"/>


<mx:Canvas id="theWindow" 
    width="300" height="300"
    verticalCenter="0" horizontalCenter="0"
    borderColor="red" borderThickness="1" borderStyle="solid"
    verticalScrollPolicy="off" horizontalScrollPolicy="off"
>

    <mx:Canvas id="theSlider" 
        width="200"
        x="-200"
        top="10" bottom="10"
        backgroundColor="green" backgroundAlpha="1.0"
        verticalScrollPolicy="off" horizontalScrollPolicy="off"
    />

</mx:Canvas>

</mx:Canvas>

Answer 2

这是你可以开始的东西，我做了一段时间，这是Flex3版本将它移动到4我已经将基类更改为Group并且能够进行一些关于初始创建的进一步优化“滑动画布”上的组件。在导出的右键菜单中启用了查看源：http://www.shaunhusain.com/ImageSlider/（不要被它允许你添加任何UIComponent的名称混淆，我刚开始使用图像）。我没有立即意识到通过顶部和底部属性定义它的大小有任何问题，但是如果你遇到问题则可能需要调整。