[자바 스크립트] 나는 jquery를 처음 사용하고 snap.svg를 배우고 있으며이 코드가 어떻게 작동하는지 알지 못합니까?

로부터 SnapSVG 워드 프로세서 :

Snap.animate(from, to, setter, duration, [easing], [callback])

따라서 위의 Snap.animate에 대한 호출을 분류하려면 다음을 수행하십시오.

var from = 0; // starting value
var to = 40; // ending value

var setter = function ( value ) { // value will be somewhere between 0 and 40
    innerCircle.attr({ 'strokeDashoffset': value })
    }; // called by SnapSVG to change the strokeDashoffset
    
    var duration = 5000; // 5000 milliseconds (or 5 seconds)
    
    // Using the above values, this is the equivalent to your original call 
    Snap.animate( from, to, setter, duration ); 
    

따라서 0, 40은 애니메이션의 시작 및 종료 값일뿐입니다.

나는 'setter'함수가 현재 '값'으로 기간 내내 호출된다고 믿습니다. 이 값은 애니메이션에서 얼마나 멀리 떨어져 있는지에 따라 0에서 40 사이입니다 (이 경우 2.5 초에서는 20이됩니다).

또 다른 예를 보여주는 바이올린 이 있습니다.

출처
https://stackoverflow.com/questions/39940037