在 window.resize 事件期间，带有 sprite-animation 的 Div 没有正确更改

Posted 2023-05-08

【中文标题】在 window.resize 事件期间，带有 sprite-animation 的 Div 没有正确更改

【英文标题】：Div with sprite-animation doesn't change properly during window.resize event

【发布时间】：2022-01-15 18:50:01

【问题描述】：

我正在尝试使用精灵表模拟 3d 模型旋转。我在 Codepen 上找到了一个完美的例子，但它没有响应。

我尝试在vw 中编写div、容器和spritesize（在脚本中），然后在window.resize 事件中对其进行检查。它确实有效，但不幸的是在窗口调整大小期间不起作用。

我把我的 sn-p 和三张照片放在帖子里——

我打开了网站，一切都很完美 - image 我开始更改浏览器窗口的大小，您可以看到有问题 - image 现在我尝试用调整大小的窗口“旋转”“模型”，一切都很好 - image

var spriteslider = document.createElement('div');
var clientWidth = document.getElementById('spritetarget').clientWidth;

document.body.appendChild(spriteslider);

spriteslider.slider = document.getElementById('spriteslider');
spriteslider.sprite = document.getElementById('spritetarget');
spriteslider.spritesize = clientWidth;
spriteslider.spritecount = 20;
spriteslider.pixelsperincrement = 5;
spriteslider.multiplier = spriteslider.lastmultiplier = 0;

Draggable.create(spriteslider, 
  type: 'x',
  trigger: spriteslider.slider,
  bounds: 
    minX: 0,
    maxX: 0,
    minY: 0,
    maxY: 0
  ,
  edgeResistance: 0,
  cursor: 'e-resize',
  onDrag: function() 
    if (this.isDragging) 
      var t = this.target;
      t.multiplier = Math.floor(this.x / t.pixelsperincrement) + t.lastmultiplier;
      // TweenLite.set(t.sprite,  backgroundPosition: (-t.multiplier * t.spritesize) + "px 0");
      TweenLite.set(t.sprite, 
        backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"
      );

    
  ,
  onDragEnd: function() 
    var t = this.target;
    t.lastmultiplier = t.multiplier % t.spritecount;
  
);

window.addEventListener('resize', function(event) 
  var clientWidth = document.getElementById('spritetarget').clientWidth;
  spriteslider.spritesize = clientWidth;
  TweenLite.set(t.sprite, 
    backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"
  );
, true);

body 
  text-align: center;
  font: normal 12px sans-serif;
  background: #000000;
  color: #91E600;


.spriteslider 
  margin: 20px auto;
  padding: 60px;
  width: 20vw;
  height: 20vw;
  background: #FCFEFC;
  border-radius: 5px;


#spritetarget 
  width: 20vw;
  height: 20vw;
  background-size: cover;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/29123/heart.png);
  /* horizontal spritesheet - image from http://preloaders.net */
  background-repeat: repeat-x;

<div class='spriteslider' id='spriteslider'>
  <div id='spritetarget'></div>
</div>

<p>Drag the box left/right to control the sprite's position.</p>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script>

【参考方案1】：

问题是因为您在 window.resize 事件处理程序中引用了 t，但该变量已在不同的范围内定义，并且无法从该位置访问。

要解决此问题，您可以将该函数中的t 替换为spriteslider 变量，因为这是t 预期包含的内容。试试这个：

var spriteslider = document.createElement('div');
var clientWidth = document.getElementById('spritetarget').clientWidth;

document.body.appendChild(spriteslider);

spriteslider.slider = document.getElementById('spriteslider');
spriteslider.sprite = document.getElementById('spritetarget');
spriteslider.spritesize = clientWidth;
spriteslider.spritecount = 20;
spriteslider.pixelsperincrement = 5;
spriteslider.multiplier = spriteslider.lastmultiplier = 0;

Draggable.create(spriteslider, 
  type: 'x',
  trigger: spriteslider.slider,
  bounds: 
    minX: 0,
    maxX: 0,
    minY: 0,
    maxY: 0
  ,
  edgeResistance: 0,
  cursor: 'e-resize',
  onDrag: function() 
    if (this.isDragging) 
      var t = this.target;
      t.multiplier = Math.floor(this.x / t.pixelsperincrement) + t.lastmultiplier;
      TweenLite.set(t.sprite, 
        backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"
      );

    
  ,
  onDragEnd: function() 
    var t = this.target;
    t.lastmultiplier = t.multiplier % t.spritecount;
  
);

window.addEventListener('resize', function(event) 
  var clientWidth = document.getElementById('spritetarget').clientWidth;
  spriteslider.spritesize = clientWidth;
  TweenLite.set(spriteslider.sprite, 
    backgroundPosition: (-spriteslider.multiplier * spriteslider.spritesize) + "px 0"
  );
, true);

body 
  text-align: center;
  font: normal 12px sans-serif;
  background: #000000;
  color: #91E600;


.spriteslider 
  margin: 20px auto;
  padding: 60px;
  width: 20vw;
  height: 20vw;
  background: #FCFEFC;
  border-radius: 5px;


#spritetarget 
  width: 20vw;
  height: 20vw;
  background-size: cover;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/29123/heart.png);
  /* horizontal spritesheet - image from http://preloaders.net */
  background-repeat: repeat-x;

<div class='spriteslider' id='spriteslider'>
  <div id='spritetarget'></div>
</div>

<p>Drag the box left/right to control the sprite's position.</p>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script>

【讨论】：

完美运行！太感谢了！真的很感谢！

没问题，很高兴为您提供帮助