Question

Jack Rugile创作的原创画布。

我正在尝试使用jquery函数在悬停时更改canvas js文件中的几个变量。几个工作，但我想通过动画来改变发光旋转的半径，而不是让它立即改变。与this扩展的方式类似。

我尝试使用$ timeout但我不认为这是正确的方法。有什么建议吗？

jquery悬停位于js的底部。

$('.containAnimation').hover(function() {
  circle.speed = 8;
  circle.thickness = 20;
  particleMax = 200;
  $timeout(function() {
    circle.radius = 150;
  }, 3000);
}, function() {
  circle.speed = 1.5;
  circle.thickness = 15;
  particleMax = 100;
  $timeout(function() {
    circle.radius = 100;
  }, 3000);
});

Answer 1

试试这个。使用requestAnimationFrame通过递归调用函数进行动画处理。

$('.containAnimation').hover(function() {
  circle.speed = 8;
  circle.thickness = 20;
  particleMax = 200;
  setTimeout(animateHoverIn, 10);
}, function() {
  circle.speed = 1.5;
  circle.thickness = 15;
  particleMax = 100;
  setTimeout(animateHoverOut, 10);
});

function animateHoverIn(){
    if (circle.radius>=150){
       return;
    }
    circle.radius++;
    requestAnimationFrame(animateHoverIn);
}

function animateHoverOut(){
    if (circle.radius<=100){
       return;
    }
    circle.radius--;
    requestAnimationFrame(animateHoverOut);
}

通过设置动画来更改canvas js变量

1 个答案: