SVG を使用してスケッチ アニメーションをプリロードするクールなページを生成する方法effect_html/css_WEB-ITnose

オンライン デモ

ローカル ダウンロード

1 SVG の概要

スケーラブル ベクター グラフィックスは、拡張マークアップ言語 (標準汎用マークアップ言語のサブセット) に基づいており、2 次元のベクター グラフィックスを記述するために使用されます。グラフィック形式。これは World Wide Web Consortium によって開発され、オープン スタンダードです。

2 SVG の特徴

他の画像形式 (JPEG や GIF など) と比較して、SVG を使用する利点は次のとおりです:

SVG 画像はテキスト エディターで作成および変更できます

SVG 画像は検索、インデックス付けが可能です、スクリプト化または圧縮

SVG はスケーラブルです

SVG 画像はどの解像度でも高品質で印刷できます

SVG は画質を損なうことなく拡大できます

3 つのブラウザをサポート

Internet Explorer 9、Firefox、Opera、Chromeおよび Safari はインライン SVG をサポートします。 Internet Explorer 8 以前では、Adobe SVG Viewer をインストールすることで SVG をサポートできます。

4 つの SVG タグ

SVG コードは、開始タグ で始まります。これがルート要素です。幅と高さのプロパティは、この SVG ドキュメントの幅と高さを設定します。 version 属性は使用される SVG バージョンを定義し、xmlns 属性は SVG 名前空間を定義します。

5

2) SVG アニメーションとスケッチの原理

     <svg version="1.1"    xmlns="http://www.w3.org/2000/svg"    viewBox = "0 0 200 100">    <!--    fill属性是否填充    stroke为绘制，颜色#AAAAAA    stroke-width为绘制线的粗细    d是具体数据，这里看到的数据代表了坐标，以及折线等等，可以使用工具生成    -->    <path fill="none"    stroke = "#AAA"    stroke-width = "2"    d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"    />    </svg>

stroking-dasharray は、生成される線分の長さと、線分と線分の間のギャップを定義します。それには、2 つのパラメータが含まれます

ストローク-dashoffset が定義します。開始位置 レンダリングにより線分が生成されます

関連コース: SVG によって実装されたスケッチ アニメーション シミュレーション効果と原理

3) CSS3 を使用してスケッチ アニメーション効果を実現します

stroke-dasharray = "100 10"  stroke-dashoffset = "0"

関連コース: CSS3 を使用してスケッチ アニメーション効果を実現します

4) Javascript を使用してアニメーション効果のパラメータを調整します

     /*定义keyframe动画*/    /* 添加动画到path元素 */    .path{    stroke-dasharray: 265.07;    stroke-dashoffset: 265.07;    animation: dash 3s linear infinite;    /* 支持chrome */    -webkit-animation: dash 3s linear infinite;    }    @keyframes dash{    from{    stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */    }    to{    stroke-dashoffset: 0;    }    }    /* 支持chrome浏览器 */    @-webkit-keyframes dash{    from{    stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */    }    to{    stroke-dashoffset: 0;    }    }

ここでは主に、アニメーションを生成するための初期化メソッドとアニメーション描画メソッド window.requestAnimationFrame(draw);

を定義します。

関連コース Javascript を使用してスケッチ アニメーション効果を実現します

5) 元の画像として Geek レーベルのロゴを選択し、座標パラメータは Inkscape ツールで生成されます。

アニメーション描画プログラムを実行すると、各線が設定された方法で描画され、プリロードされた非常にクールなアニメーションが表示されます。

完全な効果を見るには、ライトビデオコースにアクセスしてください: JavaScript を使用してオタクタグロゴのスケッチアニメーション効果を生成します