Skip to main content
 首页 » 编程设计

javascript之带有 json 数据的香蕉 Sprite js 动画(前进/后退和淡入淡出)

2026年07月28日10飞鱼

我正在开发一个自定义滚动动画框架。我可以通过 json 数据 blob 控制序列。

这里的代码使用了一些订阅者 - 尽管前进/后退动画已经到位 - 淡入/淡出效果不佳 - 淡入淡出出现故障。

使用 json - 我想提供 block 的骨架(类名、高度、宽度、背景)，然后提供与滚动值相关的每个开始/结束帧的操作。

如何修改代码——修复褪色问题。

所以在这个例子中。

-- 当滚动位于 0 时 -- 或应用程序开始时 -- 创建 block 。

-- 如果滚动范围在 100-400 之间 - 则指示滚动向右移动。

-- 如果滚动超过 400 - 销毁该方 block 。

所以动画是向前移动的，但我想以相反的方向反转动画 - 这样时间轴可以向前、向后移动 - 取决于滚动的速度 - 所以是慢速或加速影响会发生

---这是第一代代码 https://jsfiddle.net/d4053upt/1/ 

let data = [{ 
    "structure": { 
      "name": "square", 
      "height": 30, 
      "width": 30, 
      "x": 0, 
      "y": 0, 
      "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")' 
    }, 
    "frames": [{ 
      "animation": "move", 
      "start": 0, 
      "stop": 300, 
      "startPositionX": 0, 
      "startPositionY": 0, 
      "endPositionX": 90, 
      "endPositionY": 0, 
    }, { 
      "animation": "move", 
      "start": 301, 
      "stop": 600, 
      "startPositionX": 90, 
      "startPositionY": 0, 
      "endPositionX": 90, 
      "endPositionY": 80, 
    }, { 
      "animation": "move", 
      "start": 601, 
      "stop": 900, 
      "startPositionX": 90, 
      "startPositionY": 80, 
      "endPositionX": 0, 
      "endPositionY": 0, 
    }, { 
      "animation": "show", 
      "start": 601, 
      "stop": 9999, 
      "positionX": 0, 
      "positionY": 0, 
    }], 
  }, 
  { 
    "structure": { 
      "name": "pear", 
      "height": 30, 
      "width": 30, 
      "x": 90, 
      "y": 80, 
      "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")' 
    }, 
    "frames": [{ 
      "animation": "move", 
      "start": 0, 
      "stop": 300, 
      "startPositionX": 90, 
      "startPositionY": 80, 
      "endPositionX": 0, 
      "endPositionY": 80, 
    }, { 
      "animation": "move", 
      "start": 301, 
      "stop": 600, 
      "startPositionX": 0, 
      "startPositionY": 80, 
      "endPositionX": 0, 
      "endPositionY": 0, 
    }, { 
      "animation": "move", 
      "start": 601, 
      "stop": 900, 
      "startPositionX": 0, 
      "startPositionY": 0, 
      "endPositionX": 90, 
      "endPositionY": 80, 
    }, { 
      "animation": "show", 
      "start": 601, 
      "stop": 9999, 
      "positionX": 90, 
      "positionY": 80, 
    }], 
  } 
] 
 
let animations = { 
  setup: function($container) { 
    this.$container = $container; 
    this.viewportWidth = $container.width(); 
    this.viewportHeight = $container.height(); 
  }, 
  createBlock: function(blockSpec) { 
    let $block = $('<div>'); 
    $block.addClass(blockSpec.name); 
    $block.addClass("animatedblock"); 
    $block.css("height", blockSpec.height); 
    $block.css("width", blockSpec.width); 
    $block.css("background", blockSpec.background); 
    $block.css("background-size", "cover"); 
    this.$container.append($block); 
    this.setPosition($block, blockSpec.x, blockSpec.y) 
    return $block; 
  }, 
  setPosition($block, x, y) { 
    $block.css({ 
      left: x / 100 * this.viewportWidth, 
      top: y / 100 * this.viewportHeight, 
    }); 
  }, 
  moveBlock($block, frame, scrollProgress) { 
    let blockPositionX = frame.startPositionX + scrollProgress * (frame.endPositionX - frame.startPositionX); 
    let blockPositionY = frame.startPositionY + scrollProgress * (frame.endPositionY - frame.startPositionY); 
    this.setPosition($block, blockPositionX, blockPositionY); 
  }, 
  showBlock: function($block, frame) { 
    $block.show() 
    this.setPosition($block, frame.positionX, frame.positionY); 
  }, 
  hideBlock: function($block) { 
    $block.hide() 
  }, 
} 
 
