javascript Lerp函数返回NaN

gab6jxml  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(153)

我做lerp所有的时间,但最近一直有这个问题,其中lerp的功能(在下面的animIt函数中)返回NaN。控制台日志显示lerp()的返回值是一个数字。我尝试了很多方法,包括parseFloattoFixed(0),但都没有用。有人能帮我弄清楚是什么问题吗?我无法继续我的项目。谢谢。

function lerp(start, end, t){
      return (1-t)*start+t*end
  }

  let currentX = 0, currentY = 0;
  
  let cursorContainer = document.querySelector('#irbrkj');
  
  let observer1 = new IntersectionObserver( function(el, observer) {

      el.forEach( (entry) => {

        if(entry.isIntersecting){
          
          document.addEventListener( 'mousemove', (e) => {    
            offX = e.offsetX;
            offY = e.offsetY;    
                })
          
          function animIt(){
           currentX = lerp(currentX, offX, 0.3 );
           currentY = lerp(currentY, offY, 0.3 );  
            
           // These are showing NaN
           console.log(currentX);
           console.log(currentY);
        
   
            cursorContainer.style.setProperty('--cursorTop', currentY + 'px');
            cursorContainer.style.setProperty('--cursorLeft', currentX + 'px');
            
            requestAnimationFrame(animIt);
          }      
          
          animIt();
        }
      })

    }, {
   threshold: 0.2
    });

  observer1.observe(cursorContainer);
eoxn13cs

eoxn13cs1#

好的,明白了!当我定义offXoffY的时候,它们没有值,所以我把它们定义为let offX = 0, offY = 0,现在lerp()有一个0开始工作。希望这对其他人有帮助。

相关问题