WebツールのPhotopeaで、現状はPhotoshopでも作成できないWebPアニメーションを簡単に作成する・・・その3です。その1と2は以下を参照してください。
取りあえず1000×1000pixelの新規ファイルを作成します。
次にデフォルト登録されているグラデーションを任意選択し、放射状で塗りつぶします。
3つほどレイヤー別に作成したら、一番下の鍵マークをクリックしてロックを解除してからすべてのレイヤーを選択して・・・
フォルダーのアイコンをクリックしてグループ化します。フォルダー名は必ず［_a_］で始まるようにします。
次に640×480pixel程度の新規ファイルを作成し、1000×1000pixelで作成したファルダーをドラッグして埋め込みます。受け手ファイルのタグがブルー枠になったらShiftキーを押してマウスを放せばOKです。サイズが変更されずに受け手にフォルダーごと配置されます。
続けてフォルダーの複製を2つ作成し、それぞれのフォルダーの上2つのレイヤーの描画モードを［差の絶対値］とします。
あとは、2つめ、3つめのフォルダーのイメージが激変するように、それぞれのレイヤー位置を変更します。
640×480pixelに対して1000×1000pixelのデータを配置しているので、かなり思い切った調整が可能セです。
あとはGIFで書き出せば完了ですが、WebPでの書き出し結果もGIFと同等だったのでPNG（APNG）でも書き出してみました。個人的にはGIFの感じが面白いとおもいます。
GIFアニメ
WebPアニメ
PNG（APNG）アニメ
ブラウザーにドラッグすると再生できますが、普通に埋め込むと再生されません？？？ 設定（HTML）を学ばないと・・・。
