JavaScriptでアニメーションFaviconローダーを作成する方法
ファビコン オンラインブランディングの重要な部分です 視覚的な手がかりを与える ユーザーに、そして彼らを助けます あなたのサイトを区別する 他人から。ほとんどのfaviconは静的ですが、 アニメのお気に入りを作成する 同様に.
絶えず動いているファビコンは、ほとんどのユーザーにとって確かに迷惑であり、またアクセシビリティにも悪影響を及ぼします。 ユーザーアクションまたはバックグラウンドイベントに応答して, ページロードなど、 追加の視覚情報を提供する-したがって、ユーザーエクスペリエンスを向上させる.
この記事では、作成方法を説明します。 HTMLキャンバス内のアニメーション循環ローダー, そしてどのようにあなたはそれをfaviconとして使うことができますか。あ アニメーションファビコンローダー に最適なツールです アクションの進行状況を視覚化する ファイルのアップロードや画像処理など、ページ上で実行されます。あなたは見てみることができます このチュートリアルに属するデモ に Github 同様に.
1.を作成します
まず、する必要があります キャンバスアニメーションを作成する それ 全円を描き、合計で100パーセント （これは弧を大きくする必要があるときに重要になります）.
キャンバスには標準のファビコンサイズ、16 * 16ピクセルを使用しています。あなたが望むならあなたはそれより大きいサイズを使うことができます、しかしキャンバスイメージが 16まで縮小2 ピクセル領域 それがfaviconとして適用されるとき.
2.確認してください
の中 onload（） イベントハンドラ キャンバス要素の参照を取得します [履歴書]を使って querySelector（） 方法、および参照 その2D描画コンテキストオブジェクト [ctx]の助けを借りて getContext（） 方法.
onload = function（）cv = document.querySelector（ '＃cvl'）、ctx = cv.getContext（ '2d'）; if（!! ctx）/ *…* /;
私達はまた点検する必要があります キャンバスが UA 描画コンテキストオブジェクトを確認することによってctx] 未定義ではない. 私たちは置きます ロードイベントに属するすべてのコード これに もし 調子.
3.初期変数を作成します
作りましょう さらに3つのグローバル変数, の のために 円弧の開始角度, tc のために のID setInterval（） タイマー, そして pct のために 同じタイマーのパーセント値. コード tc = pct = 0 として0を割り当てる 初期値 のために tc そして pct 変数.
onload = function（）cv = document.querySelector（ '＃cvl'）、ctx = cv.getContext（ '2d'）; if（!! ctx）s = 1.5 * Math.PI、tc = pct = 0; ;;
どのようにの価値を示すために の 計算された、私はすぐに説明しましょう 円弧角 作業.
円弧角
の 仰角 （円弧を定義する2つの光線のなす角度） 円周の です 2π ラジアン, どこで ラジアン ラジアン単位の記号です。これは 四分円弧の角度 に等しい 0.5π ラジアン.
いつ ロードの進行状況を視覚化する, キャンバス上に円を描きたい 上から デフォルトの権利ではなく.
時計回りに進む （デフォルトの方向弧はキャンバスに描画されます） 正しい位置から, 一番のポイントは 4分の3後に達した, すなわちの角度で 1.5π ラジアン. したがって、私は変数を作成しました s = 1.5 * Math.PI 後で 円弧の開始角度を示します キャンバス上から描画する.
4.円を描く
描画コンテキストオブジェクトには、 lineWidth そして strokeStyle 円の性質 次のステップで描きます。の strokeStyle プロパティはその色を表します.
onload = function（）cv = document.querySelector（ '＃cvl'）、ctx = cv.getContext（ '2d'）; if（!! ctx）s = 1.5 * Math.PI、tc = pct = 0; ctx.lineWidth = 2。 ctx.strokeStyle = 'fuchsia'; ;;
円を描く
我々 クリックイベントハンドラを追加する ロードボタンに#lbtn] 60ミリ秒のsetIntervalタイマーを起動します。, それは円を描く責任がある関数を実行しますupdateLoader（）]円が完全に描かれるまで60msごと.
の setInterval（） 方法 タイマーIDを返す に割り当てられているタイマーを識別するため tc 変数.
onload = function（）cv = document.querySelector（ '＃cvl'）、ctx = cv.getContext（ '2d'）; if（!! ctx）s = 1.5 * Math.PI、tc = pct = 0、btn = document.querySelector（ '＃lbtn'）; ctx.lineWidth = 2。 ctx.strokeStyle = 'fuchsia'; btn.addEventListener（ 'クリック'、function（）tc = setInterval（updateLoader、60）;）; ;;
6.を作成します updateLoader（） カスタム機能
カスタムを作成する時が来ました updateLoader（） あるべき機能 によって呼ばれる setInterval（） 方法 ボタンがクリックされたとき（イベントが発生したとき）最初にコードをお見せしましょう、それから私達は説明と一緒に行くことができます.
関数updateLoader（）ctx.clearRect（0、0、16、16）; ctx.beginPath（）; ctx.arc（8、8、6、s、（pct * 2 * Math.PI / 100 + s））; ctx.stroke（）; if（pct === 100）clearInterval（tc）;戻るpct ++;
の clearRect（） 方法 キャンバスの矩形領域を消去します そのパラメータで定義されます。左上隅の（x、y）座標。の clearRect（0、0、16、16） ライン すべてを消去します 作成した16×16ピクセルのキャンバスに.
の beginPath（） 方法 新しいパスを作成します デッサンのため、そして ストローク（） 方法 その新しく作成されたパスに塗料.
の終わりに updateLoader（） 機能、 割合カウント[pct]は1ずつ増加します。, そして増分の前に私達は 100に等しいかどうかを確認. 100パーセントだと setInterval（） タイマー （タイマーIDで識別, tc） クリアされます の助けを借りて clearInterval（） 方法.
の最初の3つのパラメータ アーク（） 方法は 円弧の中心の（x、y）座標 そして その半径. 4番目と5番目のパラメータは 開始角度と終了角度 円弧の描画が開始および終了する位置.
ローダーサークルの始点はすでに決まっています。 の, そしてそれは すべての反復で同じ.
しかし終了角度は パーセントカウントで増加します, 我々は計算することができます 増分のサイズ 次のようにして。 1％（100のうち1の値）は 角度に相当 α 2のうちπ 円の中に （2π =全円周の角度）、それから同じことが次の式のように書くことができます。
1/100 = α/ 2π
方程式を整理すると：
α = 1 * 2π / 100 α = 2π/ 100
したがって、1％は角度2に相当しますπ/ 100円で。したがって、各パーセント増分中の終了角度は次のようになります。 2を掛けて計算πパーセント値で/ 100. その結果は に追加 の （スタート角度）, だからアークは 同じ開始位置から描画 毎回。これが我々が使用した理由です pct * 2 * Math.PI / 100 + s 上記のコードスニペットで終了角度を計算する式.
7.ファビコンを追加する
を配置しましょう ファビコンリンク要素 HTMLに 直接またはJavaScriptを介して.
の中に updateLoader（） 機能、まず私たち ファビコンを取得する を使用して querySelector（） メソッドに割り当て、それを 着く 変数。それから我々はする必要があります キャンバス画像をエクスポートする 円弧が描かれるたびに エンコードされた画像に を使用して toDataURL（） メソッド そのデータURIコンテンツをfaviconイメージとして割り当てる. これはアニメーション化されたfaviconを作成します。 キャンバスローダーと同じ.
onload = function（）cv = document.querySelector（ '＃cvl'）、ctx = cv.getContext（ '2d'）; if（!! ctx）s = 1.5 * Math.PI、tc = pct = 0、btn = document.querySelector（ '＃lbtn'）、lnk = document.querySelector（ 'link [rel = "icon"]'） ; ctx.lineWidth = 2。 ctx.strokeStyle = 'fuchsia'; btn.addEventListener（ 'クリック'、function（）tc = setInterval（updateLoader、60）;）; ;;関数updateLoader（）ctx.clearRect（0、0、16、16）; ctx.beginPath（）; ctx.arc（8、8、6、s、（pct * 2 * Math.PI / 100 + s））; ctx.stroke（）; lnk.href = cv.toDataURL（ 'image / png'）; if（pct === 100）clearTimeout（tc）;戻るpct ++;
あなたは完全なコードを見ることができます Githubで.
ボーナス：非同期イベントにローダーを使う
このキャンバスアニメーションを使用する必要があるとき ローディングアクションと組み合わせて Webページで、 updateLoader（） 関数 のイベントハンドラとして 進捗（） 行動の出来事.
例えば、私たちのJavaScriptはこのように変わるでしょう AJAXで：
onload = function（）cv = document.querySelector（ '＃cvl'）、ctx = cv.getContext（ '2d'）; if（!! ctx）s = 1.5 * Math.PI、lnk = document.querySelector（ 'link [rel = "icon"]'）; ctx.lineWidth = 2。 ctx.strokeStyle = 'fuchsia'; var xhr = new XMLHttpRequest（）; xhr.addEventListener（ 'progress'、updateLoader）; xhr.open（ 'GET'、 'https://xyz.com/abc'）; xhr.send（）; ;関数updateLoader（evt）ctx.clearRect（0、0、16、16）; ctx.beginPath（）; ctx.arc（8、8、6、s、（evt.loaded * 2 * Math.PI / evt.total + s））; ctx.stroke（）; lnk.href = cv.toDataURL（ 'image / png'）;
の中に アーク（） 方法は、パーセント値を置き換えます[pct] とともに ロード済み イベントのプロパティ-これは、ファイルのどれだけがロードされたかを示します。 100 使用 合計 ProgressEventのプロパティ, これは、ロードされる合計量を表します。.
あります いらない setInterval（） そのような場合、 進捗（） イベントは 自動的に発射 積込みが進むにつれて.
