我怎么动画虽然使用jQuery一个PNG序列（通过滚动或触发动画） [英] How do I animate though a PNG sequence using jQuery (either by scrolling or triggered animation)

问题描述

越来越多，我看到那里，虽然一帧一帧或者基于按一下按钮或基于滚动PNG图像加载到一系列的DIV（或一个DIV），然后测序的效果。我试着在code偷看，据我所知，JavaScript的是做繁重，但我还是有点失落，是否有任何教程这种技术？例子吗？

More and more I am seeing an effect where pngs are loaded into a series of DIVs (or one div) and then sequenced though frame by frame either based on button click or based on scroll. I've tried to peek at the code, and I understand that javascript is doing the heavy lifting, but I'm still a bit lost, are there any tutorials on this technique? examples?

例如动画（多DIV）
http://atanaiplus.cz/index_en.html ：

example of animation (multiple div) http://atanaiplus.cz/index_en.html:

例如动画（一个DIV）的：
http://www.hyundai-veloster.eu/

example of animation (one div): http://www.hyundai-veloster.eu/

例如滚动的动画：
http://discover.store.sony.com/tablet/#design/ergonomics

推荐答案

你只是想使用的setInterval定时器换出src属性

you just want to swap out the src attribute using a setInterval timer

var myAnim = setInterval(function(){
  $(".myImageHolder").attr('src', nextImage);
}, 42);

关键是你如何生成 NEXTIMAGE 。这在很大程度上取决于你的图像的命名约定，或者您希望动画在运行的方向

The trick is how you generate nextImage. This largely depends on the naming conventions of your images, or which direction you wish the animation to run in

更新

或者使用插件

这篇关于我怎么动画虽然使用jQuery一个PNG序列（通过滚动或触发动画）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！