0

私はさまざまなことを試しましたが、何もうまくいかないようです。ここにいる誰かが自由な時間を持って助けてくれることを願っています. 各フレームが 640 x 889 で、11 個の画像が垂直に積み重ねられたスプライト ストリップのアニメーション用の JavaScript を作成しようとしています。ウィンドウが開いたときにアニメーションを開始し、フレームを 3 回前後に実行してから停止する. 11 フレームあり、シーケンスは 1....11、次に 11...1 を 3 回実行し、3 つのループを完了するのに合計 3 秒かかります。助けてくれてありがとう。

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.8.2.js"></script>
    <meta name ="viewport" content = "width=640, user-scalable=yes">
    <link rel="stylesheet" href="animate.css"/>
    <title>Website</title>
</head>
<body>
    <div id="bmw-glow">
    <script type="text/javascript">
    var fps          = 11,
    currentFrame = 0,
    totalFrames  = 11,
    elem         = document.getElementById("bmw-glow"),
    currentTime  = new Date().getTime();

(function animloop(time){
  var delta = (time - currentTime) / 1000;

  currentFrame += (delta * fps);

  var frameNum = Math.floor(currentFrame);

  if (frameNum >= totalFrames) {
    currentFrame = frameNum = 0;
  }

  requestAnimationFrame(animloop);

  elem.style.backgroundPosition = "0 -" + (frameNum * 889) + "px";

  currentTime = time;
})(currentTime);
</script>
</div>
</body>
</html>

CSS:

#bmw-glow {
  width: 640px;
  height: 889px;
  margin: 0px;
  background: url("images/Social/Social_6_S.jpg");
}
4

2 に答える 2

0

あなたの問題は、 requestAnimationFrame が定義されていないことです。すべてのブラウザで実装されているわけではありません。

ここでシムを見つけました

    // shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

フィドルを更新しました

今、それは何かをしますが、それはまさにあなたが考えていたものではないと思います!

于 2012-11-02T21:41:18.917 に答える
0

Matt の回答の拡張: http://jsfiddle.net/Shmiddty/xtQDn/5/

まず、アニメーションを「マスク」して、一度に 1 つのフレームしか表示できないようにする必要があります。これを行うには、コンテナーの幅と高さを 1 フレームのサイズに設定するだけです。

#bmw-glow {
  width: 104px;
  height: 144.45px; /* Fractional pixels are not good. */
  margin: 0px;
  background: url("http://i45.tinypic.com/4qj0b5.jpg") no-repeat;
}

次に、現在のフレームを絶対正弦波にするコードを修正しました。これにより、すべてのケースで望ましいとは限らない、少しの緩和が得られますが、このケースでは問題ないと思います。

var freq     = 1,  //frequency of the animation. Roughly how many times per second it should loop. Higher number is faster, lower number is slower.
currentFrame = 0,
totalFrames  = 11,
deltaFrame   = 1,
frameStep    = 1589 / totalFrames,
elem         = document.getElementById("bmw-glow"),
currentTime  = new Date().getTime();

(function animloop(time){
  var delta = (time - currentTime) / 1000;

  currentFrame += (delta);

  var frameNum = Math.floor(Math.abs(Math.sin(currentFrame*freq) * totalFrames));

  requestAnimFrame(animloop);

  elem.style.backgroundPosition = "0 -" + (frameNum * frameStep) + "px";

  currentTime = time;
})(currentTime);

この例では、分数のピクセルを扱っているため、ジッターが発生していることは明らかです。あなたが tinypic にアップロードした画像が縮小されたのではないかと思います。

于 2012-11-05T15:48:27.733 に答える