Titanium 中从左到右的滑动效果答案

【问题标题】：sliding effect in Titanium from left to rightTitanium 中从左到右的滑动效果
【发布时间】：2015-09-27 20:29:55
【问题描述】：

我正在尝试在 Titanium 中使用动画从左到右的滑动效果。我已经实现了大部分，但是当第一次从左到右转换时会出现一些错误。这是代码。

<Alloy>
<Window id = "win" onOpen="openCurrentIssue">
    <View id="view1"  width="75%" height="Ti.UI.FILL" left="0%" >
        <TableView id="menuTable"></TableView>
    </View>
    <View id="view2"  width="Ti.UI.FILL" height="Ti.UI.FILL" backgroundColor="#A9F5A9" >

        <View id="viewcheck1" >
            <Label id="title" width="Ti.UI.SIZE" text="Title" height="Ti.UI.SIZE" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER" color="black"></Label>
            <ImageView id="menuImg" image="/images/menu.png" onClick="showsideBar" left="5"></ImageView>
        </View>

        <View id="viewcheck2"  width="Ti.UI.SIZE" height="Ti.UI.SIZE" backgroundColor="#A9F5A9" >

            <Label id="cIssue" text="Demo" width="Ti.UI.SIZE" height="Ti.UI.SIZE" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER" top="10" color="black"></Label>
            <ImageView id="cImage" width="Ti.UI.SIZE" height="Ti.UI.SIZE" top="45"></ImageView>
            <Button id="cButton" title="Advertiser"></Button>
        </View>

        <View id="viewBelow" width="150" height="Ti.UI.FILL" backgroundColor="#A9A5A9" left="0%" visible="false" top="40">
            <TableView id="menuTable"></TableView>
        </View>

    </View>
</Window>

这里是 index.js 文件

var isMenu = false;
function showsideBar(e) {
try {
    if (isMenu) {
    $.viewBelow.animate({
        left : -150,
        duration : 300,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });
    isMenu = false;
} else {
    $.viewBelow.visible=true;
    $.viewBelow.animate({
        left : 0, 
        duration : 300,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });
    isMenu = true;
}

} catch(e) {
    Ti.API.info('Exception from index.js ' + e.value);

}}

这是函数所在的行

<ImageView id="menuImg" image="/images/menu.png" onClick="showsideBar" left="5"></ImageView>

第一次，可见属性为真，从左到右的效果没有出现，在第一次转换后，它按预期工作。谁能帮我找出上述代码中初始转换的错误。

【问题讨论】：

我在旋转图像时遇到了类似的问题。我的解决方案有点脏：我只是在初始化视图后以编程方式触发了一次旋转。在 360 度旋转之后，一切都按预期工作。你可以试一试，虽然它是非常规的..
你可以试试@swanand 修改。 :-) 它解决了我的错误。

标签： android titanium titanium-alloy appcelerator-mobile

【解决方案1】：

我修改了你的一些代码

<View id="viewBelow" width="150" height="Ti.UI.FILL" backgroundColor="#A9A5A9" left="-150" visible="false" top="40">
    <TableView id="menuTable"></TableView>
</View>

将 left 从 0% 更改为 -150 并且它工作正常。因为之前您已经给它0，然后将您的视图的左侧动画化到再次0 并使其可见。将其更改为-150 后，现在第一次视图的左侧动画从-150 变为0。

【讨论】：

太棒了。我试过你的修改。它完全按预期工作:-)
如果您觉得有帮助，请也接受答案.. :)