Skip to content

Instantly share code, notes, and snippets.

@yozef
Created September 14, 2016 15:29
Show Gist options
  • Save yozef/790dc2d09e1353c14b85e5a6901ac9c4 to your computer and use it in GitHub Desktop.
Save yozef/790dc2d09e1353c14b85e5a6901ac9c4 to your computer and use it in GitHub Desktop.
Apple Maps iOS 10 : Place Card Swipe
// Vars
var olt = Titanium.UI.create2DMatrix(), curX, curY;
var initialTop = Alloy.Globals.halfScreenY;
var currentViewTop = initialTop; // 100% = curY
var swipeDisplacementPercentage = 1; // 0 is at the floor, 2 is all the way to the top
var deltaX, deltaY;
$.contentArea.addEventListener('touchstart', function(e) {
curX = e.x;
curY = e.y;
Ti.API.info('** Start *** curY ' + curY);
$.contentArea.viewShadowOffset = {y:-1};
$.contentArea.viewShadowRadius = 5;
});
$.contentArea.addEventListener('touchend', function(e) {
$.contentArea.viewShadowOffset = {y:2};
$.contentArea.viewShadowRadius = 5;
Ti.API.info('touchend STT - displacementPercentage ' + swipeDisplacementPercentage + ' InitialTop ' + initialTop + ' currentViewTop ' + currentViewTop);
if (deltaY > 0) {
Ti.API.info('Pushed Downwards');
// Set Constraints max top & min bottom
if (swipeDisplacementPercentage < 1.9 && swipeDisplacementPercentage > 0.8) { // Hovered in Middle
//Ti.API.info('center it');
//swipeDisplacementPercentage = 1;
$.contentArea.animate({
transform: Titanium.UI.create2DMatrix().translate(0, 0),
curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
opacity : 1,
backgroundColor: '#0B5370',
duration : 100,
});
$.contentArea.borderRadius = 5;
currentViewTop = Alloy.Globals.halfScreenY;
}
else if (swipeDisplacementPercentage >= 1.9) { // reached Over 2/3 of screen
Ti.API.info('top lock it');
$.contentArea.animate({
transform: Titanium.UI.create2DMatrix().translate(0, -initialTop),
opacity : 1,
backgroundColor: '#FDBB42',
duration : 100,
});
$.contentArea.borderRadius = 0;
currentViewTop = Alloy.Globals.halfScreenY * 2;
} else if (swipeDisplacementPercentage <= 0.8) { // reached lower 1/3 of screen
Ti.API.info('Bottom lock it');
$.contentArea.animate({
transform: Titanium.UI.create2DMatrix().translate(0, initialTop - 50),
backgroundColor: '#0B5370',
opacity: 0.25,
duration : 100,
});
$.contentArea.borderRadius = 0;
currentViewTop = -Alloy.Globals.halfScreenY * 2 + 50;
}
} else {
Ti.API.info('Pushed Upwards');
// Set Constraints max top & min bottom
if (swipeDisplacementPercentage < 1.2 && swipeDisplacementPercentage > 0.2) { // Hovered in Middle
Ti.API.info('center it');
$.contentArea.animate({
transform: Titanium.UI.create2DMatrix().translate(0, 0),
curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
opacity : 1,
backgroundColor: '#0B5370',
duration : 100,
});
$.contentArea.borderRadius = 5;
currentViewTop = Alloy.Globals.halfScreenY;
} else if (swipeDisplacementPercentage >= 1.2) { // reached Less 2/3 of screen
Ti.API.info('Top it');
$.contentArea.animate({
transform: Titanium.UI.create2DMatrix().translate(0, -initialTop),
opacity : 1,
backgroundColor: '#FDBB42',
duration : 100,
});
$.contentArea.borderRadius = 0;
currentViewTop = Alloy.Globals.halfScreenY * 2;
} else if (swipeDisplacementPercentage <= 0.8) { // reached lower 1/3 of screen
Ti.API.info('Bottom lock it');
$.contentArea.animate({
transform: Titanium.UI.create2DMatrix().translate(0, initialTop - 50),
backgroundColor: '#0B5370',
opacity: 0.25,
duration : 100,
});
$.contentArea.borderRadius = 0;
initialTop = -Alloy.Globals.halfScreenY * 2 + 50;
}
}
counter = 0;
//curY = curY - deltaY;
deltaYAdder = 0;
//initialTop = currentViewTop;
Ti.API.info('------touchend END - InitialTop now is ' + initialTop + ' currentViewTop ' + currentViewTop);
//initialTop = currentViewTop;
//Ti.API.info(' -- END - displacementPercentage ' + swipeDisplacementPercentage +
// ' InitialTop ' + initialTop +
// ' currentViewTop ' + currentViewTop);
});
$.contentArea.addEventListener('touchcancel', function(e) {
if (swipeDisplacementPercentage < 1.2 && swipeDisplacementPercentage > 0.8) {
// center it
swipeDisplacementPercentage = 1;
$.contentArea.animate({
top: initialTop,
duration : 100
});
}
});
var counter = 0;
var deltaYAdder = 0;
$.contentArea.addEventListener('touchmove', function(e) {
counter++;
previousDeltaY = deltaY;
deltaX = e.x - curX;
deltaY = e.y - curY; // Different in pixel the figer has panned from last move
//Ti.API.info(counter + '---- e.y ' + e.y + '- curY ' + curY + ' = deltaY ' + deltaY + ' previousDeltaY ' + previousDeltaY);
deltaYAdder += deltaY;
olt = olt.translate(0, deltaY);
Ti.API.info(counter + '---- currentViewTop ' + currentViewTop);
currentViewTop -= deltaY;
swipeDisplacementPercentage = currentViewTop/initialTop;
Ti.API.info(' - currentViewTop ' + currentViewTop + ' deltaY ' + deltaY);
//Ti.API.info(' -- currentViewTop ' + currentViewTop + ' (deltaY ' + deltaY + ': (e.y '+e.y+' - curY ' + curY + ')\tswipeDisplacementPercentage ' + swipeDisplacementPercentage + ' which is currentViewTop: ' + currentViewTop + '/ initialTop ' + initialTop);
$.contentArea.animate({
opacity: Math.max(swipeDisplacementPercentage, 0.15),
transform : olt,
duration : 60
});
if (swipeDisplacementPercentage > 1) { // Went over it's initial Position
$.contentArea.animate({ backgroundColor:'#FDBB42', duration: 250, curve: Ti.UI.ANIMATION_CURVE_EASE_OUT });
} else {
$.contentArea.animate({ backgroundColor:'#0B5370', duration: 250, curve: Ti.UI.ANIMATION_CURVE_EASE_OUT });
}
// Correct over/under displacement when touchend triggers
if (swipeDisplacementPercentage > 2) swipeDisplacementPercentage = 2;
else if (swipeDisplacementPercentage < 0) swipeDisplacementPercentage = 0;
});
$.index.open();
".container": {
backgroundColor:"#28B4ED"
}
"#contentArea": {
width: Ti.UI.FILL,
height: Ti.Platform.displayCaps.platformHeight,
top: Alloy.Globals.halfScreenY,
backgroundColor: '#0B5370',
viewShadowColor: '#2E2E2E',
viewShadowOffset: {y:2},
viewShadowRadius: 5,
borderRadius: 5,
}
<Alloy>
<Window class="container">
<View id="contentArea"></View>
</Window>
</Alloy>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment