Question

我正在尝试使用交互式元素和动画生成网站。我遇到了this 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();
    }
});

但这无济于事。我想这对于那些知道的人来说是一个相对简单的问题。但我没有线索！

期待你的回答，如果我错过任何事情，道歉！

Answer 1

你需要在你的小提琴中加入Jquery。如果您尝试将其用于scroll()，则会出现错误。此外，您不需要.前面的animate()。还要给你的身体一个高度，你可以滚动你的其他你永远不会激活它。看到我的小提琴变化

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

Answer 2

在此代码中调用您的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/

在视图中使用JS为圆形笔划设置动画

2 个答案: