前回まで、APNGの概要を紹介しました。今回は実際にアニメーションPNGの作成についてご紹介できればと思います。 ですが、アニメーションGifのようにサクッと作れるものだと思っていたのですが、、、 まだまだ対応ブラウザが少ないため、ひと手間が必要みたいです。 フレームアニメーション画像素材の準備 まずは、アニメーションGifの作成と同じようにフレームアニメーション画像素材を準備します。 フレームアニメーション画像を作成できるツールはたくさんありますが、私はPhotoshopで作成してみました。 Photoshopメニューからウィンドウメニュー > タイムラインを選択、 下記のタイムラインパネルが表示されます。そのパネル内のフレームアニメーションを作成を選択します。 その後、以下のようなフレームごとの編集ができるウィンドウが表示されます。 今回はPhotohopでのフレームアニメーション作成
![[iOS 8] Safari 8 で対応したAPNG(アニメーションPNG)の作成方法 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/34de6d57437c5cfc77b749f99e4483a7a1702539/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F06%2Fios81.png)