Question

我正在尝试在图像的点击事件中将图像从屏幕左下角移动到右上角位置。现在，当图像位于此位置（右上角）时，它应该在图像的单击事件上移动到屏幕的右下角。但是图像不会从第二个位置（右上角）移动。有什么建议吗？

这是.xml文件的代码：

<Alloy>
    <View class="container">
        <View class = " HeadingClass" >
            <Label class="headingClass" top = "0%">Scrollable View And Animation Screen</Label>
        </View>
        <ScrollableView class = "scrollableViewClass" id="scrollableView">
            <ImageView class="imgView1" id="imgViewId1"></ImageView>
            <ImageView class="imgView2" id="imgViewId2"></ImageView>
            <ImageView class="imgView3" id="imgViewId3"></ImageView>
            <ImageView class="imgView4" id="imgViewId4"></ImageView>
            <ImageView class="imgView5" id="imgViewId5"></ImageView>
        </ScrollableView>
        <View class="imageAnimationView" id="imageAnimation" >
            <ImageView class="animateImageClass" id="animateImage"></ImageView>
        </View> 
    </View>

</Alloy>

这是代码。 js文件：

var args = $.args;
$.animateImage.addEventListener('click', function(e) {
    if($.animateImage.top == "70%" && $.animateImage.left == "2%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "1%",
            left : "80%",
            duration : "2000" // top-right
        });
    }
    else if ($.animateImage.top == "1%" && $.animateImage.left == "80%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "70%",
            left : "80%",
            duration : "2000"
        });
    }
    if ($.animateImage.top == "70%" && $.animateImage.left == "80%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "70%",
            left : "2%",
            duration : "2000"
        });
    }
    $.animateImage.animate(viewAnimate);
});

Answer 1

我用这个tss测试了你的代码

"#animateImage": {
    top:"70%",
    left:"2%",
    backgroundColor:"#00f",
    width:200,
    height:200
}

它工作正常（Android，Ti.6.1.1.GA）。

但不是检查animateImage的百分比，而是定义变量animatenStates并在每个动画后将其设置为0，1，2 - 步骤并检查此状态。计算百分比可能会导致舍入误差，并且会停止一个位置。

以下是animationState的实现，我使用完整回调来增加状态：

var args = $.args;
var animationState = 0;

$.animateImage.addEventListener('click', function(e) {
    var viewAnimate = Ti.UI.createAnimation({
        top: "0%",
        left: "0%",
        duration: 2000
    });

    if (animationState == 0) {
        viewAnimate.top = "0%";
        viewAnimate.left = "0%";
    } else if (animationState == 1) {
        viewAnimate.top = "70%";
        viewAnimate.left = "80%";
    } else if (animationState == 2) {
        viewAnimate.top = "70%";
        viewAnimate.left = "2%";
    }
    $.animateImage.animate(viewAnimate, function() {
        // complete - state + 1
        animationState++;
        if (animationState > 2) {
            animationState = 0;
        }
    });
});

$.index.open();

Answer 2

您无法使用top / left / bottom / right属性来确定CURRENT位置。动画时，这些值不会改变。您必须使用RECT属性来获取当前位置。

文件说明：（http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.View-method-animate）

请注意，如果使用animate移动视图，则视图的实际值   位置已更改，但其布局属性，如顶部，左侧，   中心等不会改变 - 这些反映了原始价值   由用户设置，而不是视图的实际位置。

rect属性可用于确定实际大小和   观点的位置。

Appcelerator动画将图像从一个位置移动到另一个位置

2 个答案: