Обновление 2020, Vue имитирует эффект перетаскивания карт.

внешний интерфейс Vue.js
Обновление 2020, Vue имитирует эффект перетаскивания карт.

аналогичныйTinderа также探探Компоненты эффекта карты, сообщество было очень много. В дополнение к этому изданию, и они могут достичь того же эффекта снаружи. также добавлено飞卡Эффект похож на мою богиню Цю Шучжэнь.

Вы можете летать карту в любом направлении перетаскивания, вы должны получить帅не так ли!

Давайте шаг за шагом, чтобы достичь этого эффекта

绝对原创，如有雷同，纯属对方抄袭😁

сложить первым

На самом деле я впервые реализовал этот эффект в 2018 году и реализовал версию на weex. Смотрите оригинальный пост здесь:zhuanlan.zhihu.com/p/37482853

На этот раз мы не требуем, чтобы он был доступен в Weex, поэтому стек довольно прост.

Сначала пусть следуют три карты近大远小Принцип выставления настроек отдельноz-index, ширина и высота.Например, ширина и высота каждого слоя карточек должны быть уменьшены на 20 пикселей по сравнению с предыдущим слоем карточек (также есть способ установить уровень уменьшения удаленных карточек через зум или масштаб). Затем добавьте абсолютное позиционированиеposition:absoluteа такжеz-indexКарты можно складывать.

Перетащите первую карту

Поскольку перетаскивать можно только первую карту, нам нужно прослушивать только событие перетаскивания первой карты. Напримерtouchstart,touchmove,touchcancel,touchend.

При перетаскивании нужно быть внимательным.touchstartПри записи положения нажатого пальца, вtouchmoveКогда вы хотите вычесть эту позицию, она выглядит так, как будто точка перетаскивается.

touchStart:function(e){
	var curTouch=e.touches[0];
	this.startLeft=curTouch.clientX-this.left;
	this.startTop=curTouch.clientY-this.top;
}
touchMove:function(e){
	var curTouch=e.touches[0];
	this.left=curTouch.clientX-this.startLeft;
	this.top=curTouch.clientY-this.startTop;
}

Вылететь

Чтобы добиться эффекта вылета в сверхпроизвольном направлении сопротивления, нужно использовать некоторые математические формулы.

Вычислить угол между текущей координатой перетаскивания карты и начальной координатой

var angle=Math.atan2((当前坐标.y-起点坐标.y), (当前坐标.x-起点坐标.x));

вылетающая точка посадкиxКоординаты оси вычисляются путем вычисления косинуса угла и умножения его на силу.

this.left=Math.cos(angle)*this.throwDistance;

вылетающая точка посадкиyКоординаты оси вычисляются путем вычисления синуса угла и умножения его на силу

this.top=Math.sin(angle)*this.throwDistance;

Здесь давайте сделаем это немного лучше.В конце перетаскивания мы можем судить, достаточно ли текущего расстояния перетаскивания для срабатывания эффекта летающей карты. Если эффект летающей карты не сработает, сработает эффект возврата. Таким образом, также можно предотвратить неправильные действия пользователя.

//计算两点之间的直线距离
getDistance:function(x1, y1, x2, y2) {
    var _x = Math.abs(x1 - x2); 
    var _y = Math.abs(y1 - y2); 
    return Math.sqrt(_x * _x + _y * _y);
}
            
var distance=this.getDistance(0,0,this.left,this.top);
if(distance>this.throwTriggerDistance){
    this.makeCardThrow();
}else{
    this.makeCardBack();
}

Нижняя карта выдвинута вверх

Отжиматься на самом деле очень просто.В начале я определил четыре(不是3张吗？怎么变4张了) размер и положение карты.

Когда вылетает первая карта

  • Вторая карта меняется на исходное положение и размер первой карты
this.width2=this.cardWidth;
this.height2=this.cardHeight;
this.left2=0;
this.top2=0;
  • 3-я карта меняется на исходное положение и размер 2-й карты
this.width3=(this.cardWidth-this.leftPad*2);
this.height3=(this.cardHeight-this.topPad*2);
this.left3=this.leftPad;
this.top3=(this.topPad*3);
  • 4-я карта, которая изначально была прозрачной, теперь имеет положение и размер 3-й карты.
this.width4=(this.cardWidth-this.leftPad*4);
this.height4=(this.cardHeight-this.topPad*4);
this.left4=this.leftPad*2;
this.top4=(this.topPad*6);
this.opacity4=1;

Сначала я убрал эффект тени, все замечают эту деталь.

Сбросить все карты

Эффект выталкивания нижней карты и эффект вылета первой карты осуществляются одновременно.transitionконтролировать. Но время устанавливается нами, поэтому, пока время анимации отжимания и вылета закончилось, мы сбрасываем размер и положение всех 4-х карточек.

this.onThrowStart();
setTimeout(function(){
    that.isThrow=false;
    that.isAnimating=false;
    that.onThrowDone();
    that.resetAllCard();
},400);

Здесь важно отметить, что требуются все четыре карты.瞬间Выполните сброс, поэтому анимация перехода должна быть отключена перед этим шагом.

составной

Чтобы адаптироваться к различным сценариям использования, нам нужно инкапсулировать этот эффект.

//提供几个事件，分别是拖动时，拖动结束，飞卡结束，飞卡失败（回位）
@onDragMove='onCardDragMove'
@onDragStop='onCardDragStop'
@onThrowDone='onCardThrowDone'
@onThrowFail='onCardThrowFail'

//参数就不细说了，都能看明白
:cardWidth="200" 
:cardHeight="200"
cardBgColor="#fff"
:leftPad="10"
:topPad="6"
:borderRadius="8"
:throwTriggerDistance="100"
dragDirection="all"
:hasShadow="false"
:hasBorder="true"

Предоставляет три слота, вы можете легко запихнуть содержимое в карту

//firstCard，secondCard，thirdCard
<slot name="firstCard"></slot>

Теперь, чтобы имитировать несколько эффектов

Предлагаемый ответ

@onDragMove='onCardDragMove'
@onDragStop='onCardDragStop'
@onThrowDone='onCardThrowDone'
:cardWidth="300" 
:cardHeight="120"
:throwTriggerDistance="100"
dragDirection="horizontal"
:hasShadow="true"

Допускается только горизонтальное перетаскивание

Поскольку изменение ширины и высоты приведет к переносу текста, возможно, если карта масштабируется, пользовательский опыт будет лучше.

Эффект исследования

Суть реализации эффекта пробника заключается в отслеживании положения перетаскивания карты.

onCardDragMove(obj){
    if(obj.left<-10){
        this.actionName="不喜欢";
    }else if(obj.left>10){
        this.actionName="喜欢";
    }else{
        this.actionName="";
    }
}

Репозиторий исходного кода

GitHub.com/Город Эчжоу/Правительство России…

На этой неделе я потрачу время на реализацию версии vue3~

Обратите внимание на Дашуая и займитесь полным стеком

Последние статьи (Спасибо за вашу поддержку и поддержку 🌹🌹🌹)

Добро пожаловать в Paizhuan, давайте вместе обсудим более элегантную реализацию

Категории