Javascript 类火柴函数

我试图重新创建一个类似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();

var win=tianium.UI.createWindow({
背景颜色：“ffffff”，
标题：“胜利”
});
//动画
var animateLeft=Ti.UI.createAnimation({
左：-520，
transform:Ti.UI.create2DMatrix（{rotate:60}），
不透明度：0，
持续时间：300
});
var animateRight=Ti.UI.createAnimation({
左：520，
转换：Ti.UI.create2DMatrix（{rotate:-60}），
不透明度：0，
持续时间：300
});
var-curX=0；
win.addEventListener（'touchstart'，函数（e）{
curX=parseInt（e.x，10）；
});
win.addEventListener（'touchmove'，函数（e）{
如果（！e.source.id | | e.source.id！='oferta'）{
返回；
}
//将当前位置减去起始水平位置
var坐标=parseInt（e.x，10）-curX；
//将坐标定义为最终左侧位置
var-matrix=Ti.UI.create2DMatrix（{rotate:-（坐标/10）}）；
var animate=Ti.UI.createAnimation({
左：坐标，
变换：矩阵，
持续时间：20
});
e、 source.animate（动画）；
e、 source.left=坐标；
});
win.addEventListener（'touchend'，函数（e）{
如果（！e.source.id | | e.source.id！='oferta'）{
返回；
}
//不再移动窗口
如果（e.source.left>=75）{
e、 source.animate（animateRight）；
}否则，如果（e.source.left您必须将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;
...

使用此代码转换pxToDp，反之亦然：

将以下代码放在lib文件夹中并包含它
需要（“测量”）
而不是要求（“合金/测量”）

非常感谢大家！！！它使用以下代码工作：：

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

“类似点火器的功能”-这是什么意思？你在试图点火？什么是“疯狂”意思？如果你能分享你的屏幕/设备的视频记录会有所帮助这里是视频：这里是一个显示奇怪事情的视频：（对不起视频大小）您应该使用自定义本机模块，而不是检查触摸事件，因为这种方式的性能非常差。请注意，高分辨率屏幕的测量bultin存在问题。下面是一个显示奇怪情况的视频：（对不起，视频大小）我尝试了您的示例，但系统返回错误：“找不到模块：合金/体系结构测量：arm64"也许合金/测量不可用，因为你没有使用合金项目，不必在意。嗨@michael bahl在Y坐标上移动怎么样？就像在Tinder中，你可以从左到右，也可以从上到下移动图片..我怎么做？？？有解决方案吗？谢谢Hanks@michael在Y坐标上移动怎么样？比如在Tinder中，你可以将图片从左到右移动，也可以从上到下移动..我该怎么做？？？thnaksiOS，没有尝试Android@CarlosHenriqueLustosaios，你试过安卓吗？
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();

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