search

chrvadala / react-svg-pan-zoom

:eyes: A React component that adds pan and zoom features to SVG
https://chrvadala.github.io/react-svg-pan-zoom/
MIT License
681 stars 127 forks source link

how is animation implemented in this project #128

Closed dagda1 closed 5 years ago

dagda1 commented 5 years ago

Amazing project, how is the smooth animation achieved?

All I can see is the autoPanLoop function in viewer.js or is it something else?

chrvadala commented 5 years ago

Hi, the logic that handles the autopan feature is into the following lines: https://github.com/chrvadala/react-svg-pan-zoom/blob/master/src/viewer.js#L205-L228 https://github.com/chrvadala/react-svg-pan-zoom/blob/master/src/features/interactions.js#L182-L190 https://github.com/chrvadala/react-svg-pan-zoom/blob/master/src/features/pan.js#L93-L106

The smooth effect is achieved using the requestAnimationFrame function. A standard function available in any browser https://caniuse.com/#feat=requestanimationframe It's something quite similar to a setTimeout function, but wrote specifically to perform graphical changes (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). As tip, consider that the whole online game sector is based on it.