0Pricing
Sveltejs Academy · Урок

transition:draw для путей SVG

Последовательно анимируйте штрихи SVG с помощью перехода draw

«transition:draw для путей SVG» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.

Переход draw

Переход draw анимирует обводки контуров SVG, постепенно отображая их.

Импорт

Переход доступен в svelte/transition.

import { draw } from "svelte/transition";

Применение к контуру

Добавляйте его к элементу SVG <path> с обводкой.

<svg viewBox="0 0 100 100">
  {#if visible}
    <path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
  {/if}
</svg>

Требуется обводка

У контура должна быть видимая обводка. Контуры только с заливкой нельзя прорисовать.

Длительность и функция плавности

Как и другие переходы, этот переход принимает duration, delay и easing.

Варианты использования

Появление логотипов, анимация рукописных подписей, математические рисунки, вступления к инфографике.

Сочетание с затуханием

Используйте in:draw и out:fade, чтобы по-разному анимировать появление и исчезновение.

Вычисление длины

Переход использует getTotalLength() внутри. Сложные контуры анимируются естественно.

Анимация нескольких контуров

Последовательно прорисовывайте несколько контуров с помощью delay, создавая скоординированное появление.

{#each paths as p, i}
  <path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}

Производительность

На большинстве устройств анимация выполняется плавно; для очень длинных контуров на мобильных устройствах может потребоваться меньшая длительность.

Поддержка браузерами

Работает везде, где поддерживаются SVG и анимации CSS, то есть во всех современных браузерах.

Быстрая проверка

Что требуется для transition:draw?

Резюме

Используйте transition:draw для контуров SVG с обводкой, чтобы анимировать постепенную прорисовку векторной графики.

Часто задаваемые вопросы

Урок «transition:draw для путей SVG» бесплатный?

Да — полный текст урока «transition:draw для путей SVG» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.

Чему я научусь в уроке «transition:draw для путей SVG»?

Последовательно анимируйте штрихи SVG с помощью перехода draw Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Sveltejs Academy?

Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «transition:draw для путей SVG»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Sveltejs Academy?

Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. transition:fade и transition:fly
  2. Параметры перехода: duration delay easing
  3. in: и out: для асимметричных переходов
  4. transition:draw для путей SVG
← Назад к Sveltejs Academy