{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":102,"style":"ITALIC"},{"length":12,"offset":110,"style":"ITALIC"}],"text":"Привет друг ! В этой статье попробуем создать эффект падающих снежинок поверх веб-контента, используя React и HTML5 Canvas. Этот эффект добавит праздничное настроение твоему сайту или приложению \uD83C\uDF85. ","type":"unstyled","key":"1o300"},{"data":{"image":{"id":"677bcb9c938abc258382753a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const currentMonth = new Date().getMonth(); {currentMonth === 4 && }","type":"atomic:image","key":"48jpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С моими любыми комментариями в коде \uD83E\uDD2D.","type":"unstyled","key":"1j58h"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":3,"offset":24}],"inlineStyleRanges":[],"text":"Чего мы хотим добиться? тут \uD83E\uDD78.","type":"unstyled","key":"82ok7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"И так - поехали !\uD83D\uDEFC","type":"unstyled","key":"b712d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Создаём компоненту CircleCanvas","type":"header-three","key":"bfljs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":19,"style":"ITALIC"}],"text":"Создаём компоненту CircleCanvas.tsx и добавим в него следующий код:","type":"unstyled","key":"fvmgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Интерфейс снежинки","type":"header-three","key":"13s6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"interface Circle {\n x: number;\n y: number;\n radius: number;\n speedY: number;\n speedX: number;\n offsetX: number;\n}\n\nexport type Nullable = T | null;","type":"blockquote","key":"17ish"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот интерфейс описывает параметры одной снежинки. Мы будем использовать их для управления движением и анимацией.","type":"unstyled","key":"bl80n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Настройка Canvas","type":"header-three","key":"68bt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":43,"style":"ITALIC"}],"text":"Внутри нашего компонента создаем ссылку на canvas и функцию для автоматического изменения его размеров при изменении окна:","type":"unstyled","key":"15bv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"}],"text":"// Инициализация и обновление размеров canvas","type":"blockquote","key":"d904r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":271,"style":"ITALIC"},{"length":6,"offset":314,"style":"ITALIC"},{"length":6,"offset":366,"style":"ITALIC"},{"length":6,"offset":443,"style":"ITALIC"}],"text":"const canvasRef = useRef>(null);\n\nuseEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const context = canvas.getContext('2d');\n if (!context) return;\n\n const resizeCanvas = () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n };\n\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n\n return () => {\n window.removeEventListener('resize', resizeCanvas);\n };\n}, []);","type":"blockquote","key":"1ka4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Функция создания снежинки","type":"header-three","key":"4e5td"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждая снежинка создается со случайным положением, скоростью и размером:","type":"unstyled","key":"7719v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":61,"style":"ITALIC"},{"length":6,"offset":77,"style":"ITALIC"},{"length":4,"offset":183,"style":"ITALIC"},{"length":4,"offset":244,"style":"ITALIC"},{"length":4,"offset":303,"style":"ITALIC"}],"text":"const createCircle = (): Circle => {\n return {\n x: Math.random() * window.innerWidth, // случайная позиция по ширине\n y: -50, // начинаем выше экрана\n radius: Math.random() * 10 + 5, // радиус от 5 до 15\n speedY: Math.random() * 2 - 1, // скорость падения\n speedX: Math.random() * 2 - 1, // горизонтальная скорость (S-образное движение)\n offsetX: 0, // смещение по X для S-образного движения\n };\n};","type":"blockquote","key":"2qb1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Анимация снежинок","type":"header-three","key":"eerk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используем requestAnimationFrame для плавной анимации снежинок:","type":"unstyled","key":"btdpv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":413,"style":"ITALIC"},{"length":8,"offset":490,"style":"ITALIC"},{"length":4,"offset":586,"style":"ITALIC"},{"length":8,"offset":661,"style":"ITALIC"},{"length":8,"offset":747,"style":"ITALIC"},{"length":6,"offset":846,"style":"ITALIC"},{"length":9,"offset":896,"style":"ITALIC"},{"length":4,"offset":938,"style":"ITALIC"}],"text":"const animate = () => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const context = canvas.getContext('2d');\n if (!context) return;\n\n // Очищаем canvas\n context.clearRect(0, 0, canvas.width, canvas.height);\n\n // Обновляем и рисуем снежинки\n circles.current.forEach((circle) => {\n circle.y += circle.speedY;\n circle.offsetX += circle.speedX;\n circle.x += Math.sin(circle.offsetX / 50) * 2; // S-образное движение\n\n // Рисуем снежинку\n context.beginPath();\n context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);\n context.fillStyle = 'rgba(173,184,197,0.7)'; // Цвет снежинки\n context.fill();\n context.closePath();\n });\n\n // Удаляем снежинки, которые вышли за экран\n circles.current = circles.current.filter(circle => circle.y < window.innerHeight + 50);\n\n // Добавляем новую снежинку с некоторой вероятностью\n if (Math.random() < 0.02) {\n circles.current.push(createCircle());\n }\n\n // Продолжаем анимацию\n animationFrameId.current = requestAnimationFrame(animate);\n};","type":"blockquote","key":"d9lem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Запуск анимации","type":"header-three","key":"o45q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключаем анимацию при монтировании компонента:","type":"unstyled","key":"7p5pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useEffect(() => {\n animationFrameId.current = requestAnimationFrame(animate);\n\n return () => {\n if (animationFrameId.current) {\n cancelAnimationFrame(animationFrameId.current);\n }\n };\n}, []);","type":"blockquote","key":"do7rn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7. Рендер Canvas","type":"header-three","key":"6jii9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Canvas располагается поверх контента, не мешая пользователю взаимодействовать с остальной страницей:","type":"unstyled","key":"eee5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"72kd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8. Итоговый код","type":"header-three","key":"5f15h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":36,"style":"ITALIC"}],"text":"Теперь у вас есть готовый компонент CircleCanvas, который добавляет эффект снежинок:","type":"unstyled","key":"fo193"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":673,"style":"ITALIC"},{"length":6,"offset":720,"style":"ITALIC"},{"length":6,"offset":784,"style":"ITALIC"},{"length":6,"offset":869,"style":"ITALIC"},{"length":4,"offset":1018,"style":"ITALIC"},{"length":6,"offset":1034,"style":"ITALIC"},{"length":4,"offset":1093,"style":"ITALIC"},{"length":4,"offset":1137,"style":"ITALIC"},{"length":4,"offset":1180,"style":"ITALIC"},{"length":4,"offset":1642,"style":"ITALIC"},{"length":4,"offset":1773,"style":"ITALIC"},{"length":6,"offset":1988,"style":"ITALIC"},{"length":4,"offset":2027,"style":"ITALIC"}],"text":"import React, { useEffect, useRef } from 'react';\n\ninterface Circle {\n x: number;\n y: number;\n radius: number;\n speedY: number;\n speedX: number;\n offsetX: number;\n}\n\nexport type Nullable = T | null;\n\nexport const CircleCanvas: React.FC = () => {\n const canvasRef = useRef>(null);\n const circles = useRef([]);\n const animationFrameId = useRef>(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const context = canvas.getContext('2d');\n if (!context) return;\n\n const resizeCanvas = () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n };\n\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n\n return () => {\n window.removeEventListener('resize', resizeCanvas);\n };\n }, []);\n\n const createCircle = (): Circle => {\n return {\n x: Math.random() * window.innerWidth,\n y: -50,\n radius: Math.random() * 10 + 5,\n speedY: Math.random() * 2 - 1,\n speedX: Math.random() * 2 - 1,\n offsetX: 0,\n };\n };\n\n const animate = () => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const context = canvas.getContext('2d');\n if (!context) return;\n\n context.clearRect(0, 0, canvas.width, canvas.height);\n\n circles.current.forEach((circle) => {\n circle.y += circle.speedY;\n circle.offsetX += circle.speedX;\n circle.x += Math.sin(circle.offsetX / 50) * 2;\n\n context.beginPath();\n context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);\n context.fillStyle = 'rgba(173,184,197,0.7)';\n context.fill();\n context.closePath();\n });\n\n circles.current = circles.current.filter(circle => circle.y < window.innerHeight + 50);\n\n if (Math.random() < 0.02) {\n circles.current.push(createCircle());\n }\n\n animationFrameId.current = requestAnimationFrame(animate);\n };\n\n useEffect(() => {\n animationFrameId.current = requestAnimationFrame(animate);\n\n return () => {\n if (animationFrameId.current) {\n cancelAnimationFrame(animationFrameId.current);\n }\n };\n }, []);\n\n return (\n \n );\n};","type":"blockquote","key":"e9g8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":29,"style":"ITALIC"}],"text":"Теперь мы можем использовать CircleCanvas в любом месте нашего приложения! Да и вообще мы молодцы \uD83E\uDDF8!","type":"unstyled","key":"7gqtk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо за внимание! До Новых Встреч!\uD83E\uDD17\uD83E\uDD17\uD83E\uDD17","type":"unstyled","key":"1kulc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"PkMFpcl62Arh22KJ5ZAY"}],"entityMap":{"0":{"data":{"badSeoLink":"true","url":"https://dzen.ru/video/watch/677bcd84b96b121a4a5f83e2"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}