您可能想查看名为 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>