class ScrollObserver { 
  constructor() { 
    let $window = $(window); 
    this.STOP_DISPATCH = 'STOP_DISPATCH'; 
    this.subscribers = []; 
    $window.scroll(event => this.dispatch($window.scrollTop())); 
  } 
  subscribe(subscriberFn) { 
    this.subscribers.push(subscriberFn); 
  } 
  dispatch(scrollPosition) { 
    for (let subscriberFn of this.subscribers) { 
      if (subscriberFn(scrollPosition) == this.STOP_DISPATCH) break; 
    } 
  } 
} 
 
jQuery(function($) { 
  animations.setup($('.container')); 
  $(window).resize(event => animations.setup($('.container'))); 
  for (let obj of data) { 
    let scrollObserver = new ScrollObserver(); 
    let blockSpec = obj.structure; 
    let $block = animations.createBlock(blockSpec); 
    for (let frame of obj.frames) { 
      scrollObserver.subscribe(scrollPosition => { 
        if (scrollPosition >= frame.start && scrollPosition <= frame.stop) { 
          let scrollProgress = (scrollPosition - frame.start) / (frame.stop - frame.start); 
          switch (frame.animation) { 
            case 'move': 
              animations.moveBlock($block, frame, scrollProgress); 
              break; 
            case 'show': 
              animations.showBlock($block, frame); 
          } 
          return scrollObserver.STOP_DISPATCH; 
        } 
      }); 
    } 
  } 
});
body { 
  height: 1500px; 
} 
 
.container { 
  background: grey; 
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 100vh; 
  width: 100vw; 
  box-sizing: content-box; 
} 
 
.animatedblock { 
  position: absolute; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"></div>

--这是第二代代码，当前淡入淡出故障 https://jsfiddle.net/26jkLnup/1/ 

let data = [{ 
"structure": { 
  "name": "square", 
  "height": 30, 
  "width": 30, 
  "x": 0, 
  "y": 0, 
  "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")' 
}, 
"frames": [{ 
  "animation": "fadein", 
  "start": 0, 
  "stop": 300, 
  "startPositionX": 0, 
  "startPositionY": 0, 
  "endPositionX": 90, 
  "endPositionY": 0, 
}, { 
  "animation": "move", 
  "start": 301, 
  "stop": 600, 
  "startPositionX": 90, 
  "startPositionY": 0, 
  "endPositionX": 90, 
  "endPositionY": 80, 
}, { 
  "animation": "fadeout", 
  "start": 601, 
  "stop": 900, 
  "positionX": 0, 
  "positionY": 0, 
}], 
  }/*, 
  { 
"structure": { 
  "name": "pear", 
  "height": 30, 
  "width": 30, 
  "x": 90, 
  "y": 80, 
  "background": 'url("https://image.flaticon.com/icons/svg/272/272135.svg")' 
}, 
"frames": [{ 
  "animation": "move", 
  "start": 0, 
  "stop": 300, 
  "startPositionX": 90, 
  "startPositionY": 80, 
  "endPositionX": 0, 
  "endPositionY": 80, 
}, { 
  "animation": "move", 
  "start": 301, 
  "stop": 600, 
  "startPositionX": 0, 
  "startPositionY": 80, 
  "endPositionX": 0, 
  "endPositionY": 0, 
}, { 
  "animation": "move", 
  "start": 601, 
  "stop": 900, 
  "startPositionX": 0, 
  "startPositionY": 0, 
  "endPositionX": 90, 
  "endPositionY": 80, 
}, { 
  "animation": "show", 
  "start": 601, 
  "stop": 9999, 
  "positionX": 90, 
  "positionY": 80, 
}], 
  }*/ 
] 
 
