{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":83,"offset":45}],"inlineStyleRanges":[],"text":"В более удобном виде читайте на нашем сайте: https://webcos.ru/blog/2-kak-sdelat-vrashchaiushchiesia-planety-vokrug-svoei-orbiti","type":"unstyled","key":"9bscs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":22,"style":"BOLD"}],"text":"В процессе разработки WEBCOS я захотел сделать интерактивную систему планет. Причём не просто вращение по кругу, а возможность перетаскивать планеты мышью прямо по орбите. Код получился не самым простым, но и не самым сложным, при этом новой информации можно было узнать довольно много. И сейчас я хочу поделиться с вами тем, как:","type":"unstyled","key":"6ptbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"создавать анимации","type":"unordered-list-item","key":"ft0qs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сделать drag&drop","type":"unordered-list-item","key":"9auqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"работать с requestAnimationFrame","type":"unordered-list-item","key":"5f2c8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сделать одинаковую скорость анимации на любых устройствах (достигнем плавности)","type":"unordered-list-item","key":"64o24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"создавать инерцию","type":"unordered-list-item","key":"8n518"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"работать с “невероятно сложными” формулами и как самому их создавать","type":"unordered-list-item","key":"2vpue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сделать реэкспорты и что это такое","type":"unordered-list-item","key":"dh940"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":14,"offset":125}],"inlineStyleRanges":[],"text":"Всё было сделано на React, но переделать под Next.js не составит труда (По крайней мере можете зайти в открытый репозиторий нашего проекта и посмотреть код сами)","type":"unstyled","key":"ahe53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы вы могли посмотреть результат, соориентироваться и избежать проблем при написании кода или прочитать комментарии и разобраться самим, высылаю ссылку на проект:","type":"unstyled","key":"defm5"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":66,"offset":0}],"inlineStyleRanges":[],"text":"https://stackblitz.com/edit/vitejs-vite-gc8qzgym?file=package.json","type":"unstyled","key":"b0fit"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(Советую смотреть статью и одновременно читать комментарии к коду, в статье я объясняю подробнее и наверно понятнее)","type":"unstyled","key":"97eg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Осторожно, может быть проблема с Vite 8 + Rolldown WASM + StackBlitz WebContainer","type":"unstyled","key":"c3ic4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для решения понижаем версию Vite, в package.json прописываем:","type":"unstyled","key":"ee2p1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"vite\": \"^7.3.5\",\n \"@vitejs/plugin-react\": \"^5.1.0\"\n}","type":"unstyled","key":"37rh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраняем и затем пишем:","type":"unstyled","key":"48ll6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"rm -rf node_modules package-lock.json\npnpm install","type":"unstyled","key":"ar4uv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот кстати и сам результат:","type":"unstyled","key":"dlh36"},{"data":{"image":{"id":"6a64d83f043fc014e60901c5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат","type":"atomic:image","key":"bjeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Начало","type":"header-two","key":"1jhcl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":200,"style":"ITALIC"}],"text":"Итак, будет прям с полного нуля, для тех кому это неинтересно можете скипнуть и начать уже с создания архитектуры и реэкспортов. Начнём с создания проекта, выбирайте, что вам удобно. Я буду делать на React + Typescript (Сборщик Vite):","type":"unstyled","key":"bf6la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm create vite@latest","type":"unstyled","key":"3jgv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Чистим новый проект от мусора","type":"header-two","key":"a8km8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее уберём всё лишнее:","type":"unstyled","key":"5p1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почистим App.tsx и сделаем единственный div, классом intro","type":"unordered-list-item","key":"fgqn8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function App() {\n return (\n

\n )\n}\nexport default App","type":"blockquote","key":"dsnb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удалим файлы с картинками в папке assets, App.css","type":"unordered-list-item","key":"8r37p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почистим index.css и добавим стили","type":"unordered-list-item","key":"7jkb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {\n background-color: #000; /* Задний фон */\n}\n \n \n/* Делаем, чтобы планеты все были по центру */\n.intro {\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.3s linear;\n flex-direction: column;\n}","type":"blockquote","key":"d2n9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Создаём структуру проекта","type":"header-two","key":"caa5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь добавим немного структуры в папке src:","type":"unstyled","key":"f5bp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"папка assets (внутри папки icons, images)","type":"unordered-list-item","key":"fsj93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"папка components","type":"unordered-list-item","key":"1u9fb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"папка utils","type":"unordered-list-item","key":"6od93"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":7,"offset":44}],"inlineStyleRanges":[],"text":"Закинем изображения с орбитами и планетами (скачать)","type":"unstyled","key":"2t0q2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Добавляем Реэкспорты для изображений","type":"header-two","key":"luf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Реэкспорты - это объединение экспорта и импорта в одном файле, он нужен для того, чтобы в других файлах сделать красивый импорт (короткий и читаемый), т.е не с 15 файлов, а с одного. Обычно их добавляют на этапе рефакторинга, но мы сделаем сразу, чтобы потом не возвращаться к этому.","type":"unstyled","key":"be55j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реэкспорты изображений: создадим в папке assets файл index.ts:","type":"unstyled","key":"33j9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export { default as PlanetIcon1 } from './icons/planet-1.svg';\nexport { default as PlanetIcon2 } from './icons/planet-2.svg';\nexport { default as PlanetIcon3 } from './icons/planet-3.svg';\nexport { default as PlanetIcon4 } from './icons/planet-4.svg';\nexport { default as PlanetIcon5 } from './icons/planet-5.svg';\nexport { default as PlanetIcon6 } from './icons/planet-6.svg';\nexport { default as PlanetIcon7 } from './icons/planet-7.svg';\nexport { default as PlanetIcon8 } from './icons/planet-8.svg';\nexport { default as OrbitImage } from './images/orbit2.png';\nexport { default as ThemeMoonImage } from './images/theme-moon.png';","type":"blockquote","key":"84l2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрим же, как это работает.","type":"unstyled","key":"1dgqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Делаем настройки для планет и орбит","type":"header-two","key":"956sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы не хранить настройки каждой планеты внутри компонента, вынесем их в отдельный массив.","type":"unstyled","key":"6uq1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так мы сможем добавлять новые планеты буквально одной записью. Сделаем файл с настройками планет в папке utils, создаём файл planets.ts. И в самом начале как раз видим результат нашей работы с реэкспортами.","type":"unstyled","key":"eh39t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо:","type":"unstyled","key":"b5oni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import PlanetIcon1 from '../assets/icons/planet-1.svg';\nimport PlanetIcon1 from '../assets/icons/planet-2.svg';\nimport PlanetIcon1 from '../assets/icons/planet-3.svg';\n...","type":"blockquote","key":"7s9tc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":12,"style":"BOLD"}],"text":"Мы получили единый импорт (да возможно кол-во строк мы не сократили, но при этом это выглядит в разы красивее и лучше). Так же реэкспорты используются для инкапсуляции (чтобы открывать остальному приложению только то, что нужно и скрыть кучу вспомогательных файлов, например в архитектуре FSD) . Про сами настройки я расскажу на этапе создания компонента Planet.tsx:","type":"unstyled","key":"9jq0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {\n PlanetIcon1,\n PlanetIcon2,\n PlanetIcon3,\n PlanetIcon4,\n PlanetIcon5,\n PlanetIcon6,\n PlanetIcon7,\n PlanetIcon8,\n} from '../assets';\n \ninterface Planet {\n id: string;\n direction: 'left' | 'right';\n marginRight: number;\n planetSrc: string;\n planetHeight: number;\n planetWidth: number;\n height: number;\n width: number;\n speed: number;\n}\n \nexport const planets: Planet[] = [\n {\n id: '1',\n direction: 'left',\n height: 1200,\n width: 1200,\n planetHeight: 28,\n planetWidth: 28,\n marginRight: -13,\n planetSrc: PlanetIcon1,\n speed: 0.18,\n },\n {\n id: '2',\n direction: 'right',\n height: 1050,\n width: 1050,\n planetHeight: 52,\n planetWidth: 52,\n marginRight: -25,\n planetSrc: PlanetIcon2,\n speed: 0.14,\n },\n {\n id: '3',\n direction: 'left',\n height: 940,\n width: 940,\n planetHeight: 120,\n planetWidth: 120,\n marginRight: -60,\n planetSrc: PlanetIcon3,\n speed: 0.1,\n },\n {\n id: '4',\n direction: 'right',\n height: 810,\n width: 810,\n planetHeight: 140,\n planetWidth: 140,\n marginRight: -60,\n planetSrc: PlanetIcon4,\n speed: 0.08,\n },\n {\n id: '5',\n direction: 'left',\n height: 640,\n width: 640,\n planetHeight: 110,\n planetWidth: 110,\n marginRight: -50,\n planetSrc: PlanetIcon5,\n speed: 0.065,\n },\n {\n id: '6',\n direction: 'right',\n height: 500,\n width: 500,\n planetHeight: 90,\n planetWidth: 100,\n marginRight: -40,\n planetSrc: PlanetIcon6,\n speed: 0.05,\n },\n {\n id: '7',\n direction: 'left',\n height: 360,\n width: 360,\n planetHeight: 36,\n planetWidth: 36,\n marginRight: -15,\n planetSrc: PlanetIcon7,\n speed: 0.035,\n },\n {\n id: '8',\n direction: 'right',\n height: 260,\n width: 260,\n planetHeight: 24,\n planetWidth: 24,\n marginRight: -13,\n planetSrc: PlanetIcon8,\n speed: 0.025,\n },\n];","type":"blockquote","key":"c677c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Создаём компонент с системой планет","type":"header-two","key":"b263i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь начнём делать компоненты. В папке components создаём ещё одну PlanetSystem и туда добавляем файл PlanetSystem.tsx. Тут ничего трудного, просто отображение по центру луны, а вокруг него планеты с орбитами:","type":"unstyled","key":"3odlt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// PlanetSystem.tsx\n \nimport styles from './PlanetSystem.module.css';\n \nimport { ThemeMoonImage } from '../../assets';\nimport { planets } from '../../utils/planets';\nimport Planet from '../Planet/Planet.tsx';\n \nexport const PlanetSystem = () => {\n return (\n

\n {planets.map((planet) => (\n \n ))}\n \n $\"Moon\"$ \n

\n );\n};","type":"blockquote","key":"dkr6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А так же стили PlanetSystem.module.css:","type":"unstyled","key":"6ejlj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".wrapper {\n position: relative;\n \n width: min(1200px, 100vw);\n height: min(1200px, 100vw);\n \n display: flex;\n justify-content: center;\n align-items: center;\n \n overflow: visible;\n}\n \n.circleWrapper {\n position: relative;\n \n width: 1200px;\n height: 1200px;\n \n display: flex;\n justify-content: center;\n align-items: center;\n \n transform-origin: center center;\n}\n \n.themeImage {\n position: absolute;\n \n top: 50%;\n left: 50%;\n \n width: 150px;\n height: 150px;\n \n transform: translate(-50%, -50%);\n \n z-index: 100;\n \n object-fit: contain;\n}\n \n/* планшеты */\n@media (max-width: 1200px) {\n .circleWrapper {\n transform: scale(0.6);\n }\n}\n \n/* маленькие планшеты */\n@media (max-width: 930px) {\n .circleWrapper {\n transform: scale(0.4);\n }\n \n .themeImage {\n width: 100px;\n height: 100px;\n }\n}\n \n/* телефоны */\n@media (max-width: 630px) {\n .circleWrapper {\n transform: scale(0.25);\n }\n \n .themeImage {\n width: 60px;\n height: 60px;\n }\n}\n \n/* совсем маленькие */\n@media (max-width: 420px) {\n .circleWrapper {\n transform: scale(0.18);\n }\n \n .themeImage {\n width: 40px;\n height: 40px;\n }\n}","type":"blockquote","key":"4grpe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Из интересного:","type":"unstyled","key":"ajrv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"для более маленьких экранов мы просто будем уменьшать нашу систему через scale","type":"unordered-list-item","key":"ce9se"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"для того, чтобы луна была ровно по центру используем знаменитый приём:","type":"unordered-list-item","key":"34beg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: absolute:\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);","type":"blockquote","key":"drooj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Создаём планету с орбитой","type":"header-two","key":"5ln20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим к главному, компонент планеты Planet.tsx.","type":"unstyled","key":"73q0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Как устроен компонент Planet","type":"header-three","key":"5er09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вся логика вращения, перетаскивания и визуальных эффектов находится внутри одного компонента.","type":"unstyled","key":"28tbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он отвечает за:","type":"unstyled","key":"fb7kl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"отображение орбиты;","type":"unordered-list-item","key":"fuvnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"отображение планеты;","type":"unordered-list-item","key":"45tku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"автоматическое вращение;","type":"unordered-list-item","key":"d2429"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"drag-and-drop;","type":"unordered-list-item","key":"an55d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"инерцию;","type":"unordered-list-item","key":"bo6ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код может показаться большим, но на самом деле его можно разделить на три независимые части:","type":"unstyled","key":"b9qm1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"анимация вращения;","type":"ordered-list-item","key":"7dume"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"обработка перетаскивания;","type":"ordered-list-item","key":"flnf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"визуальные эффекты.","type":"ordered-list-item","key":"1ovhp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я сразу выведу код, с комментариями, сейчас будем разбираться по блокам","type":"unstyled","key":"7mc7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import styles from './Planet.module.css';\nimport React, { useEffect, useRef, useState } from 'react';\n \n// Картинка орбиты\nimport { OrbitImage } from '../../assets';\n \n// Пропсы планеты\ninterface IPlanet {\n width: number; // диаметр орбиты\n height: number; // диаметр орбиты\n \n planet: string; // изображение планеты\n \n speed: number; // скорость вращения\n \n planetHeight: number; // высота планеты\n planetWidth: number; // ширина планеты\n \n marginRight: number; // смещение планеты от края орбиты\n \n direction: 'right' | 'left'; // направление вращения\n}\n \nexport default function Planet({\n height,\n width,\n speed,\n planet,\n planetWidth,\n planetHeight,\n marginRight,\n direction,\n}: IPlanet) {\n \n // ссылка на элемент, который вращается\n const pickerRef = useRef(null);\n \n // ссылка на саму орбиту\n const orbitRef = useRef(null);\n \n // нужно только для смены css-класса при перетаскивании\n const [dragging, setDragging] = useState(false);\n \n // id requestAnimationFrame\n // нужен для остановки анимации при размонтировании компонента\n const animationRef = useRef(0);\n \n // текущий угол поворота планеты\n // начинаем со случайного положения\n const angleRef = useRef(Math.random() * 360);\n \n // сейчас планета перетаскивается мышью?\n const isDraggingRef = useRef(false);\n \n // скорость после броска мышкой\n // используется для эффекта инерции\n const velocityRef = useRef(0);\n \n /**\n * Вычисляет угол между центром орбиты\n * и текущей позицией мыши.\n * Используется во время drag'n'drop.\n * x, y - координаты мыши\n */\n const getAngle = (x: number, y: number) => {\n if (!orbitRef.current) return 0;\n \n // элемент орбиты\n const rect = orbitRef.current.getBoundingClientRect();\n \n // центр орбиты\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + rect.height / 2;\n \n // вектор от центра к мыши\n const deltaX = x - centerX;\n const deltaY = y - centerY;\n \n // переводим радианы в градусы\n /*\n * Что такое Math.atan2 - это угол на который нужно повернуть\n * относительно базовой горизонтальной оси координат\n * для того, чтобы элемент смотрел на курсор\n * Более подробно в статье\n * */\n \n return (Math.atan2(deltaY, deltaX) * 180) / Math.PI;\n };\n \n /**\n * Главная анимация вращения.\n *\n * Работает через requestAnimationFrame.\n */\n useEffect(() => {\n \n // количество миллисекунд с момента начала загрузки страницы\n // (но будет в итоге как время с прошлого кадра)\n let lastTime = performance.now();\n \n // Анимирование\n const animate = (time: number) => {\n \n // если вкладка скрыта,\n // просто ждём следующий кадр\n if (document.hidden) {\n animationRef.current = requestAnimationFrame(animate);\n return;\n }\n \n // сколько миллисекунд прошло с прошлого кадра\n const delta = time - lastTime;\n \n // обновили на новый кадр\n lastTime = time;\n \n if (pickerRef.current) {\n \n // если пользователь НЕ тащит планету\n if (!isDraggingRef.current) {\n \n // определяем направление вращения\n // (т.е просто будем умножать на 1 или на -1)\n const directionMultiplier =\n direction === 'left' ? 1 : -1;\n \n // вращаем планету (меняем угол)\n /*\n * Поймём формулу:\n * directionMultiplier - просто направление движения\n * speed - угол на который мы должны повернуть за кадр (при 60 fps)\n * delta / 16.67 - масштабируем скорость в зависимости от производительности\n * То есть к примеру 60 fps: 16.67/16.67 = 1 (За кадр повернем ровно на множитель speed)\n * 30 fps: 33.33/16.67 = 2 (За один кадр мы повернем в 2 раза больше чем множитель speed)\n * 120 fps: 8.33/16.67 = 0.5 (За один кадр мы повернем в 2 раза меньше чем множитель speed)\n * В чём суть?\n * За одну секунду реального времени объект повернется на абсолютно одинаковый угол, что на мощном пк,\n * что и на слабом пк\n * На слабом пк скорость изменения в 2 раза больше ЗА ОДИН КАДР, но самих КАДРОВ тоже меньше в 2 раза:\n * по итогу получаем абсолютно одинаковое поведение как на мощном, так и на слабом пк за секунду времени\n * 16.67 - просто длительность кадра при эталонных 60 FPS\n * */\n angleRef.current +=\n directionMultiplier *\n speed * // speed - угол на который объект должен повернуться за кадр\n (delta / 16.67);\n \n // Если инерция стала слишком мала, зануляем её, чтобы не тратить ресурсы\n if (Math.abs(velocityRef.current) < 0.001) {\n velocityRef.current = 0;\n }\n \n \n // добавляем инерцию\n angleRef.current += velocityRef.current;\n \n // постепенно гасим скорость\n velocityRef.current *= 0.96;\n }\n \n // вращаем всю орбиту\n pickerRef.current.style.transform =\n rotate(${angleRef.current}deg);\n }\n \n // переходим к следующему кадру\n animationRef.current =\n requestAnimationFrame(animate);\n };\n \n // запуск анимации\n animationRef.current =\n requestAnimationFrame(animate);\n \n // очистка при удалении компонента\n return () => {\n cancelAnimationFrame(animationRef.current);\n };\n }, [direction, speed]);\n \n /**\n * Обработка drag'n'drop\n */\n useEffect(() => {\n \n // функция, которая будет работать при изменении позиции мыши\n const handleMouseMove = (e: MouseEvent) => {\n \n // проверяем захвачен ли элемент\n if (\n !isDraggingRef.current ||\n !pickerRef.current\n ) {\n return;\n }\n \n // новый угол относительно центра орбиты\n const angle =\n getAngle(e.clientX, e.clientY);\n \n // вычисляем скорость броска\n velocityRef.current =\n (angle - angleRef.current) * 0.12; // каждый кадр будем преодолевать только 12% от оставшегося расстояния (для плавности)\n \n // обновляем угол\n angleRef.current = angle;\n \n // сразу отображаем новое положение\n pickerRef.current.style.transform =\n rotate(${angle}deg);\n };\n \n const handleMouseUp = () => {\n \n // прекращаем перетаскивание\n isDraggingRef.current = false;\n \n setDragging(false);\n \n document.body.style.cursor = '';\n };\n \n window.addEventListener(\n 'mousemove',\n handleMouseMove\n );\n \n window.addEventListener(\n 'mouseup',\n handleMouseUp\n );\n \n return () => {\n window.removeEventListener(\n 'mousemove',\n handleMouseMove\n );\n \n window.removeEventListener(\n 'mouseup',\n handleMouseUp\n );\n };\n }, []);\n \n /**\n * Начало перетаскивания\n */\n const handleMouseDown = (\n e: React.MouseEvent\n ) => {\n \n e.preventDefault();\n \n isDraggingRef.current = true;\n \n setDragging(true);\n \n // сбрасываем прошлую инерцию\n velocityRef.current = 0;\n \n document.body.style.cursor =\n 'grabbing';\n };\n \n return (\n \n {/* Вращающаяся часть орбиты */}\n \n {/* Планета */}\n \n \n \n );\n}","type":"blockquote","key":"74f80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Начнём с тех самых настроек:","type":"header-three","key":"3u98r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"interface IPlanet {\n width: number // диаметр орбиты\n height: number // диаметр орбиты\n \n planet: string // изображение планеты\n \n speed: number // скорость вращения\n \n planetHeight: number // высота планеты\n planetWidth: number // ширина планеты\n \n marginRight: number // смещение планеты от края орбиты\n \n direction: 'right' | 'left' // направление вращения\n}","type":"blockquote","key":"5d6f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть параметры, которые в целом и так понятны, но к примеру, есть скорость.","type":"unstyled","key":"cl1vq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объясню сейчас немного, позже станет ещё понятней.","type":"unstyled","key":"2frne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"speed - кол-во градусов на которое подвинется планета за кадр","type":"unstyled","key":"hm16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"marginRight - кол-во пикселей на которое нужно сместить планету, чтобы она встала на свою орбиту нормально (делаем методом подбора) )","type":"unstyled","key":"9aikf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"direction - как именно будет двигаться планета (против часовой или по часовой)","type":"unstyled","key":"1dden"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Инициализация","type":"header-three","key":"8scrq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Идём дальше.","type":"unstyled","key":"8fbf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const animationRef = useRef(0);(0);","type":"blockquote","key":"7u46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В animationRef мы будем хранить requestAnimationFrame, чтобы он не пересоздавался между ререндерами. Пока что поставим затычку в виде 0. В целом тоже самое и с другими useRef, по типу","type":"unstyled","key":"ea0ts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const velocityRef = useRef(0);","type":"blockquote","key":"6365s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"и","type":"unstyled","key":"c1ejg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const angleRef = useRef(Math.random() * 360);","type":"blockquote","key":"emmd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Главная анимация:","type":"header-three","key":"eemve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":53,"offset":35,"style":"BOLD"}],"text":"perfomance.now() нам просто выдаст кол-во миллисекунд с момента начала загрузки страницы.","type":"unstyled","key":"95il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И представляете, в функции animate мы принимаем time - время с момента начала загрузки.","type":"unstyled","key":"k4oc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"requestAnimationFrame - тоже возвращает время с момента начала загрузки автоматически, когда мы будем вызывать её через requestAnimationFrame(animate)","type":"unstyled","key":"3s6dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"поэтому буквально","type":"unstyled","key":"819hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const delta = time - lastTime;","type":"blockquote","key":"argpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"это: [время с начала загрузки страницы в новом кадре] - [время с начала загрузки страницы в старом кадре]","type":"unstyled","key":"9u71g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":27,"style":"BOLD"}],"text":"Отсюда получаем, что у нас delta - это просто время прошедшее между старым и новым кадром.","type":"unstyled","key":"330ef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К примеру:","type":"unstyled","key":"664n0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"у 60 FPS - время между кадрами это 1000 мс / 60 кадров = 16.67 мс на кадр (Ну потому что FPS - кадров в секунду, 1000 мс = 1 сек)","type":"unstyled","key":"3etg3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и следующая сложная формула становится чуть понятней","type":"unstyled","key":"sv1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"angleRef.current +=\ndirectionMultiplier *\nspeed *\n(delta / 16.67);","type":"blockquote","key":"5kd12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":21,"style":"BOLD"}],"text":"То есть по сути есть directionMultiplier, он просто будет умножать либо на -1, либо на 1, тем самым задавая направление.","type":"unstyled","key":"792ba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":5,"style":"BOLD"}],"text":"Есть speed, который мы ранее обозначили, как кол-во градусов на кадр, как раз из-за этой формулы.","type":"unstyled","key":"9oqdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":7,"style":"BOLD"},{"length":6,"offset":139,"style":"BOLD"}],"text":"И есть (delta/16.67) - что это? Ну я уже давал пример, что 16.67 это кол-во мс, которое проходит между новым и старым кадром при 60 FPS, а delta - это как раз тоже время между новым и старым кадром, просто не факт, что для 60 FPS, так как устройства разные бывают (как мощные, так и слабые). Нам это нужно, чтобы за одну секунду реального времени объект повернулся на абсолютно одинаковый угол, как на мощном, так и на слабом девайсе.","type":"unstyled","key":"cinst"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как это работает?","type":"header-three","key":"bg9r1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То есть к примеру 60 fps: 16.67/16.67 = 1 (За кадр повернем ровно на множитель speed)","type":"unstyled","key":"e5e8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"30 fps: 33.33/16.67 = 2 (За один кадр мы повернем в 2 раза больше чем множитель speed)","type":"unstyled","key":"cd53t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":137,"style":"BOLD"},{"length":7,"offset":160,"style":"BOLD"}],"text":"120 fps: 8.33/16.67 = 0.5 (За один кадр мы повернем в 2 раза меньше чем множитель speed)\nНа слабом пк скорость изменения в 2 раза больше ЗА ОДИН КАДР, но самих КАДРОВ тоже меньше в 2 раза:","type":"unstyled","key":"db7ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":86,"style":"BOLD"}],"text":"по итогу получаем абсолютно одинаковое поведение как на мощном, так и на слабом пк за СЕКУНДУ времени.","type":"unstyled","key":"6c924"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"ITALIC"}],"text":"Вот и сложная формула, стала в супер простой и понятной!","type":"unstyled","key":"5ha5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инерцию пока что просто прибавим, а само вычисление позже, так как её нужно высчитывать при drag&drop'е. Но так же тут нам нужно инерцию занулить при очень маленьких значениях (просто, чтобы не нагружать пк линшними вычислениями) и умножать на 0.96 (можно самим подкрутить), чтобы скорость на каждом кадре постепенно гасилась.","type":"unstyled","key":"de4d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Drag&Drop:","type":"header-three","key":"2ev0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим дальше к взаимодействию с планетами! Здесь drag&drop будет реализовано скорее как в библиотеках с анимациями, так как Drag & Drop API немного не удобен из-за ghost image'а, ограничений и менее плавному перетаскиванию.","type":"unstyled","key":"e0vf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":7,"style":"BOLD"}],"text":"Первое handleMouseMove - это функция, которая будет вызываться при изменении позиции мыши. Здесь есть","type":"unstyled","key":"69k94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const angle = getAngle(e.clientX, e.clientY);","type":"blockquote","key":"dlt3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберём сразу функцию getAngle (e.clientX, e.clientY - позиция курсора вашей мыши).","type":"unstyled","key":"dd7uf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"getAngle - это функция, которая будет вычислять угол на который нужно повернуть объект, относительно горизонтальной оси координат, для наглядности приведу пример:","type":"unstyled","key":"6j07d"},{"data":{"image":{"id":"6a64d83fbee7b0779cdd5ed4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как работает функция getAngle","type":"atomic:image","key":"6mk0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Горизонталь можете считать просто ось Ox, наш элемент стоит изначально горизонтально (помечен чёрным цветом), после поворота, он смотри на курсор и нам по сути нужно найти угол, на который был повёрнут","type":"unstyled","key":"e333b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем нам нужно поворачивать какой-то контейнер? Дело в том, что у каждой планеты есть свой контейнер:","type":"unstyled","key":"e3u3g"},{"data":{"image":{"id":"6a64d83fd94d33380de4c446"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как выглядит контейнер в HTML","type":"atomic:image","key":"2f31l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поворачивая этот контейнер, мы поворачиваем и планету, так как наша планета внутри (по DOM-дереву) этого контейнера, просто стоит в её левой части, вот как-то так:","type":"unstyled","key":"72kk4"},{"data":{"image":{"id":"6a64d83f8881aa29b3656559"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Позиция планеты, как в HTML","type":"atomic:image","key":"6659q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В целом это всё что делает эта функция. Сам угол на который нужно повернуть находится через 2 катета, которые получаем через как вектора от центра объекта к курсору:","type":"unstyled","key":"77mhc"},{"data":{"image":{"id":"6a64d83f7e26e1158ff33798"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вычисление альфа через тангенс","type":"atomic:image","key":"fi6jk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и чтобы найти сам угол используем Math.atan2(y, x) - он вычисляет арктангенс (Тангенс это как раз deltaY/deltaX), арктангенс отдаёт значение в радианах, мы их переведём в градусы по формуле:","type":"unstyled","key":"7oh5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(Радианы*180)/PI = Градусы","type":"unstyled","key":"419et"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом с функцией getAngle покончили.","type":"unstyled","key":"86br6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":18,"style":"BOLD"}],"text":"Далее продолжим с handleMouseMove и инерцией, чтобы вычислить скорость броска, мы просто вычисляем разницу между курсором и предыдущим кадром и берём только 12%, чтобы планета не улетала слишком далеко.","type":"unstyled","key":"9729b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Напомню, что само добавление градусов и постепенное уменьшение инерции у нас находится в функции animate.","type":"unstyled","key":"dte3j"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":17,"offset":80}],"inlineStyleRanges":[],"text":"Остальное вроде бы по коду понятно, если будут вопросы можете задавать на почту vaironfop@Mail.ru или в телеграмм-канале, так как на сайте на данный момент нет комментариев.","type":"unstyled","key":"fuf2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, чтобы всё завершить сделаем стили Planet.module.css:","type":"unstyled","key":"2qi16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".orbitInner {\n position: absolute;\n \n border-radius: 50%;\n \n background-repeat: no-repeat;\n background-size: cover;\n \n display: flex;\n align-items: center;\n justify-content: center;\n \n pointer-events: none;\n \n will-change: transform;\n}\n \n.picker {\n position: absolute;\n \n top: 50%;\n left: 50%;\n \n width: 50%;\n height: 1px;\n \n transform-origin: left center;\n \n will-change: transform, filter;\n \n pointer-events: none;\n}\n \n.dragging {\n transition: none;\n}\n \n.innerOrbitCircle {\n position: absolute;\n \n right: 0;\n top: 50%;\n \n transform: translateY(-50%);\n \n border-radius: 50%;\n \n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n \n cursor: grab;\n \n pointer-events: auto;\n \n transition: transform 0.2s ease, filter 0.3s ease;\n \n filter: brightness(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));\n \n backface-visibility: hidden;\n \n transform-style: preserve-3d;\n \n animation: planetFloat 5s ease-in-out infinite;\n}\n \n.innerOrbitCircle:hover {\n filter: brightness(1.1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.7));\n}\n \n.innerOrbitCircle:active {\n cursor: grabbing;\n}\n \n@keyframes planetFloat {\n 0% {\n translate: 0 0;\n }\n \n 50% {\n translate: 0 -4px;\n }\n \n 100% {\n translate: 0 0;\n }\n}","type":"blockquote","key":"4nd7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут добавлена небольшая анимация, что планеты немного “плавают” и при наведении на планеты они светятся. CSS я сильно не разбираю, так как иначе эта была бы статья про позиционирование элементов, ну и особо интересного здесь ничего нет.","type":"unstyled","key":"6tnaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Финальная часть","type":"header-three","key":"t1s9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всё, осталось вывести планеты в App.tsx","type":"unstyled","key":"1css7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { PlanetSystem } from \"./components/PlanetSystem/PlanetSystem\"\n \nfunction App() {\n \n return (\n

