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動畫將圖像從一個位置移動到另一個位置

回答

相關問題