let animations = { 
  setup: function($container) { 
this.$container = $container; 
this.viewportWidth = $container.width(); 
this.viewportHeight = $container.height(); 
  }, 
  createBlock: function(blockSpec) { 
let $block = $('<div>'); 
$block.addClass(blockSpec.name); 
$block.addClass("animatedblock"); 
$block.css("height", blockSpec.height); 
$block.css("width", blockSpec.width); 
$block.css("background", blockSpec.background); 
$block.css("background-size", "cover"); 
this.$container.append($block); 
this.setPosition($block, blockSpec.x, blockSpec.y) 
return $block; 
  }, 
  setPosition($block, x, y) { 
$block.css({ 
  left: x / 100 * this.viewportWidth, 
  top: y / 100 * this.viewportHeight, 
}); 
  }, 
  moveBlock($block, frame, scrollProgress) { 
let blockPositionX = frame.startPositionX + scrollProgress * (frame.endPositionX - frame.startPositionX); 
let blockPositionY = frame.startPositionY + scrollProgress * (frame.endPositionY - frame.startPositionY); 
this.setPosition($block, blockPositionX, blockPositionY); 
  }, 
  showBlock: function($block, frame) { 
$block.show() 
this.setPosition($block, frame.positionX, frame.positionY); 
  }, 
  hideBlock: function($block) { 
$block.hide() 
  }, 
  fadeinBlock: function($block, frame, scrollProgress) { 
 //console.log("scrollProgress", scrollProgress) 
 
$block.css({ 
  opacity: 1 * scrollProgress 
}) 
  
  
/* 
$block.css({ 
	opacity: frame.startPositionY / 100 * this.viewportHeight 
})*/ 
  }, 
  fadeoutBlock: function($block, frame, scrollProgress) { 
//console.log("scrollProgress22222",scrollProgress) 
/* 
$block.css({ 
	opacity: frame.startPositionY / 100 * this.viewportHeight 
})*/ 
$block.css({ 
  opacity: 1 * (1-scrollProgress) 
}) 
 
  }, 
} 
 
class ScrollObserver { 
  constructor() { 
let $window = $(window); 
this.STOP_DISPATCH = 'STOP_DISPATCH'; 
this.subscribers = []; 
$window.scroll(event => this.dispatch($window.scrollTop())); 
  } 
  subscribe(subscriberFn) { 
this.subscribers.push(subscriberFn); 
  } 
  dispatch(scrollPosition) { 
for (let subscriberFn of this.subscribers) { 
  if (subscriberFn(scrollPosition) == this.STOP_DISPATCH) break; 
} 
  } 
} 
 
jQuery(function($) { 
  animations.setup($('.animationcontainer')); 
  $(window).resize(event => animations.setup($('.animationcontainer'))); 
  for (let obj of data) { 
let scrollObserver = new ScrollObserver(); 
let blockSpec = obj.structure; 
let $block = animations.createBlock(blockSpec); 
for (let frame of obj.frames) { 
  scrollObserver.subscribe(scrollPosition => { 
    if (scrollPosition >= frame.start && scrollPosition <= frame.stop) { 
      let scrollProgress = (scrollPosition - frame.start) / (frame.stop - frame.start); 
      switch (frame.animation) { 
        case 'move': 
          animations.moveBlock($block, frame, scrollProgress); 
          break; 
        case 'show': 
          animations.showBlock($block, frame); 
          break; 
        case 'fadein': 
          animations.fadeinBlock($block, frame, scrollProgress); 
          break; 
        case 'fadeout': 
          animations.fadeoutBlock($block, frame, scrollProgress); 
          break; 
      } 
      return scrollObserver.STOP_DISPATCH; 
    } 
  }); 
} 
  } 
});
body { 
  height: 1500px; 
} 
 
