在鈦制加速器中創建圖像滑塊

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;
            }
        })();
    }

我將第一張圖像的zIndex設置為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>

索引

".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"
}