WebツールのPhotopeaで、現状はPhotoshopでも作成できないWebPアニメーションを簡単に作成する・・・その3です。
以下も参考にしてください。
PhotopeaでWebPアニメーションを簡単に作成(その3)2022/05/15●
PhotopeaでWebPアニメーションを簡単に作成(その2)2022/05/07●
PhotopeaでWebPアニメーションを簡単に作成 2022/05/06●
取りあえず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アニメ
ブラウザーにドラッグすると再生できますが、普通に埋め込むと再生されません??? 設定(HTML)を学ばないと・・・。