.animationcontainer { 
  background: grey; 
  border: 1px solid pink; 
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 100vh; 
  width: 100vw; 
  box-sizing: content-box; 
} 
 
.animatedblock { 
  position: absolute; 
} 
 
@media only screen and (min-width: 600px) { 
  body { 
background-color: lightblue; 
  } 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<body> 
<div class="animationcontainer"></div> 
<div class="animationcontainer"></div> 
</body>

请您参考如下方法:

恕我直言，存在一些概念问题:您有移动对象的fadein和fadeout动画。并不是说这是不可能的，我根据我对您到底想要实现的目标的最佳理解进行了“修复”动画的更改，但这使得 move 动画操作有点多余。从 API Angular 来看，将所有动画内容编码到单个转换描述符中似乎更有意义，例如第一个是:

"frames": [{ 
  "start": 0, 
  "stop": 300, 
  "startPositionX": 0, 
  "startPositionY": 0, 
  "endPositionX": 90, 
  "endPositionY": 0, 
  "startOpacity": 0, 
  "endOpacity": 1 
}]

我没有改变这一点，但为了在淡入时移动，我必须在 fadein 和 fadeout 之后应用移动。这使得它们有效地fadeinandmove和fadeoutandmove。

我所做的另一个更改是设置的初始不透明度，否则，当您的不透明度已经达到 100% 时就会开始淡入。

这是您的代码片段的一个分支:https://jsfiddle.net/5hxg02d3/

祝你的框架好运!

编辑:正如您正确注意到的那样，快速来回移动会破坏顺序。如果我缓慢拖动而不是来回滚动，淡入淡出对我来说确实会达到零，所以我相信您指的是相同的效果。发生这种情况是由于我之前提出的 API 一致性问题。快速滚动移动允许动画从第 1 帧跳到第 3 帧或 v.v.从 3 到 1，甚至超出动画范围(低于 0 或高于 900)，结果位置与您的预期不一致，因为更新未被调用。我根据我在这个 fiddle 中的最初建议更新了代码片段:https://jsfiddle.net/twkq9jyf/1/并将用它更新下面的代码片段。我的初始片段位于上面的 fiddle 中，供您引用。

let data = [{ 
"structure": { 
  "name": "square", 
  "height": 30, 
  "width": 30, 
  "x":0, 
  "y":0, 
  "opacity": 0, 
  "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")' 
}, 
"frames": [{ 
  "start": 0, 
  "stop": 300, 
  "startPositionX": 0, 
  "startPositionY": 0, 
  "endPositionX": 90, 
  "endPositionY": 0, 
  "startOpacity": 0, 
  "endOpacity": 1 
}, { 
  "start": 301, 
  "stop": 600, 
  "startPositionX": 90, 
  "startPositionY": 0, 
  "endPositionX": 90, 
  "endPositionY": 80, 
  "startOpacity": 1, 
  "endOpacity": 1 
}, { 
  "start": 601, 
  "stop": 900, 
  "startPositionX": 90, 
  "startPositionY": 80, 
  "endPositionX": 90, 
  "endPositionY": 80, 
  "startOpacity": 1, 
  "endOpacity": 0 
}], 
  } 
  ] 
 
