11月, 2019 | 「な」のblog

SVGでローディングアニメーション

SVGはCSSアニメーションとほぼ同じようにしてアニメーションを設定できます。以下の例は丸の大きさが徐々に変わっていくローディングアニメーションです。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG</title>
  <style>
    svg {
      background-color: #f00;
    }

  #svg01 .loading01{
      animation: 1s infinite load01;
  }

  @keyframes load01 {
      0%,
      100%{ /* 1秒のとき */
          r: 3;
      }
      50%{ /* 0.5秒のとき */
          r: 10;
      }
  }

  #svg01 .loading02{
      animation: 1s infinite .2s load02;
  }

  @keyframes load02 {
      0%,
      100%{
          r: 3;
      }
      50%{
          r: 10;
      }
  }

  #svg01 .loading03{
      animation: 1s infinite .4s load03;
  }

  @keyframes load03 {
      0%,
      100%{
          r: 3;
      }
      50%{
          r: 10;
      }
  }
  </style>
</head>
 
<body>
<svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1">
    <circle cx="110" cy="150" r="10" class="loading01" fill="rgba(255,255,255,1)" />
    <circle cx="140" cy="150" r="10" class="loading02" fill="rgba(255,255,255,1)" />
    <circle cx="170" cy="150" r="10" class="loading03" fill="rgba(255,255,255,1)" />
</svg>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<!doctype html>

<html>

<head>

<style>

svg {

background-color: #f00;

}

#svg01 .loading01{

animation: 1s infinite load01;

}

@keyframes load01 {

0%,

100%{ /* 1秒のとき */

r: 3;

}

50%{ /* 0.5秒のとき */

r: 10;

}

#svg01 .loading02{

animation: 1s infinite .2s load02;

}

@keyframes load02 {

0%,

100%{

r: 3;

}

50%{

r: 10;

}

#svg01 .loading03{

animation: 1s infinite .4s load03;

}

@keyframes load03 {

0%,

100%{

r: 3;

}

50%{

r: 10;

}

</style>

</head>

<body>

</svg>

</body>

</html>

CSSのinfiniteは無限ループです。デュレーションの値（infiniteの後）を書くことで３つのアニメーションを少しずつずらしています。 SVGは特別にローディングアニメーシ […]

SVGについて

スマホの普及などにより再注目されているSVG形式について授業で習ったのでまとめます。 Illustratorで描いてSVGで保存すれば一応SVGファイルは作れますが、余分なコードがたくさん出てきます。なのでここでは直接テキストでHTMLファイルに記述していきます。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG</title>
  <style>
    svg {
      background-color: #ddd;
    }
   </style>
</head>
 
<body>
  <svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1">
   <defs><!-- symbolをdefsで囲むと画面に描画されない -->
      <symbol id="lamp"><!-- symbol要素で使いまわすことが簡単になる -->
        <circle cx="100" cy="200" r="40" />
      </symbol>
    </defs>
    <rect x="100" y="200" width="300" height="100" rx="50" ry="50" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="150" y="50" fill="rgba(255,255,0,1)" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="60" y="50" fill="rgba(0,0,255,1)" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="240" y="50" fill="rgba(255,0,0,1)" fill="#fff" stroke="#000" stroke-width="5" />
</svg>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!doctype html>

<html>

<head>

<style>

svg {

background-color: #ddd;

}

</style>

</head>

<body>

</symbol>

</defs>

</svg>

</body>

</html>

信号機を描くコードをサンプルとして載せました。ぞれぞれ解説します。 […]

y223xbi2によるPixabayからの画像 HTML5から新たに追加されたvideo要素について書いていこうと思います。音声と同様に動画ファイルにも様々な形式がありますが、モダンブラウザをカバーするにはいまのところmp4があればいいということが個人的に調べ検証する中でわかりました。私は動画編集が苦手で勉強中です。どうしてもPhotoshopを使い慣れてしまい、移行できずにいます。しかしPho […]

【HTML5】audio要素について

ひさしぶりの更新になってしまいました。個人的にHTML5から新たに追加されたaudio要素を使う機会があったのでまとめたいと思います。 audio要素は音声を再生するためのタグです。しかしブラウザによって再生可能なファイル形式が異なり、ひとつのファイル形式だけをsrc属性に書いても対応しきれないのが現状です。ただし、音声の場合は私が個人的に調べて検証した結果では、mp3形式とogg形式があればモ […]

SVGでローディングアニメーション

SVGについて

【HTML5】video要素について

【HTML5】audio要素について