如何使用 Flickity 和 GSAP 在“dragMove”事件期间更新鼠标位置？

问题描述

我希望自定义光标在轮播的拖动事件期间随鼠标移动，而不会在拖动结束时尴尬地“跳”回其起始位置。我使用 GSAP 的 quickSetter 作为光标，使用 Flickity 作为轮播。这是显示问题的最小 --> Codepen。

我设法使用了：

flkty.on( 'dragMove',function( event,pointer,moveVector ) {...});

这样在拖动过程中光标会随着鼠标移动，但是，当拖动结束时，新的光标位置不会更新，因此会跳回其起始位置。如果在拖动后存储/更新位置，我需要一种方法。

gsap.set(".ball",{xPercent: -50,yPercent: -50});

const ball = document.querySelector(".ball");
const pos = { x: window.innerWidth / 2,y: window.innerHeight / 2 };
const mouse = { x: pos.x,y: pos.y };
const speed = 0.35;
var active = false;

const xSet = gsap.quickSetter(ball,"x","px");
const ySet = gsap.quickSetter(ball,"y","px");

window.addEventListener("mousemove",e => {    
  mouse.x = e.x;
  mouse.y = e.y;  
});

gsap.ticker.add(() => {
  if(!active){
    const dt = 1.0 - Math.pow(1.0 - speed,gsap.ticker.deltaRatio()); 
    pos.x += (mouse.x - pos.x) * dt;
    pos.y += (mouse.y - pos.y) * dt;
    xSet(pos.x);
    ySet(pos.y);
  }
});

//--Flickity--//

var $carousel = $('.carousel').flickity();

$carousel.on( 'dragMove.flickity',function(mousemove,moveVector) {
    
  mouseX = mousemove.clientX;
  mouseY = mousemove.clientY;
  console.log(mouseX)
  
  gsap.to({},0.0,{
    onUpdate: function() {
      gsap.set(ball,{
        x: mouseX,y: mouseY
      })
    }
  })
  
  active = true;
  
});

$carousel.on( 'dragEnd.flickity',function() {
  active = false;   
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）