1

インタラクティブな要素とアニメーションを含むサイトを生成しようとしています。私が必要としているものに最適なこの Fiddleに出会いました。

ブラウザでキャンバス要素が表示されたとき、または特定のスクロールポイントに達したときに円のアニメーションを開始したい(つまり、Y方向で1000ピクセル以上-アニメーションを開始)。

私は JS にまったく慣れていないので、他のソースからコードをつなぎ合わせようとしましたが、うまくいきませんでした。私は試しました（Fiddleのコンテキストで）：

// requestAnimationFrame Shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x = canvas.width / 2;
 var y = canvas.height / 2;
 var radius = 75;
 var endPercent = 85;
 var curPerc = 0;
 var counterClockwise = false;
 var circ = Math.PI * 2;
 var quart = Math.PI / 2;

 context.lineWidth = 10;
 context.strokeStyle = '#ad2323';
 context.shadowOffsetX = 0;
 context.shadowOffsetY = 0;
 context.shadowBlur = 10;
 context.shadowColor = '#656565';


 function animate(current) {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
     context.stroke();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }
 }


// My altered code to the original
   $(window).scroll(function() {
    if ($('#myCanvas').is(':visible')) {
        .animate();
    }
});

しかし、これは何もしていません。これは、知識のある人にとっては比較的単純な問題だと思います。しかし、私には手がかりがありません！

回答をお待ちしております。見落としがありましたら申し訳ありません。

4

2 に答える 2

1

フィドルに Jquery を含める必要があります。それを試して使用しようとすると、エラーが発生しました。また、の前にはscroll()必要ありません。また、スクロールできる高さを身体に与えてください。変更については私のフィドルを参照してください.animate()

http://jsfiddle.net/uhVj6/220/

于 2013-10-16T17:53:58.383 に答える
0

animate();このコードであなたを呼び出します

$(document).ready(function () {
    called = false;
    $(window).scroll(function (e) {
        if ($(window).scrollTop() > $("canvas").position().top && !called){
            animate();
            called = true;
        }
    });

});

http://jsfiddle.net/uhVj6/223/

于 2013-10-16T18:30:31.350 に答える