Skip to content

Instantly share code, notes, and snippets.

@jasonkneen
Forked from afranioce/index.js
Created January 14, 2016 15:27
Show Gist options
  • Save jasonkneen/dda9e7807c15fd520738 to your computer and use it in GitHub Desktop.
Save jasonkneen/dda9e7807c15fd520738 to your computer and use it in GitHub Desktop.
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();
@philippeds
Copy link

Hello
It seems to have image issue. Indeed, it's weird.

When I put my finger on the top of the wrap view, I can move the image smoothly.
But if I put the finger on the bottom of the wrap view, the image is moved but with some problem. Try it.

Ti SDK : 5.2.2
iOS : 9.3.1

Do you have the same problem ?

Thanks

@jasonkneen
Copy link
Author

Haven't tested on 5.2.2 -- this was done a while ago.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment