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

我试图在图像的单击事件时从屏幕左下角向右上角移动图像。现在，当图像位于此位置（右上角）时，它应该移动到图像点击事件的屏幕右下角。但图像不会从第二个位置移动（右上角）。任何建议为什么？Appcelerator动画将图像从一个位置移动到另一个位置

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

来源

2017-07-10 SylieC

我测试你的代码与此TSS

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

，它工作正常（安卓，钛。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();

来源

2017-07-10 15:43:19 miga

感谢MIGA！这工作很好！ :) – SylieC

您不能使用top/left/bottom/right属性来确定CURRENT位置。动画时这些值不会更改。您必须使用RECT属性来获取当前位置。（http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.View-method-animate）

请注意，如果您使用动画来移动视图，该视图的实际位置发生变化，但其布局属性，如顶部，左侧，中心：从文档

注意事项等等没有改变 - 这些反映了用户设置的原始值，而不是视图的实际位置。

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

来源

2017-07-10 15:42:39 Ray

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

回答

相关问题