Kanıt js değişkenini animasyonlu olarak değiştirin

Question

Jack Rugile tarafından oluşturulmuş orijinal kanvas.

Bir jquery işlevi kullanarak vurgulu tuval js dosyasındaki birkaç değişkeni değiştirmeye çalışıyorum. Birkaç çalışma ama ben parıldayan rotasyonun yarıçapını, onu anında değiştirmekten ziyade canlandırarak değiştirmek istiyorum. this yolunda olduğu gibi genişler.

$ timeout kullanmayı denedim, ancak bunun uygun bir yol olduğunu düşünmüyorum. Herhangi bir öneriniz var mı?

DEMO

jquery gelme js alt kısmında.

$('.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

Bunu deneyin. Yinelemeli işlevi çağırarak animasyon uygulamak için requestAnimationFrame kullanın.

$('.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); 
}