鈦ImageView的動畫寬度和高度

我嘗試創建鈦的ImageView的是這樣的：鈦ImageView的動畫寬度和高度

var animationView = Titanium.UI.createImageView 
(
    { 
     images:animationImages, 
     duration:50, 
     repeatCount:0, 
     width: '90dp', 
     height: '270dp' 
    } 
);

在Android上它得到它的規模符合市場預期，但在iOS上，它根本不會被縮放。有什麼，我做錯了嗎？或者我應該通過手動創建ImageView並逐幀更改setInterval？

來源

2013-02-05 Balázs Édes

我終於決定創建自己的動畫類，它是這樣的：

function Animation(data) 
{ 
    var width = data.hasOwnProperty("width") ? data.width : Ti.UI.SIZE; 
    var height = data.hasOwnProperty("height") ? data.height: Ti.UI.SIZE; 
    var duration = data.hasOwnProperty("duration") ? data.duration : 50; 
    var imageFiles = data.hasOwnProperty("images") ? data.images : []; 

    var images = []; 

    var container = Ti.UI.createView 
    (
     { 
      width:width, 
      height: height 
     } 
    ); 

    for(var i=0; i<imageFiles.length; i++) 
    { 
     var image = Ti.UI.createImageView 
     (
      { 
       image:imageFiles[i], 
       width:width, 
       height:height 
      } 
     ); 

     if(i!=0) 
      image.setVisible(false); 

     container.add(image); 
     images.push(image); 
    } 

    container.activeImage = 0; 
    container.intervalId = null; 

    container.setActiveImage = function(index) 
    { 
     if(container.intervalId == null) 
      container.activeImage = index; 
    } 

    container.start = function() 
    { 
     var callback = function() 
     { 
      for(var i=0; i<images.length; i++) 
      { 
       if(i == container.activeImage) 
        images[i].setVisible(true); 
       else 
        images[i].setVisible(false); 
      } 

      container.activeImage = (container.activeImage + 1) % images.length; 
     } 

     container.intervalId = setInterval (callback, duration); 
    } 

    container.stop = function() 
    { 
     clearInterval(container.intervalId); 
     container.intervalId = null; 
    } 

    return container; 
} 

module.exports = Animation;

而且你可以使用它像這樣：

var Animation = require('...path to your animation file'); 
var myAnimation = new Animation 
(
    { 
     width:'100dp', 
     height:'100dp', 
     duration:50, //duration while one frame is showing 
     images:['one.png', 'two.png'...], //full paths 
    } 
); 

//start: 
myAnimation.start(); 

//stop 
myAnimation.stop();

來源

2013-02-18 18:20:09

這太棒了。非常感謝你。我還沒有嘗試過，但是你有沒有任何性能問題？我正在考慮使用視圖而不是圖像視圖，另一個想法是隻使用一個圖像並更改backgroundImage屬性。還有一件事。看起來你的代碼重複動畫直到它被取消。我也在考慮爲循環添加一個參數。無論如何，我會在接下來的幾天嘗試所有這些，併發布結果。非常感謝你。 –

@Leonardo我認爲，這不是性能最友好的事情，但它完成了工作:)當我有時間時，我會再次研究它，並添加循環。我很高興你喜歡它！ –

這實際上不是一個一致的解決方案，它應該是一個評論，但由於我沒有足夠的代表，我必須將其作爲答案編寫。

對於初學者，我會嘗試給它一個頂部和左側的屬性。其次，這些圖像是從遠程URL檢索的嗎？遠程URL僅在Android中受支持。如果是這種情況，你可以按照你在問題中所說的做一個解決方法。

最後，'dp'只適用於android，所以它在iOS中不會縮放，它只會刪除'dp'並將該數字用作「點」，在非視網膜屏幕上它會是相同數量的像素，並且在視網膜顯示器上它將是雙倍。

來源

2013-02-08 20:00:00 Joscandreu

感謝您的回答，我終於決定創建逐幀顯示動畫，一次只能設置一個可見的圖像。 –

鈦ImageView的動畫寬度和高度

回答

相關問題