鈦Appcelerator的創建圖像滑塊

Question

我需要創建一個圖像滑塊這樣的，其中，在特定圖像的圖像需要做大的前景，但我不知道如何做到這一點。我知道如何創建一個帶有ScrollView的滑塊，但是如何創建將圖像放在前面並增加圖像的效果？

我正在經典模式下開發Appcelerator Titanium中的應用程序。

編輯：

這就是我創造我的圖片：

for (var i = 0; i < 10; i++) { 
     (function() { 

      var viewImage = Ti.UI.createView({ 
       height : "70%", 
       width : deviceWidth * 0.2857, 
       zIndex : 0, 
       isOpen : false, 
       borderColor : "transparent", 
       layout : "vertical" 
      }); 

      scrollView.add(viewImage); 
      require("resizeImage").resizeImage("/images/carro.jpeg", 0.35, 0.385, viewImage, deviceHeight, deviceWidth); 

      if (i == 0) { 
       viewImage.borderColor = "#0000aa"; 
       viewImage.zIndex = 100; 
       scrollView.children[1].animate(a); 
       scrollView.children[1].isOpen = true; 
       lastPosition = 1; 
      } 
     })(); 
    } 

我把我的第一個圖像100的zIndex的，其他爲0，但圖像保持這種是在形象背後這是正確的。

Answer 1

看一看Ti.UI.Animation。有一些關於如何縮放圖像的例子。有了這個，你可以創建這個效果。

var matrix = Ti.UI.create2DMatrix() 
matrix = matrix.scale(2, 2); 
var a = Ti.UI.createAnimation({ 
    transform : matrix, 
    duration : 2000, 
}); 
img.animate(a); 

您可能需要將zIndex從不時改變

完整的示例：

index.js

var matrix = Ti.UI.create2DMatrix() 
matrix = matrix.scale(2, 2); 
var a = Ti.UI.createAnimation({ 
    transform: matrix, 
    duration: 500, 
}); 

function onClickBox(e) { 
    $.box1.zIndex = 0; 
    $.box2.zIndex = 0; 
    $.box3.zIndex = 0; 
    $.box4.zIndex = 0; 
    $.box5.zIndex = 0; 

    if (e.source != $.box1) $.box1.transform = Ti.UI.create2DMatrix().scale(1, 1); 
    if (e.source != $.box2) $.box2.transform = Ti.UI.create2DMatrix().scale(1, 1); 
    if (e.source != $.box3) $.box3.transform = Ti.UI.create2DMatrix().scale(1, 1); 
    if (e.source != $.box4) $.box4.transform = Ti.UI.create2DMatrix().scale(1, 1); 
    if (e.source != $.box5) $.box5.transform = Ti.UI.create2DMatrix().scale(1, 1); 

    e.source.zIndex = 100; 
    e.source.animate(a); 
} 

$.box1.addEventListener("click", onClickBox); 
$.box2.addEventListener("click", onClickBox); 
$.box3.addEventListener("click", onClickBox); 
$.box4.addEventListener("click", onClickBox); 
$.box5.addEventListener("click", onClickBox); 

$.index.open(); 

INDEX.XML

<Alloy> 
    <Window class="container"> 
     <ScrollView id="scroller"> 
       <View id="box1" class="box"/> 
       <View id="box2" class="box"/> 
       <View id="box3" class="box"/> 
       <View id="box4" class="box"/> 
       <View id="box5" class="box"/> 
     </ScrollView> 
    </Window> 
</Alloy> 

index.tss

".container" : { 
    backgroundColor: "white" 
} 
".box" : { 
    width: 100, 
    height: 100, 
    borderWidth: 4, 
    borderColor: "#0f0", 
    backgroundColor: "#000" 
} 
"#box1" : { 
    left: 0 
} 
"#box2" : { 
    left: 110 
} 
"#box3" : { 
    left: 220 
} 
"#box4" : { 
    left: 330 
} 
"#box5" : { 
    left: 440 
} 
"#scroller" : { 
    top: 0, 
    right: 0, 
    bottom: 0, 
    left: 0, 
    scrollType: "horizontal" 
}