javascript - barlasapaydin.com 上的鱼动画

Question

您好，我正在尝试创建位于 barlasapaydin.com 网站上的鱼动画，但没有成功创建该动画帮助我创建该动画，请为此提供代码，我尝试通过 html5 和 css3 但没有成功

<div id="wrapper">
  <div id="header">
  <div class="loop">

  </div>

  </div>

  <a href="#" class="logo">
  <img src="logotype.png"/>
  <span class="img-anim"></span>
  <span class="img-anim1"></span>
  <span class="img-anim2"></span>
  <span class="img-anim3"></span>
  <span class="img-anim4"></span>

  </a>

</div>


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      $("#header .loop").animate({background-position: '-2877px 0px';});



});
</script>

#header .loop{ border: 1px solid black; background: url(loop.png); width: 411px; height: 613px; position: absolute; left: 400px;
 background-position: 0px 0px;
 -moz-animation: loop ease-out 3000ms infinite; }
 @-moz-keyframes loop{ 0%{background: url(loop.png);
 background-position: 0px 0px;} 1%{background: url(loop.png);
 background-position: -411px 0;}

谢谢

Answer 1

我们结合 Adobe Flash、jQuery 和 JSON 构建了该动画。

首先，您需要在不使用 actionscript 的情况下使用 Flash 创建时间轴动画。

右键单击您的动画并选择Generate Sprite Sheet。

然后在打开的屏幕上定义您想要的选项，然后选择 Data format 作为 JSON。

这一步应该为您提供 png Sprite 动画和 JSON 文件，如下所示:

• http://www.barlasapaydin.com/seq/loop.png
• http://www.barlasapaydin.com/seq/loop.json

这里是这个步骤的教程: http://www.adobe.com/devnet/flash/articles/using-sprite-sheet-generator.html

然后将您的图像放入html。从 css 定义大小和 Sprite 位置。

使用jQuery播放循环动画:

var loopTimer = null;
var lArr = [];
var curL;
var fps = 1000 / 30;
$.getJSON('seq/loop.json',function(data) {
  $.each(data.frames,function(key,val){
    lArr.push(this);
  });
});

curL = 0;
function startLoop() {
    loopAni();
}

function loopAni() {
  curL = (++curL) % lArr.length;
  loopTimer = setTimeout(loopAni, fps);
  var f = lArr[curL].frame;
  $('#loop')[0].style.backgroundPosition = '-'+ f.x +'px -'+ f.y +'px';
}

function pauseLoop() {
    clearTimeout(loopTimer);
}

您还可以从此链接检查非压缩 javascript:http://www.barlasapaydin.com/js/sss.js