0Pricing
Sveltejs Academy · レッスン

SVGパスのtransition:draw

drawトランジションでSVGの線を徐々にアニメーションさせます。

「SVGパスのtransition:draw」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これは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>

stroke が必須

パスには表示可能な stroke が必要です。塗りつぶしだけのパスは描画できません。

デュレーションとイージング

他のトランジションと同様に、duration、delay、easing を受け取ります。

使用例

ロゴの表示、署名のアニメーション、数学的な図形の描画、インフォグラフィックの導入などに使えます。

Fade との組み合わせ

入場と退場で異なる動きにするには、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 には何が必要ですか？

復習

stroke が設定された SVG パスに transition:draw を使用して、ベクターグラフィックを徐々に描画するアニメーションを作成します。

よくある質問

「SVGパスのtransition:draw」レッスンは無料ですか？

はい。「SVGパスのtransition:draw」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「SVGパスのtransition:draw」で何を学びますか？

drawトランジションでSVGの線を徐々にアニメーションさせます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「SVGパスのtransition:draw」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. transition:fadeとtransition:fly
  2. トランジションのパラメーター：duration、delay、easing
  3. 非対称トランジションのin:とout:
  4. SVGパスのtransition:draw
← Sveltejs Academyに戻る