Zunder wie Funktion, appcelerator

Question

Ich versuchte, eine Zunder ähnliche Funktion zu erstellen.

fand ich diesen Code:

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

Aber es ist eine seltsame Verhalten. In der Tat, wenn ich die Wrap-Ansicht von oben nahm, ist alles OK, aber wenn ich meinen Finger auf den Boden auf der Wrap-Ansicht, wird das Bild verrückt ..

Versuchen Sie den Code und Sie werden seltsames Verhalten sehen.

ich Titanium SDK 5.2.2 und iOS 9.3.1 auf einem iPhone 6.

Hier sa Video die seltsame Sache zeigt: http://tinypic.com/player.php?v=x37d5u%3E&s=9#.Vx_zDaOLQb0

(Sorry für die Videogröße) Vielen Dank für Ihre Hilfe

Answer 1

Sie müssen px in dp konvertieren.

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

Mit diesem Code zu konvertieren pxToDp und umgekehrt:

Setzen Sie in Ihrem Ordner lib folgenden Code und füge ihm mit erfordern ("Messung") statt erfordern ("Legierung/Messung")

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

Vielen Dank an alle !!! Es funktioniert mit diesem Code ::

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

Und die measurement.js Datei:

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