类似 Tinder 的功能，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();

但是有一个奇怪的行为。 确实，当我从顶部获取 wrap 视图时，一切都很好，但是如果我将手指放在 wrap 视图的底部，图像就会变得疯狂..

试试代码，你会看到奇怪的行为。

我使用 Titanium SDK 5.2.2 和 iPhone 6 上的 iOS 9.3.1。

这里有一段视频展示了奇怪的事情：http://tinypic.com/player.php?v=x37d5u%3E&s=9#.Vx_zDaOLQb0

（抱歉视频大小） 感谢您的帮助

Answer 1

使用此代码转换 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 2

非常感谢大家！！！它使用此代码工作::

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

Answer 3

您必须将 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;
...