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

【问题标题】：What is the best way to create a slide effect on a canvas?在画布上创建幻灯片效果的最佳方法是什么？
【发布时间】：2012-05-21 18:33:56
【问题描述】：

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

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

【问题讨论】：

标签： actionscript-3 apache-flex flex3 mxml

【解决方案1】：

你可能想看看一个叫做 TweenMax 的东西：http://www.greensock.com/tweenmax/ 它极大地简化了许多东西的动画，它有很多你期望的选项，例如缓入/缓出、onTween 事件/回调、完全回调等.

我不能 100% 确定你到底想做什么，但理论上你会想从屏幕上开始画布，然后做这样的事情：

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"});

这被视为增量 - 因此画布不会在 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>

【讨论】：

【解决方案2】：

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

【讨论】：