AddEventListener（）で引数を渡すとrequestAnimationFrameが正常に動作しません

Question

私はmouseenterでアニメーションを取得しようとしていますが、mouseleaveでアニメーションを止めようとしていますが、mouseenterのフルサイクルではなく、何か間違っている必要があります。

https://jsfiddle.net/b6kezaku/7/ここは断片です。

var arrowUpFirst = document.getElementsByClassName('turn_up_svg')[0] 
var arrowUpTransform = window.getComputedStyle(arrowUpFirst, null).getPropertyValue('transform') 
var arrowUpTransformScale = arrowUpTransform.split(',') 
var arrowUpValue = typeof arrowUpTransformScale[2] === 'string' 
console.log(arrowUpValue) 

var arrowNumberUpValue = Number(arrowUpValue) * 100 
console.log(typeof arrowNumberUpValue === 'number') 
var a = 'start' 
var c = 'stop' 
var fullCycle = 100 

function up_svg(b) { 
    if (a == b) { 
    requestAnimationFrame(up_svg) 
    } 
    if (c == b) { 
    cancelAnimationFrame(up_svg) 
    } 

    if (arrowNumberUpValue <= 100 && arrowNumberUpValue >= 50) { 
    fullCycle-- 
    fullCycle <= 75 ? arrowNumberUpValue++ : arrowNumberUpValue-- 
     //document.querySelectorAll('p')[1].textContent = arrowNumberUpValue 
     var trans = "scale(" + (arrowNumberUpValue/100).toPrecision(2) + ") rotate(-90deg)" 
    //document.querySelectorAll('p')[3].textContent = (arrowNumberUpValue/100).toPrecision(2) 
    arrowUpFirst.style.transform = trans 
    if (fullCycle < 52) { 
     fullCycle = 100 
     arrowNumberUpValue = 100 
     //document.querySelectorAll('p')[2].textContent = arrowNumberUpValue 
    } 
    } 
} 


//FirstFace.onmouseenter = up_svg 
FirstFace.addEventListener('mouseenter', function() { 
    up_svg('start') 
}, false) 
//FirstFace.addEventListener('mouseenter', up_svg,false) 
//FirstFace.addEventListener('mouseleave', up_svg.bind(null,'stop'),false) 
FirstFace.addEventListener('mouseleave', function() { 
    up_svg('stop') 
}, false) 

Answer 1

私が見る問題は​​がup_svgを呼び出すとき、それはbに値を渡しませんので、あなたが第二​​を誘発しないということです。

は、次のことをやって考えてみましょう：

この場合

function loopAnimation() { 
    requestAnimationFame(loop) 
    // run animation 
} 

function startAnimation() { 
    // cancel to prevent duplication 
    cancelAnimationFrame(loopAnimation) 
    requestAnimationFame(loopAnimation) 
} 

function stopAnimation() { 
    cancelAnimationFrame(loopAnimation) 
} 
FirstFace.addEventListener('mouseenter', startAnimation,false) 
FirstFace.addEventListener('mouseexit', stopAnimation,false) 

、up_svgは三つの機能に分かれます。 1つはアニメーションを実行して保存することに専念し、他の2つはループを開始または停止することができます。

Answer 2

requestAnimationFrame(up_svg);がコールバックを実行したときに数値が渡されたと思われるので、bは「開始」または「停止」ではないため、再度リフレッシュしないか、requestAnimationFrame(up_svg);に再度問い合せます。

宣言で

：

機能で

var running = false; 

：

if(a == b){ 
    running = true; 
    cancelAnimationFrame(up_svg); //just a precaution 
    } 
    if(c == b){ 
    running = false; 
    cancelAnimationFrame(up_svg) 
    }else{ 
    if(running){ 
     requestAnimationFrame(up_svg); 
    } 
    } 

フィドル：https://jsfiddle.net/b6kezaku/10/