Canvas에서 구현하는 간단한 로딩 화면 3 패턴

소개



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

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로 원형 (거의)을 마우스 오버로 잡아 보자.
  • 좋은 웹페이지 즐겨찾기