Canvas에서 구현하는 간단한 로딩 화면 3 패턴
소개
로드에 시간이 걸리는 콘텐츠의 경우, 오류가 아니라 로드 중이라는 것을 사용자에게 알리기 때문에 로딩 화면 (스플래시 화면)을 준비하는 것이 자주 있을까 생각합니다.
gif 애니메이션으로 의도를 전하는 것도 좋다고 생각합니다만, 할 수 있는 것이라면 그 로드 상황을 맞추어 표시시키면, 보다 친절할까 생각합니다.
이번에는 Canvas를 사용하여 간단한 3 종류의 로딩 화면을 만들려고했습니다. 3종류와는 간단하게 생각할 수 있는 것입니다만, 기본적으로는 이러한 응용으로 다양한 로딩 화면을 작성할 수 있을까 생각합니다.
실제 움직임은 ↓ 페이지에서 확인할 수 있습니다
h tp : //네코네코 완완. 기주 b. 이오/그래도/칸ゔぁs/ぉ아아 g/
사용한 라이브러리
CreateJS 모듈 중 하나로 다양한 파일의 로딩 속도를 얻을 수 있습니다.
※또한 여기에서는 사용하고 있지 않습니다만, 적어도 화상만이라면 imagesLoaded 라이브러리를 사용해도 같은 일은 할 수 있을까 생각합니다.
처리 절차
· 단순히 소스 코드에 열거
· JSON 파일화
· 문서를 스캔하여 자동으로 생성 ... 등
샘플 코드
sample.js
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
/* 読み込みファイルの定義 */
var images = [
{src: 'img/ph01.jpg'},
{src: 'img/ph02.jpg'}
];
/**
* 描画関数の定義
* @param zero_point 0.01 ~ 1.00の値を渡す
*/
function draw(zero_point) {
var percentage = (zero_point * 100).toFixed(0); // 0 ~ 100%に変換
ctx.clearRect(0, 0, canvas.width, canvas.height);
// zero_point や percentageを使って描画する
// ...
}
/* preloadJSの定義 */
var preload = new createjs.LoadQueue();
/* 同時読み込み数の設定(デフォルトは1) */
preload.setMaxConnections(1);
/* progressイベント */
preload.on("progress", function(e) {
var zero_point = (e.progress).toFixed(2); // 小数点第二位まで 0.01 ~ 1.00
draw(zero_point); // 描画関数を実行
if (e.progress === 1) {} // 完了したら特定の処理を行うことも
});
/* 定義した外部ファイル群を読み込む。falseで実行を保留できる */
preload.loadManifest(images, false);
/* 保留にした場合の実行トリガー */
preload.load();
세 가지 로딩 화면
사각형 애니메이션
구현 아이디어
rect.js
function draw() {
var percentage = (zero_point * 100).toFixed(0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// メインの矩形描画
ctx.beginPath();
ctx.fillStyle = "#000000";
// A
ctx.fillRect(0, 0, percentage, 7);
// B
ctx.fillRect(0, canvas.height - (canvas.height * zero_point), canvas.width, canvas.height);
// テキスト
ctx.font = "18px 'MS Pゴシック'";
ctx.fillStyle = "#ffffff";
ctx.fillText(percentage + '%', 0, 40);
}
원형 애니메이션
구현 아이디어
circle.js
function draw() {
var percentage = (zero_point * 100).toFixed(0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 円周を描く
ctx.beginPath();
ctx.lineWidth = 5;
ctx.arc(70, 70, 60, Math.PI * 1.5, Math.PI * 2 * zero_point + Math.PI * 1.5, false);
ctx.stroke();
// 円グラフを描く
ctx.beginPath();
ctx.moveTo(70, 70);
ctx.lineWidth = 5;
ctx.arc(70, 70, 60, Math.PI * 1.5, Math.PI * 2 * zero_point + Math.PI * 1.5, false);
ctx.fill();
}
마스크 애니메이션
자르는 형태까지도 애니메이션을 시키면, 그리기 잔상이 더럽게 남아 버렸습니다...(chrome)
구현 아이디어
clip.js
function draw() {
var percentage = (zero_point * 100).toFixed(0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 切り抜く形を定義
ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI * 2, false);
ctx.stroke();
// クリップ実行
ctx.clip();
// ただの矩形だがクリッピングされて円形となる
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(0, canvas.height - (canvas.height * zero_point), canvas.width, canvas.height);
}
결론
로딩용의 애니메이션으로서 움직임을 작성해 보았습니다만, 간단한 인포 그래픽에도 사용할 수 있을 것 같습니다.
지금까지 게시한 Canvas 관련 기사
Reference
이 문제에 관하여(Canvas에서 구현하는 간단한 로딩 화면 3 패턴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nekoneko-wanwan/items/be099f0af4155f8a32b4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)