When we post animated images to Facebook, it is displayed as Sprite Animation. We can also try using React Hooks to do it.
The image may look like this:
To do animation, we could write a custom React Hook useBackgroundShift():
function useBackgroundShift(size, xacross, yacross, xymax) {
const [shift, setShift] = useState({ dx: 0, dy: 0 });
useEffect(() => {
let intervalID;
if (size.width !== null && size.height !== null) {
intervalID = setInterval(() => {
setShift(({ dx, dy }) => {
if (dx + dy * yacross + 1 >= xymax) {
dx = 0;
dy = 0;
} else if (++dx >= xacross) {
dx = 0;
if (++dy >= yacross) {
dy = 0;
}
}
return { dx, dy };
});
}, 132);
}
return () => intervalID && clearInterval(intervalID);
}, [size.width, size.height, xacross, yacross, xymax]);
if (size.width === null || size.height === null) return {};
return {
backgroundPosition: `-${(shift.dx * size.width) / xacross}px -${
(shift.dy * size.height) / yacross
}px`,
backgroundRepeat: "no-repeat"
};
}
I also added the ability to animate from frame 1 to frame N, just to see how it works. It is not yet perfect as I only did it as an experiment. Some might be hard coded numbers for the moment, but that's the basic idea of a custom React Hooks to do Sprite Animation.
Demo: https://codesandbox.io/s/beautiful-leaf-o9hew?file=/src/App.js
Top comments (0)