let animations = { 
  setup: function($container) { 
this.$container = $container; 
this.viewportWidth = $container.width(); 
this.viewportHeight = $container.height(); 
  }, 
  createBlock: function(blockSpec) { 
let $block = $('<div>'); 
$block.addClass(blockSpec.name); 
$block.addClass("animatedblock"); 
$block.css("height", blockSpec.height); 
$block.css("width", blockSpec.width); 
$block.css("background", blockSpec.background); 
$block.css("background-size", "cover"); 
$block.css("opacity", blockSpec.opacity); 
this.$container.append($block); 
return $block; 
  }, 
  setPosition($block, x, y) { 
$block.css({ 
  left: x / 100 * this.viewportWidth, 
  top: y / 100 * this.viewportHeight, 
}); 
  }, 
  updatePosition: function($block, frame, scrollProgress) { 
let blockPositionX = frame.startPositionX + scrollProgress * (frame.endPositionX - frame.startPositionX); 
let blockPositionY = frame.startPositionY + scrollProgress * (frame.endPositionY - frame.startPositionY); 
this.setPosition($block, blockPositionX, blockPositionY); 
  }, 
  updateOpacity: function($block, frame, scrollProgress) { 
$block.css({ 
  opacity: frame.startOpacity + scrollProgress * (frame.endOpacity - frame.startOpacity) 
}) 
  }, 
} 
 
class ScrollObserver { 
  constructor() { 
let $window = $(window); 
this.STOP_DISPATCH = 'STOP_DISPATCH'; 
this.subscribers = []; 
$window.scroll(event => this.dispatch($window.scrollTop())); 
  } 
  subscribe(subscriberFn) { 
this.subscribers.push(subscriberFn); 
  } 
  dispatch(scrollPosition) { 
for (let subscriberFn of this.subscribers) { 
  if (subscriberFn(scrollPosition) == this.STOP_DISPATCH) break; 
} 
  } 
} 
 
jQuery(function($) { 
  animations.setup($('.animationcontainer')); 
  $(window).resize(event => animations.setup($('.animationcontainer'))); 
  for (let obj of data) { 
let scrollObserver = new ScrollObserver(); 
let blockSpec = obj.structure; 
let $block = animations.createBlock(blockSpec); 
for (let frame of obj.frames) { 
  scrollObserver.subscribe(scrollPosition => { 
    if ( (scrollPosition >= frame.start || frame.start == 0) && 
         (scrollPosition <= frame.stop || frame.stop == 900) ) { 
      let scrollProgress = (scrollPosition - frame.start) / (frame.stop - frame.start); 
      animations.updatePosition($block, frame, scrollProgress); 
      animations.updateOpacity($block, frame, scrollProgress); 
      return scrollObserver.STOP_DISPATCH; 
    } 
  }); 
} 
  } 
});
body { 
  height: 1500px; 
} 
 
.animationcontainer { 
  background: grey; 
  border: 1px solid pink; 
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 100vh; 
  width: 100vw; 
  box-sizing: content-box; 
} 
 
.animatedblock { 
  position: absolute; 
} 
 
@media only screen and (min-width: 600px) { 
  body { 
background-color: lightblue; 
  } 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<body> 
<div class="animationcontainer"></div> 
<div class="animationcontainer"></div> 
</body>

MORE:订阅者在当前滚动位置的滚动操作上被触发，找到与该位置匹配的第一帧，计算scrollProgress(0..1找到帧内的参数)并触发位置和不透明度的更新。除了我修复的问题之外，这种方法不能保证数据的正确性(可能有多个帧覆盖相同的滚动位置，并且随后的帧可能具有与下一个帧的开始不相等的帧结束)。为了解决这个问题，您可以考虑不使用 startPosition 和 stopPosition 存储帧，而是存储具有如下描述的关键帧:

"frames": [{ 
  "key": 0, 
  "x": 0, 
  "y": 90, 
  "opacity": 0 
}, 
{ 
  "key": 300, 
  "x": 90, 
  "y": 0, 
  "opacity": 1 
}, ...]

代替框架

"frames": [{ 
  "start": 0, 
  "stop": 300, 
  "startPositionX": 0, 
  "startPositionY": 0, 
  "endPositionX": 90, 
  "endPositionY": 0, 
  "startOpacity": 0, 
  "endOpacity": 1 
}, ... ]

确保后续帧具有匹配的开始和结束状态(关键帧)。 关键帧的数量将等于您的帧+1的数量。我建议您尝试自己实现这一点，因为这是一个简单的练习，有助于提高您的理解。


  文章来源：
  https://blog.windname.com/post/aejeib2b1.html
阅读延展