⌛️ 🙏🏿 🌐 Canvas Indicator-AjaxLoad.gifの代替 🧗🏼 ▪️ 🍔

多くの場合、たとえば、AJAXを介してデータを送受信するときにプロセスインジケータを使用します。

フォームデータをサーバーに送信するボタンをクリックすると、同じインジケーターが内部に表示されることに戸惑いました。最初は背景はしっかりしていましたが、デザイナーはいつでも別の背景に置き換えることも、グラデーションを作成することもできました。

状況ごとに特別なGIFを作成するのは非常に愚かなことです。したがって、正しい解決策はCanvasを使用することです。

最初の数分で、このJavaScriptモジュールに出会いました。このモジュールを使用すると、少なくともこのようなインジケーターを生成できます。

しかし、これは問題を解決しませんでした、もちろん技術的な側面からではなく、設計的な側面から。これらの問題に対処する人は、スティックは輪になってはいけないと主張したが、次のようにした。

最初、このライブラリに出会いましたが、使用する予定さえなかった多くの機能を実装しています。検索を続行する必要がありました。

結局、私の問題をほとんど解決した1つのエントリに出会いました。

不要なものを削除し、必要なものを追加して、喜んで解決策をあなたと共有します。

使用例。適切な場所に、canvasタグを配置します。

<canvas id="loader"></canvas>

CanvasIndicatorクラスのインスタンスを作成します。

 new CanvasIndicator(document.getElementById("loader"),{ bars:11, innerRadius:4, size:[2,5], rgb:[255,255,255], fps:10 });

ご覧のとおり、CanvasIndicatorコンストラクターには2つのパラメーターがあります。最初のパラメーターは、実際にはアクションが実際に行われるキャンバスです。 2番目のパラメーターはオプションです-これは、プロパティがインジケーター構成であるオブジェクトです。

プロパティの詳細：

バー -ブロック数

innerRadius-内側半径

size-最初の要素がブロックの幅で、2番目の要素がその高さである配列

rgb-インジケータの色。3つの要素の配列によって設定されます。赤、緑、青-それぞれ

fps -1秒あたりのフレーム数。値が大きいほど、インジケーターの回転が速くなります

まあ、CanvasIndicator.jsライブラリのコード

 function CanvasIndicator(el, opt) { this.ctx = el.getContext("2d"); this.currentOffset = 0; var defaults = { bars: 11, innerRadius: 4, size: [2, 5], rgb: [255, 255, 255], fps: 10 } if (typeof(opt) == 'object') { defaults.bars = opt.bars ? opt.bars : defaults.bars; defaults.innerRadius = opt.innerRadius ? opt.innerRadius : defaults.innerRadius; defaults.size = opt.size ? opt.size : defaults.size; defaults.rgb = opt.rgb ? opt.rgb : defaults.rgb; defaults.fps = opt.fps ? opt.fps : defaults.fps; } this.opt = defaults; this.w = this.opt.size[1] + this.opt.innerRadius; el.setAttribute("width", this.w * 2); el.setAttribute("height", this.w * 2); (function nextAnimation(obj) { obj.currentOffset = (obj.currentOffset + 1) % obj.opt.bars; obj.draw(obj.currentOffset); setTimeout(function () { nextAnimation(obj); }, 1000 / obj.opt.fps); })(this); } CanvasIndicator.prototype.makeRGBA = function () { return "rgba(" + [].slice.call(arguments, 0).join(",") + ")"; } CanvasIndicator.prototype.drawBlock = function (barNo) { this.ctx.fillStyle = this.makeRGBA(this.opt.rgb[0], this.opt.rgb[1], this.opt.rgb[2], (this.opt.bars + 1 - barNo) / (this.opt.bars + 1)); this.ctx.fillRect(-this.opt.size[0] / 2, 0, this.opt.size[0], this.opt.size[1]); } CanvasIndicator.prototype.calculatePosition = function (barNo) { angle = 2 * barNo * Math.PI / this.opt.bars; return { y: (this.opt.innerRadius * Math.cos(-angle)), x: (this.opt.innerRadius * Math.sin(-angle)), angle: angle }; } CanvasIndicator.prototype.draw = function (offset) { this.clearFrame(); this.ctx.save(); this.ctx.translate(this.w, this.w); for (var i = 0; i < this.opt.bars; i++) { var curbar = (offset + i) % this.opt.bars, pos = this.calculatePosition(curbar); this.ctx.save(); this.ctx.translate(pos.x, pos.y); this.ctx.rotate(pos.angle); this.drawBlock(i); this.ctx.restore(); } this.ctx.restore(); } CanvasIndicator.prototype.clearFrame = function () { this.ctx.clearRect(0, 0, this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight); }

こちらの例をご覧ください。

ここからライブラリをダウンロードできます。

Canvas Indicator-AjaxLoad.gifの代替

More articles: