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

【问题标题】：Appcelerator animation to move an image from one location to anotherAppcelerator 动画将图像从一个位置移动到另一个位置
【发布时间】：2017-07-10 09:33:20
【问题描述】：

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

这是 .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);
});

【问题讨论】：

标签： image animation appcelerator

【解决方案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();

【讨论】：

【解决方案2】：

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

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

请注意，如果您使用动画来移动视图，则视图的实际位置改变了，但是它的布局属性，比如top，left， center 等没有改变——这些反映了原始值由用户设置，而不是视图的实际位置。

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

【讨论】：