使用 Appcelerator Titanium 在 iOS 上无法正确显示翻转视图的问题

Question

我在使用 Appcelerator (Titanium v​​ 3.2.1) 构建的抽认卡 iOS 应用程序上遇到问题。

代码sn-p如下，我遇到的问题如下......

用户点击主视图以在 2 个子视图之间进行动画处理，每个子视图都有不同的语言（在本例中为英语/德语）。

用户还可以通过再次调用 loadWords() 函数来滑动视图以加载新单词。

除了一件事之外，一切都运行良好。

当用户点击显示第二语言的视图时，他们可以愉快地点击并在单词之间切换而没有问题。

我们遇到的问题是，如果用户在使用第二种语言（视图：后部）而不是第一种语言（视图：前部）时决定刷一个新单词，它会加载新的英语单词 ok，但是当他们点击查看德语单词时，它会翻转以再次显示英语单词。如果他们再次点击，它将显示德语单词。

所以我需要消除前视图中英文单词的额外显示。

有什么想法吗？！

var win = Titanium.UI.currentWindow;

var selectedlanguage = Ti.App.Properties.getString('langSelect');

// detect height
if (Titanium.Platform.displayCaps.platformHeight == 480) {
    var MVTOP = 115;
    var tapTOP = 83;
    var swipeTOP = 275;
} else {
    var MVTOP = 165;
    var tapTOP = 133;
    var swipeTOP = 325;
}

var masterView = Ti.UI.createView({
    backgroundColor: '#FFF',
    top: MVTOP,
    width: 300,
    height: 140,
    opacity: 0.7
});

var state = true;

win.add(masterView);

var front = Ti.UI.createView({
    backgroundColor: '#FFF',
    top: 0,
    left: 0,
    width: 300,
    height: 140,
    opacity: 1.0,
    touchEnabled: false
});

var back = Titanium.UI.createView({
    backgroundColor: '#FFF',
    top: 0,
    left: 0,
    width: 300,
    height: 140,
    opacity: 1.0,
    touchEnabled: false
});

var label1 = Ti.UI.createLabel({
    //text: verb_german,
    text: '',
    textAlign: 'center',
    color: '#000',
    font: {
        fontSize: 30
    },
    top: 50
});

var label2 = Ti.UI.createLabel({
    //text: verb_english,
    text: '',
    textAlign: 'center',
    color: '#000',
    font: {
        fontSize: 30
    },
    top: 50
});

var word_id_num = Ti.UI.createLabel({
    //text: verb_english,
    text: '',
    textAlign: 'center',
    color: '#000',
    font: {
        fontSize: 30
    },
    top: 50
});


var dropButton = Ti.UI.createButton({
    width: 120,
    height: 41,
    right: 15,
    bottom: 15,
    title: 'drop word',
    backgroundColor: '#fd0100',
    color: '#FFF',
    font: {
        fontSize: 15
    },
    opacity: 1.0
});

// add buttons to window
win.add(dropButton);


// the main function which controls the word display
function loadWords() {

    label1.text = '';
    label2.text = '';

    var state = true;


    // step 1. get a random pair of words (English & German)
    var db = Ti.Database.open('germanV6');
    var rows = db.execute('SELECT word_id, word_english, word_german FROM Words WHERE word_dropped = 0 ORDER BY RANDOM() LIMIT 1;');

    var x = 0;
    while (rows.isValidRow()) {
        // step 2. set each label to the correct langauge (this comes from app.js when user selects their default language)
        if (selectedlanguage == 'en') {
            var word_1 = rows.fieldByName('word_english');
            var word_2 = rows.fieldByName('word_german');
        } else if (selectedlanguage == 'de') {
            var word_2 = rows.fieldByName('word_english');
            var word_1 = rows.fieldByName('word_german');
        }

        // step 3. set the word id, to be used later when wanting to 'drop' a word
        word_id_num.text = rows.fieldByName('word_id');

        rows.next();
    }

    // close database
    rows.close();

    //var state = true;

    label1.text = word_1;

    front.add(label1);
    masterView.add(front);

    label2.text = word_2;

    back.add(label2);

}

// fire the function and load our words into play
loadWords();


// labels for on screen prompts
var tapLabel = Ti.UI.createLabel({
    width: 200,
    top: tapTOP,
    text: 'tap to flip',
    textAlign: 'center',
    color: '#FFF',
    font: {
        fontSize: 15
    }
});

var swipeLabel = Ti.UI.createLabel({
    width: 320,
    top: swipeTOP,
    text: 'swipe for next word',
    textAlign: 'center',
    color: '#FFF',
    font: {
        fontSize: 15
    }
});

// add to the window
win.add(tapLabel);
win.add(swipeLabel);


masterView.addEventListener('click', function (e) {
    switch (state) {
    case true:
        Ti.API.info('true');
        masterView.animate({
            view: back,
            transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT
        });
        break;
    case false:
        Ti.API.info('false');
        masterView.animate({
            view: front,
            transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
        });
        break;
    }
    state = !state;
});

// action for when label is swiped
swipeLabel.addEventListener('swipe', function (e) {
    alert(state);
    // reload the new word
    loadWords();
});

// action for when view is swiped
masterView.addEventListener('swipe', function (e) {
    // reload the new word
    loadWords();

});

如果有人能提供帮助，我将不胜感激！

西蒙

Answer 1

你也可以这样尝试，你可以为视图指定你自己的动画，你也可以使用其他属性：

var animation1 = Ti.UI.createAnimation();
animation1.view: back;
animation1.duration = 1000;
animation1.transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT;

var animation2 = Ti.UI.createAnimation();
animation2.view: front;
animation1.duration = 1000;
animatio2.transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT;

masterView.addEventListener('click', function (e) {
switch (state) {
case true:
    Ti.API.info('true');
    masterView.animate(animation1, function(e){ 
        Ti.API.info('e-->'+e) });
    break;
case false:
    Ti.API.info('false');
    masterView.animate(animation2, function(e){
          Ti.API.info('e-->'+e)});
    break;
}
state = !state;
});

有关动画的更多属性，您可以使用以下链接：

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Animation-property-view