2

我正在使用 Titanium 并在 iOS7 上运行模拟器。我正在尝试获得类似翻转动画的卡片。我已经成功了一半。它当前会从 翻转front到back，但是一旦我再次单击它，应用程序就会崩溃，并且我的控制台没有显示任何内容。

文档说：

The new view being transitioned to should NOT be a child of another view or of the animating view.

也许我理解错了，因为我似乎无法完成这项工作。到目前为止，我的代码是：

var win = Ti.UI.currentWindow;
var noThumbColors   = ['#555555','#cccccc'];
var noThumbColors2  = ['#ff0000','#000'];

var views   = [];
var fronts  = [];
var backs   = [];
for (var i = 0; i < 1; i++)
{   
    fronts[i] = Ti.UI.createView({
        id:i,
        name:"front",
        width:150,
        height:150,
        backgroundGradient:{
            type: 'linear',
            startPoint: { x: '0%', y: '0%' },
            endPoint: { x: '0%', y: '100%' },
            colors: [ { color: noThumbColors[0], offset: 0.0}, { color: noThumbColors[1], offset: 1.0 } ],
        },
        currentAngle: 10
    });

    backs[i] = Ti.UI.createView({
        id:i,
        name:"back",
        width:150,
        height:150,
        backgroundGradient:{
            type: 'linear',
            startPoint: { x: '0%', y: '0%' },
            endPoint: { x: '0%', y: '100%' },
            colors: [ { color: noThumbColors2[1], offset: 0.0}, { color: noThumbColors2[0], offset: 1.0 } ],
        },
        currentAngle: 10
    });
    win.add(backs[i]);
    win.add(fronts[i]);
    fronts[i].addEventListener('click', function(e)
    {
        log(e.source.name);
        t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT;
        e.source.animate({view:backs[e.source.id],transition:t});

    });

    backs[i].addEventListener('click', function(e)
    {
        log(e.source.name);
        t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT;
        e.source.animate({view:fronts[e.source.id],transition:t});
    });
}

function log(msg)
{
    Ti.API.info(msg);
}

完成的工作代码（将产生 3 个独立来回翻转的方块）：

var win = Ti.UI.currentWindow;
var noThumbColors   = ['#555555','#cccccc'];
var noThumbColors2  = ['#ff0000','#000'];
var containers  = [];
var fronts      = [];
var backs       = [];

for (var i = 0; i < 3; i++)
{   
    containers[i] = Ti.UI.createView({
        top:50 + (i * 155),
        width:150,
        height:150
    });

    fronts[i] = Ti.UI.createView({
        id:i,
        name:"front",
        width:150,
        height:150,
        backgroundGradient:{
            type: 'linear',
            startPoint: { x: '0%', y: '0%' },
            endPoint: { x: '0%', y: '100%' },
            colors: [ { color: noThumbColors[0], offset: 0.0}, { color: noThumbColors[1], offset: 1.0 } ],
        },
        currentAngle: 10
    });

    backs[i] = Ti.UI.createView({
        id:i,
        name:"back",
        width:150,
        height:150,
        backgroundGradient:{
            type: 'linear',
            startPoint: { x: '0%', y: '0%' },
            endPoint: { x: '0%', y: '100%' },
            colors: [ { color: noThumbColors2[1], offset: 0.0}, { color: noThumbColors2[0], offset: 1.0 } ],
        },
        currentAngle: 10
    });
    containers[i].add(backs[i]);
    containers[i].add(fronts[i]);
    win.add(containers[i]);
}

win.addEventListener('click', function(e)
{
    if (e.source.name === "front")
    {
        containers[e.source.id].animate({view:backs[e.source.id],transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
    }
    else if (e.source.name === "back")
    {
        containers[e.source.id].animate({view:fronts[e.source.id],transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT});
    }
});

function log(msg)
{
    Ti.API.info(msg);
}
4

2 回答 2

2

基于KitchenSink 示例应用程序，您应该在要设置动画的视图的父对象上调用动画。我还进行了小型重构，只创建了一个附加到窗口的 eventListener，而不是为您创建的每个对象创建多个函数。使用JSHint很好，它会告诉您在 for 循环中创建函数并不是最佳实践。

for (var i = 0; i < 1; i++) { 
    /* your code */
    win.add(backs[i]);
    win.add(fronts[i]);
   /* both addEventListener() are removed from here */
}

win.addEventListener('click', function(e) {
    var t;
    if (e.source.name === 'front') {
        t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT;
        win.animate({view:backs[e.source.id],transition:t});
    } else {
        t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT;
        win.animate({view:fronts[e.source.id],transition:t});
    }
});
于 2013-11-11T23:39:43.927 回答
1

这是翻转像卡片一样的窗口的简单方法

您必须按如下方式设置窗口的属性：

 var win = Ti.UI.currentWindow({
   height:'auto',
   width:'auto,'
   modal:true    
   });

 win.open({
    modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
    modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
 });

希望它会有所帮助。

于 2013-11-12T11:31:24.200 回答