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

【问题标题】：Using JS to animate a circle stroke when in view在视图中使用 JS 为圆形笔划设置动画
【发布时间】：2013-10-16 17:34:39
【问题描述】：

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

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

期待您的回答，如有遗漏请见谅！

【问题讨论】：

标签： javascript canvas scroll jquery-animate stroke

【解决方案1】：

您需要在小提琴中包含 Jquery。如果您要尝试将其用于scroll()，那将给您一个错误，而且您不需要在animate() 前面使用.。还要给你的身体一个高度，你可以在你的其他地方滚动，你永远不会激活它。请参阅我的小提琴以了解更改

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

【讨论】：

感谢您的回复 Keirchon。我看了你的小提琴，但它似乎不起作用。我向下滚动动画的那一刻快速出现然后消失。我正在使用最新版本的 chrome。
@RichardTeahan 只需向下滚动一次并等待，然后再次滚动它就会消失。我不知道为什么会发生这种情况仍然试图弄清楚这一点
@RichardTeahan 已修复！！ Animate 被调用了太多次，它应该被调用一次，所以我在其中放置了一个条件，所以它只运行一次。 jsfiddle.net/uhVj6/219
@RichardTeahan 它实际上在任何滚动初始化的第二个动画。但我把它修成了你想要的jsfiddle.net/uhVj6/220
我通过谷歌搜索某些问题和复制代码来进行很多这些小修复。就像最后一个我用谷歌搜索“jquery确定元素是否在屏幕上可见”找到一个提到滚动并直接复制该代码然后将其合并到条件中的一个。在如此依赖stackoverflow之前尝试做同样的事情。它将帮助您了解更多信息，并为您提供自行搜索资源的良好实践

【解决方案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/

【讨论】：