Москаленко Николай:
Недавно открыл для себя Lottie Animations — сервис создания анимаций для UI. В After Effects (и не только) можно нарисовать анимации и экспортировать их в специальный json-формат. Пример как выглядит анимация С помощью библиотеки (например, lottie-react) можно воспроизвести созданную таким образом анимацию на фронте (по сути, при анимации меняется последовательность svg элементов). У сервиса есть маркетплейс готовых анимаций, в том числе бесплатных, а также набор инструментов для создания собственных. Ниже пример кода, как можно отрендерить svg картинку с анимацией из json-файла lottie
import Lottie from 'react-lottie';
import runningMan from "src/assets/animations/runningMan.json";
const animationOptions = {
loop: true,
autoplay: true,
animationData: runningMan,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
}
}
...
<Lottie options={animationOptions} height={320} width={320} speed={1.5} />
...