1

我正在尝试生成一个带有交互式元素和动画的网站。我遇到了这个 Fiddle，它非常适合我的需要。

当画布元素在浏览器中可见时，或者可能在达到某个滚动点时（即：Y 方向> 1000 px - 开始动画），我希望圆圈开始动画。

我对 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 回答