0

iPad の Safari で再生できる「インタラクティブなタイムライン」インターフェイスをスケッチしました。

www.insightdigital.org/touch

画面を左<->右にタップまたはスクラブすると、タッチの pageX 値に応じて表示される画像が変化するのがわかります。簡単なコードは、タッチの x 軸位置を検索し、事前にレンダリングされたシーケンスから画像を呼び出すだけです。当然のことながら、上記の場合、コードは (実際のケースでは iPad ディスクからではなく) Web からフレームを取得する必要があるため、すべての画像がキャッシュされるまで再生が少し途切れます。キャッシュされると、再生はスムーズになります。

  1. 最初の読み込み (または更新) では、'touchmove' を実行している限り、デモは思い通りに動作します。最初のタッチを終了し、新しいタッチ ストロークで左から右へのスクラブを再開しようとすると、再生が途切れます。画面をタップすることもできます。「touchstart」呼び出しが機能しています。ただし、更新または再起動するまでは「touchmove」ではありません。以下のコードを参照して、私が犯したばかげた間違いを 1 つ以上見つけられますか?

問題に対するその他のコメントやアプローチは大歓迎です。

iBooks Author で構築された EO Wilson の 'Life on Earth' に精通している人には、レンダリングされた一連のフレームを再生するこのような 'インタラクティブなタイムライン' がいくつかあります。

コードは次のとおりです。

jquery.swipe-events.js から適応: http://jgestures.codeplex.com/

(function($) {
  $.fn.swipeEvents = function() {
    return this.each(function() {

      var startX,
      startY,
      $this = $(this);

      $this.bind('touchstart', touchstart);

     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();

     // preload
     for(i=20; i<=80; i++)
     {
      var prefix = "scaled/SHOT_C2 ";
      var currentFrame = pad(i,3);
      var path = prefix+currentFrame+".jpg";
      images[i]=path;
      imageObj.src=images[i];
     }

      function touchstart(event) {
    var touches = event.originalEvent.touches;
    if (touches) {
      startX = touches[0].pageX;
      startY = touches[0].pageY;
      $this.trigger("tap");

      $this.bind('touchmove', touchmove);

      $("#swipebox").image(images[parseInt(20+startX/20)],function(){
        // alert("image loaded");
      });

    }
    event.preventDefault();
      }  

      function touchmove(event) {
    var touches = event.originalEvent.touches;
    if (touches) {
      startX = touches[0].pageX;
      startY = touches[0].pageY;
      $this.trigger("tap");

      $("#swipebox").image(images[parseInt(20+startX/20)],function(){
        // alert("image loaded");
      });

    }
    event.preventDefault();
      }

    });
  };

$.fn.image = function(src, f){ 
  return this.each(function(){ 
    var i = new Image(); 
    i.src = src; 
    i.onload = f; 
    this.appendChild(i);
  }); 
}

function pad(number, length) {
    var str = '' + number;
    while (str.length < length) {
    str = '0' + str;
    }
    return str;
}

})(jQuery);

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/main.css" rel="stylesheet">
  </head>
  <body>
    <div id=page>
      <div id=swipebox>
      </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.swipe-events.js"></script>
    <script>
      $(function(){
        $('#swipebox')
          .swipeEvents()
          .bind("tap",  function(){ $('#swipebox').html(""); })
      });
    </script>
  </body>
</html>
4

0 に答える 0