Tinder like function，appcelerator

Question

我試着重新創建一個類似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(); 

但有一個怪異的行爲。 事實上，當我從上面看到包裝視圖時，everythnig是確定的，但是如果我將手指放在包裝視圖的底部，圖像就變得瘋狂了。

嘗試執行代碼，您會看到奇怪的行爲。

我用鈦合金SDK 5.2.2 和iOS 9.3.1上的iPhone 6

這裏有一個視頻顯示奇怪的事情：http://tinypic.com/player.php?v=x37d5u%3E&s=9#.Vx_zDaOLQb0

（對不起，視頻大小） 謝謝您幫助

Answer 1

您必須將px轉換爲dp。

var measurement = require('alloy/measurement'); 

win.addEventListener('touchstart', function (e) { 
    curX = measurement.pxToDP(parseInt(e.x, 10)); 
    Ti.API.info("touchstart curX: " + curX); 
}); 

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

// Subtracting current position to starting horizontal position 
var coordinates = measurement.pxToDP(parseInt(e.x, 10)) - curX; 
... 

Answer 2

使用此代碼轉換pxToDp，反之亦然：

認沽按照你的lib文件夾中的代碼，並將其納入 與要求（「測量」） ，而不是要求（「合金/測量」）

var dpi = Ti.Platform.displayCaps.dpi, density = Ti.Platform.displayCaps.density; 

exports.dpToPX = function(val) { 
    switch (density) { 
     case "xxxhigh": 
     return 5 * val; 

     case "xxhigh": 
     return 4 * val; 

     case "xhigh": 
     return 3 * val; 

     case "high": 
     return 2 * val; 

     default: 
     return val; 
    } 
}; 

exports.pxToDP = function(val) { 
    switch (density) { 
     case "xxxhigh": 
     return 5/val; 

     case "xxhigh": 
     return 4/val; 
     case "xhigh": 
     return val/3; 

     case "high": 
     return val/2; 

     default: 
     return val; 
    } 
}; 

exports.pointPXToDP = function(pt) { 
    return { 
     x: exports.pxToDP(pt.x), 
     y: exports.pxToDP(pt.y) 
    }; 
}; 

Answer 3

非常感謝大家！它的工作原理使用此代碼::

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

Ti.include('measurement.js'); 


var curX = 0; 
var wrap = []; 
var topWrap = 100; //(Titanium.Platform.displayCaps.platformHeight - 400)/2; 
var leftWrap = 50; //(Titanium.Platform.displayCaps.platformWidth - 320)/2; 


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

    wrap[i] = Ti.UI.createView({ 
    "id": 'oferta', 
    "width": Titanium.Platform.displayCaps.platformWidth - 100, 
    "height": Titanium.Platform.displayCaps.platformHeight - 300, 
    image:(i % 2 == 0 ? 'principale.png' : 'principale1.png'), 
    "backgroundColor": (i % 2 == 0 ? "red" : "blue"), 
    top:topWrap, 
    left:leftWrap, 
}); 



    wrap[i].addEventListener('touchstart', function (e) { 
//  curX = parseInt(e.x, 10); 
      curX = pxToDP(parseInt(e.x, 10)); 
//   curY = pxToDP(parseInt(e.Y, 10)); 
    }); 

    wrap[i].addEventListener('touchmove', function (e) { 

     // Subtracting current position to starting horizontal position 
//  var coordinates = parseInt(e.x, 10) - curX; 
     // Defining coordinates as the final left position 
var coordinatesX = pxToDP(parseInt(e.x, 10)) - curX; 
//var coordinatesY = pxToDP(parseInt(e.y, 10)) - curY; 
     var matrix = Ti.UI.create2DMatrix({rotate: -(coordinatesX/10)}); 


     var animate = Ti.UI.createAnimation({ 
      left: coordinatesX, 
//   top: coordinatesY, 
      transform: matrix, 
      duration: 10 
     }); 

     e.source.animate(animate); 

     e.source.left = coordinatesX; 
//  e.source.top = coordinatesY; 

    }); 

    wrap[i].addEventListener('touchend', function (e) { 

     // 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: leftWrap, 
       transform: Ti.UI.create2DMatrix({rotate: 0}), 
       duration: 300 
      }); 
     } 
    }); 






    win.add(wrap); 
} 

win.open(); 

而且measurement.js文件：

var dpi = Ti.Platform.displayCaps.dpi, density = Ti.Platform.displayCaps.density; 

function dpToPX(val) { 
    switch (density) { 
     case "xxxhigh": 
     return 5 * val; 

     case "xxhigh": 
     return 4 * val; 

     case "xhigh": 
     return 3 * val; 

     case "high": 
     return 2 * val; 

     default: 
     return val; 
    } 
}; 

function pxToDP(val) { 
    switch (density) { 
     case "xxxhigh": 
     return 5/val; 

     case "xxhigh": 
     return 4/val; 
     case "xhigh": 
     return val/3; 

     case "high": 
     return val/2; 

     default: 
     return val; 
    } 
}; 

function pointPXToD(pt) { 
    return { 
     x: pxToDP(pt.x), 
     y: pxToDP(pt.y) 
    }; 
};