javascript - 在钛appcelerator中创建图像 slider

Question

我需要创建一个像这样的图像 slider ，其中特定图像中的图像需要更大并且位于前景中，但我不知道如何做到这一点。我知道如何使用 ScrollView 创建 slider ，但是如何创建将图像置于前面并增大图像的效果？

我正在 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，将其他图像设置为 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"
}