jasonkneen
1/14/2016 - 3:27 PM

Appcelerator swipe card like tinder

Appcelerator swipe card like tinder

var win = Titanium.UI.createWindow({
    backgroundColor: "#ffffff",
    title: "win"
});

// animations
var animateLeft = Ti.UI.createAnimation({
    left: -520,
    transform: Ti.UI.create2DMatrix({rotate: 60}),
    opacity: 0,
    duration: 300
});
var animateRight = Ti.UI.createAnimation({
    left: 520,
    transform: Ti.UI.create2DMatrix({rotate: -60}),
    opacity: 0,
    duration: 300
});

var curX = 0;

win.addEventListener('touchstart', function (e) {
    curX = parseInt(e.x, 10);
});

win.addEventListener('touchmove', function (e) {
    if (!e.source.id || e.source.id !== 'oferta') {
        return;
    }

    // Subtracting current position to starting horizontal position
    var coordinates = parseInt(e.x, 10) - curX;
    // Defining coordinates as the final left position

    var matrix = Ti.UI.create2DMatrix({rotate: -(coordinates / 10)});

    var animate = Ti.UI.createAnimation({
        left: coordinates,
        transform: matrix,
        duration: 20
    });

    e.source.animate(animate);

    e.source.left = coordinates;
});

win.addEventListener('touchend', function (e) {
    if (!e.source.id || e.source.id !== 'oferta') {
        return;
    }

    // No longer moving the window
    if (e.source.left >= 75) {
        e.source.animate(animateRight);
    } else if (e.source.left <= -75) {
        e.source.animate(animateLeft);
    } else {
        // Repositioning the window to the left
        e.source.animate({
            left: 0,
            transform: Ti.UI.create2DMatrix({rotate: 0}),
            duration: 300
        });
    }
});

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

    var wrap = Ti.UI.createView({
        "id": 'oferta',
        "width": 320,
        "height": 400,
        "backgroundColor": (i % 2 == 0 ? "red" : "blue")
    });

    var text = Ti.UI.createLabel({
        text: "row: " + i,
        color: "black"
    });

    wrap.add(text);

    win.add(wrap);
}

win.open();