\n \n

\n )\n}\n \nexport default App","type":"blockquote","key":"b5g1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверяем и видим:","type":"unstyled","key":"eomua"},{"data":{"image":{"id":"6a64d83f63038b474659c3e9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляю!\n","type":"atomic:image","key":"4hf4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо большое за то, что посмотрели статью, надеюсь вы смогли вынести для себя что-то полезное. Этот код легко улучшить, добавить свои плюшки по типу перехода на разные орбиты, при клике на планету выводить что-то и тому подобное. Но главное что здесь было это работа с анимацией, нахождение угла, drag&drop и всякие интересные штуки по типу работы анимаций на разных устройствах.","type":"unstyled","key":"auhsi"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":21,"offset":141}],"inlineStyleRanges":[],"text":"Если вам понравилась такая статья, вы планируете улучшаться в веб-разработке и вам интересно, что происходит в ней, то можете подписаться на телеграм-канал WEBCOS","type":"unstyled","key":"ahfui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Успехов в дальнейших проектах! <3","type":"unstyled","key":"fhr86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"m71a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ZJnHiiVZVf0WKQH9xhIn"}],"entityMap":{"0":{"data":{"url":"https://webcos.ru/blog/2-kak-sdelat-vrashchaiushchiesia-planety-vokrug-svoei-orbiti"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://github.com/W3bReactor/webcos-restart","url":"https://github.com/W3bReactor/webcos-restart"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://stackblitz.com/edit/vitejs-vite-gc8qzgym?file=package.json","url":"https://stackblitz.com/edit/vitejs-vite-gc8qzgym?file=package.json"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://disk.yandex.ru/d/ENblGxTcwEp2Eg","url":"https://disk.yandex.ru/d/ENblGxTcwEp2Eg"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"mailto:vaironfop@Mail.ru","url":"mailto:vaironfop@Mail.ru"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://t.me/webcostech","url":"https://t.me/webcostech"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}