소개

로드에 시간이 걸리는 콘텐츠의 경우, 오류가 아니라 로드 중이라는 것을 사용자에게 알리기 때문에 로딩 화면 (스플래시 화면)을 준비하는 것이 자주 있을까 생각합니다.

gif 애니메이션으로 의도를 전하는 것도 좋다고 생각합니다만, 할 수 있는 것이라면 그 로드 상황을 맞추어 표시시키면, 보다 친절할까 생각합니다.

이번에는 Canvas를 사용하여 간단한 3 종류의 로딩 화면을 만들려고했습니다. 3종류와는 간단하게 생각할 수 있는 것입니다만, 기본적으로는 이러한 응용으로 다양한 로딩 화면을 작성할 수 있을까 생각합니다.

실제 움직임은 ↓ 페이지에서 확인할 수 있습니다
h tp : //네코네코 완완. 기주 b. 이오/그래도/칸ゔぁs/ぉ아아 g/

사용한 라이브러리

preloadJS

CreateJS 모듈 중 하나로 다양한 파일의 로딩 속도를 얻을 수 있습니다.
※또한 여기에서는 사용하고 있지 않습니다만, 적어도 화상만이라면 imagesLoaded 라이브러리를 사용해도 같은 일은 할 수 있을까 생각합니다.

처리 절차

읽기로 계산하고 싶은 이미지를 포함하여 외부 파일 그룹을 정의하고 얻습니다.

· 단순히 소스 코드에 열거
· JSON 파일화
· 문서를 스캔하여 자동으로 생성 ... 등

그리기 함수 정의

preloadJS의 progress 이벤트를 설정 (파일이 읽혀질 때마다 발동)

progress 이벤트 내에서 읽기 속도를 전달하고 실행하는 드로잉 함수 설명

preloadJS 실행

샘플 코드

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();

세 가지 로딩 화면

사각형 애니메이션

막대 그래프와 같이 로딩 비율에 따라 사각형을 늘리십시오.

직사각형 사이즈를 Canvas 화면 전체에 맞추는 것으로 임팩트가 있는 표현도

직사각형이 아닌 이미지를 사용하여 풍부한 표현도

구현 아이디어

A : 가로/세로 크기를로드 속도에 따라 늘리거나 늘리십시오

B: 처음부터 가로·세로의 최대 사이즈를 확보해, Canvas의 영역외에 배치한다. 로딩 속도에 따라 Canvas로 밀어 넣습니다

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);
}

원형 애니메이션

원을 그리듯이 빙글빙글 돌린다

원형 차트를 그리기 위해 채우는 면적을 점점 늘립니다

구현 아이디어

context.arc ()의 startAngle, endAngle에 소수점을 곱한다 (알기 어렵다 ...)

원형 차트 스타일로 만들려면 context.moveTo ()로 시작점을 지정해야합니다

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 ()을 실행 한 후 애니메이션을 만들려는 그리기를 정의합니다

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 관련 기사

Canvas 애니메이션의 요점

Canvas 이벤트 조작 요약

Canvas로 원형 (거의)을 마우스 오버로 잡아 보자.