See the Pen 9-2 PNGアニメーション(APNG) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね! 動きを実現する仕組み 仕組み ⇒ 1枚の動く画像 長所 ⇒ 透過が利用可能。GIFに比べて画質がきれい。オンラインジェネレーターなどの制作ツールで比較的簡単に制作できる。 短所 ⇒ IE,Edgeには非対応。※apng-canvas.jsで疑似的な対応は可能 オンラインサービス「Ezgif.com(https://ezgif.com)」を利用して制作。 パラパラ漫画のようにコマ送りで複数の画像を組み合わせてPNG形式のアニメーション画像をつくる。 作り方 ① 動かすコマを、画像制作ソフトを使ってコマ数分作る。 カンバスサイズは全てのコマで同じサイズにし、画像を少しずつ動かしてコマ数分を制作。 サンプル
![PNGアニメーション(APNG) | 動くWebデザインアイディア帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd481b542f4668064d48fef96e2b281f0dde405f/height=288;version=1;width=512/https%3A%2F%2Fcoco-factory.jp%2Fugokuweb%2Fwp-content%2Fuploads%2F2021%2F03%2Fsns_illust.jpg)