(Плюс задание «Счастливый квест»)
В этой статье мы рассмотрим три мощных метода создания захватывающей анимации в Интернете без необходимости использования внешних библиотек.

Введение.
Веб-анимация – это использование движения и переходов для создания динамичного и привлекательного взаимодействия на веб-сайтах и ​​в веб-приложениях. Он включает в себя манипулирование визуальными элементами на веб-странице для передачи информации, улучшения взаимодействия с пользователем и общего улучшения пользовательского опыта.

Часто нет необходимости нагружать наши проекты всем весом библиотеки только для того, чтобы добавить к нашим компонентам простой анимационный эффект. Вместо этого мы можем засучить рукава и создать собственную анимацию.
Мы напишем простой счетчик, который найдет свое место практически в каждом веб-приложении, и с помощью этого упражнения найдем три уникальных способа его анимации.

Спиннеры загрузки – обычное явление в Интернете. Они обеспечивают визуальную обратную связь для пользователей во время загрузки или обработки контента. Хотя существует множество библиотек для создания индикаторов загрузки, понимание того, как создавать их с нуля, может оказаться полезным для веб-разработчиков.

  1. CSS-анимация
    . Анимация позволяет элементу постепенно менять один стиль на другой. Когда речь идет об анимации CSS, первое, что обычно приходит на ум, — это правило @keyframe.
    Этоправило в CSS используется для указания правила анимации. Анимация создается с использованием изменяемых стилей CSS. Во время анимации свойство CSS может меняться много раз.
    Пример:
    В этом примере мы создадим простой счетчик загрузки CSS. В этом примере мы просто определим ключевые кадры для вращения счетчика, создавая элегантную анимацию загрузки.
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #d62fba;
  width: 100px;
  height: 120px;
  animation: customSpin 1s linear infinite;
}

@keyframes customSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<body>
  <div class="loader"></div>
</body>

2.Масштабируемая векторная графика (SVG):
SVG специально разработан для Интернета и имеет ряд характеристик, которые делают его хорошо подходящим для использования в веб-приложениях и на веб-страницах. Также он идеально подходит для создания векторной графики, включая загрузку счетчиков. Вы можете проектировать и анимировать элементы SVG для создания уникальных и масштабируемых анимаций загрузки.
Пример:
Во-первых, нам нужно добавить <svg> корневой элемент документа SVG. ИТ-специалисты определяют контейнер для векторной графики.
Далее у нас есть два элемента <circle>: один представляет фоновый круг, а второй — анимированную часть загрузчика. Внутри второго <circle> находится элемент <animate>, используемый для создания анимации в SVG. Настраивая определенные атрибуты, мы можем настроить дизайн нашего счетчика. Посмотрите код ниже и скопируйте его, чтобы отобразить анимацию вращения:

<body>

  <svg
  width="100"
  height="120"
  viewBox="0 0 100 100"
  preserveAspectRatio="xMidYMid"
>
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="#f3f3f3"
    stroke-width="16"
    fill="none"
  ></circle>
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="#1ab83c"
    stroke-width="16"
    stroke-dasharray="251.2"
    stroke-dashoffset="0"
    fill="none"
  >

    <animate
      attributeName="stroke-dashoffset"
      from="251.2"
      to="0"
      dur="2s"
      repeatCount="indefinite"
    ></animate>
  </circle>
</svg>

</body>

В целом, этот SVG-код создает индикатор загрузки со статическим фоновым кругом и анимированным пунктирным граничным кругом. Анимация заставляет пунктирную границу круга выглядеть вращающейся, создавая эффект загрузки.

3. Манипулирование JavaScript и DOM.
Манипулирование DOM в javascript — это процесс взаимодействия с DOM API для изменения или модификации HTML-документа, который будет отображаться в веб-браузере.
Действительно ли вы понимаете основы и имеете четкое представление о том, что такое DOM?
Не волнуйтесь, это проще, чем вы думаете :)

Когда веб-страница загружается, браузер создает Dдокумент Oобъект Mмодель страницы. DOM означает объектную модель документа и может быть представлен как дерево элементов, созданное браузером. Манипулирование DOM — это взаимодействие JavaScript DOM API с целью модификации или изменения HTML-документа.
JavaScript позволяет использовать динамическую и интерактивную загрузку счетчиков. Манипулируя DOM и управляя свойствами CSS, вы можете создавать анимации загрузки с точным контролем.
Пример:
 Вот простой пример использования манипуляций с DOM в JavaScript для создания анимации счетчика загрузки. Он вращает элемент div с классом «spinner» в бесконечном цикле. Счетчик будет вращаться до тех пор, пока вы не закроете веб-страницу или не уйдете с нее.
После того, как вы добавите тег <script> в свой HTML-файл, вам необходимо определить функцию для анимации счетчика. Эта функция постоянно увеличивает угол поворота и обновляет стиль элемента для создания анимации. Он использует requestAnimationFrame для плавного рендеринга.

<script>
    const spinner = document.querySelector('.loader');
    let rotation = 0;
    function animateSpinner() {
      rotation += 10;
      spinner.style.transform = `rotate(${rotation}deg)`;
      requestAnimationFrame(animateSpinner);
    }
</script>

Вызовите функцию animateSpinner(), чтобы запустить анимацию. Это заставит загрузочный элемент непрерывно вращаться.

<script>
  // Call the animation function to start the spinner animation
  animateSpinner();
</script>

Выполнив эти два шага, вы получите функциональный индикатор загрузки на своей HTML-странице, используя манипуляции с DOM.

Вот и все! Мы успешно создали эту анимацию без необходимости использования внешних библиотек. Это демонстрирует, как с помощью JavaScript и CSS вы можете добавлять динамические элементы в свои веб-проекты, предоставляя вам больше контроля и гибкости в ваших проектах.

Этот простой пример дает основу для понимания методов анимации. Однако мир анимации предлагает широкий спектр возможностей. Вы можете исследовать и экспериментировать с различными свойствами, чтобы создавать уникальные и захватывающие анимации. Возможности безграничны, так что дайте волю своему творчеству.