こんにちは
さとです
余白に関する話をしましたが
今回は、フレーム調整についての話です
LINEアニメーション（APNG）における１フレーム目は、とても重要です
１フレーム目が適切な画像でないという理由で、リジェクトもあるそうです
ガイドラインには、こう書かれています
アニメーションは、LINEのトーク画面を開いた直後や、トーク画面でスタンプをタップした時に動きます
1フレーム目には、静止画としての役割があります
アニメーションを再生していないときのトーク画面 アニメーションに対応していないLINEのバージョンや端末のトーク画面 LINEアプリ内のスタンプショップや、LINE STOREのプレビュー
LINEのアニメーションがどう再生されるのか、理解する必要があります
アニメーション作るぞと決めたときに、APNGテスト用につくったラフ画です
１２３４５６７８
と流れていくのが、通常のアニメーションですが、LINEではちょっと違います
再生が終わると、１フレーム目が表示されて止まります
つまり、視覚的にはこうなります
１２３４５６７８１
８に伝えたいことが表現されているのに、１で止まってしまいます
そこで、どうするかというと
順番を変えます
８１２３４５６７
として、APNGファイルを作成します
そうすると、視覚的にはこうなります
８１２３４５６７８
※仮にループ2回だったとしたら
８１２３４５６７８１２３４５６７８
となります
サンプル画像をこの並びでGIFアニ化してみました
トーク画面では、こんな感じになるはずです
ループなし
8フレーム【８１２３４５６７】
ディレイ １／８
※実際はループなしという設定ですが、BLOG用にループさせています
1フレーム目にチラッとオチが見えてしまうのですが、一瞬なので、そんなに気にしなくてもよいかと思います
それでも気になるという場合は、１フレーム目のディレイを小さくして、それにあわせて他のフレームを調整するといいのかなと…
私自身、ディレイ操作で申請したことがまだないので、現段階では保証できませんけどね
まぁ、たぶん大丈夫でしょう
【追記】
APNGファイルにしたアニメーションを、再生テストするには、Firefoxが推奨されています
ただし、Firefoxで再生した場合、再生終了時に１フレーム目に戻りません
もう一つ、再生テストする場所があります
アニメーション申請するところで、ファイルをアップローすると、小さい画面ですが動きます
でも、ここも同じく、1フレーム目に戻りません
チェックでは戻らないですけど、実際のスタンプは戻りますので、そこを考慮してください
ではでは
リンクバナーです