diff --git a/src/views/SwipeView.vue b/src/views/SwipeView.vue index 6aa343a..4726b39 100644 --- a/src/views/SwipeView.vue +++ b/src/views/SwipeView.vue @@ -323,12 +323,18 @@ const moveTouch = (event) => { const currentX = event.touches[0].clientX; const currentY = event.touches[0].clientY; + + // Сохраняем текущую позицию для использования в endTouch + touchEndX.value = currentX; + touchEndY.value = currentY; + const diffX = currentX - touchStartX.value; const diffY = currentY - touchStartY.value; - // Определяем направление свайпа - if (Math.abs(diffX) > Math.abs(diffY) * 2) { - // Горизонтальное движение + // Применяем точное смещение к карточке, чтобы она следовала за пальцем + // Нет дополнительных коэффициентов, карточка перемещается точно на то же расстояние, что и палец + if (Math.abs(diffX) > Math.abs(diffY)) { + // Определяем направление свайпа для индикаторов if (diffX > 20) { swipeDirection.value = 'right'; } else if (diffX < -20) { @@ -337,11 +343,12 @@ const moveTouch = (event) => { swipeDirection.value = null; } - // Применяем трансформацию к карточке - const rotate = diffX * 0.1; // Коэффициент поворота - const translateX = diffX * 1.2; // Коэффициент смещения + // Применяем небольшой поворот для естественности, но меньший чем был + // 0.05 вместо 0.1, чтобы эффект был легче + const rotate = diffX * 0.05; + cardStyle.value = { - transform: `translateX(${translateX}px) rotate(${rotate}deg)`, + transform: `translateX(${diffX}px) rotate(${rotate}deg)`, transition: 'none' }; @@ -398,8 +405,8 @@ const moveDrag = (event) => { y: event.clientY - dragStartY.value }; - // Определяем направление свайпа - if (Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y) * 2) { + // Определяем направление свайпа для индикаторов + if (Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y)) { if (dragOffset.value.x > 20) { swipeDirection.value = 'right'; } else if (dragOffset.value.x < -20) { @@ -408,8 +415,10 @@ const moveDrag = (event) => { swipeDirection.value = null; } - // Применяем трансформацию - const rotate = dragOffset.value.x * 0.1; + // Применяем небольшой поворот для естественности (уменьшен) + const rotate = dragOffset.value.x * 0.05; + + // Карточка следует точно за курсором, без дополнительных коэффициентов cardStyle.value = { transform: `translateX(${dragOffset.value.x}px) rotate(${rotate}deg)`, transition: 'none' @@ -422,13 +431,13 @@ const moveDrag = (event) => { const endDrag = () => { if (!isDragging.value) return; - // Сбрасываем стили + // Сбрасываем стили карточки и плавно возвращаем её в исходное положение cardStyle.value = { transform: 'none', transition: 'transform 0.3s ease' }; - // Если перетаскивание было достаточно большим, выполняем действие + // Если перетаскивание было достаточно большим, выполняем действие лайка/пропуска if (Math.abs(dragOffset.value.x) > swipeThreshold) { if (dragOffset.value.x > 0) { handleLike(); @@ -436,6 +445,7 @@ const endDrag = () => { handlePass(); } } else { + // Если перетаскивание небольшое, просто сбрасываем направление swipeDirection.value = null; }