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

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

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

文档注释：(http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.View-method-animate)

Note that if you use animate to move a view, the view's actual position is changed, but its layout properties, such as top, left, center and so on are not changed--these reflect the original values set by the user, not the actual position of the view.

The rect property can be used to determine the actual size and position of the view.

Answer 2

我已经用这个 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();

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

Appcelerator animation to move an image from one location to another

image

animation

appcelerator