アニメーションサンプル

含まれるもの

• 4 つの 480 x 480 アニメーション例。Position、Size、Opacity、Mixed のボードとして配置されています。
• 位置アニメーション。キー設定された X/Y 変更で、ウィジェットをある場所から別の場所へ移動します。
• サイズアニメーション。キー設定された W/H 変更で、ウィジェットの幅と高さを調整します。
• 不透明度アニメーション。時間に沿ってブレンド透明度を変え、フェード系の効果を作ります。
• 複合アニメーション。1 つのウィジェット上で複数のアニメーショントラックを組み合わせます。
• Play Animation ボタン。各例に 1 つずつあり、それぞれのタイムラインを UI から実行できます。
• タイムライン/キーフレームエディタのプレビュー。トラックとキーフレームを含む実際のアニメーションモードを示します。
• PicoPixel ロゴのターゲット。各例でアニメーション対象のウィジェットとして使われます。
• 再利用できるビジュアルアイコン。位置、サイズ、不透明度、複合アニメーションのグラフィックを含みます。
• Roboto フォントアセット。カード見出し、キャプション、ボタンに使われます。

アセットの概要

アセットパネルでは、このプロジェクトがコンパクトな LVGL アニメーションリファレンスとして表示されます。

• 画像: 5。PicoPixel ロゴ、ロゴタイプ、小さなアニメーション概念アイコンを含みます。
• 色: 0。色はデザイン内に直接適用されています。
• フォント: 2、Roboto 22 と Roboto Bold 32。
• ウィジェット: 0。例をスクリーンオブジェクト、イベント、アニメーションタイムラインに集中させています。

表示される画像アセットには次のものがあります。

• 96x96 の位置/リサイズ系シアンアイコン。
• 96x96 の不透明度系シアン点線アイコン。
• 250x250 の PicoPixel ロゴ画像。
• 356x100 の PicoPixel ロゴタイプ画像。
• 96x96 のピンクの複合/位置系アイコン。

このアセットセットは意図的に小さく保たれています。動きは大量の画像フレームを保存するのではなく、キーフレーム化された LVGL オブジェクトプロパティから生まれます。

レイヤー構造

レイヤーパネルでは、プロジェクトがアニメーション種類ごとにグループ化されています。

• Position。Play Pos Animation、Pico Logo、Image 1、ラベルを含みます。
• Size。Play Size Animation、Pico Logo、Image 3、ラベルを含みます。
• Opacity。Play Opacity Animation、Pico Logo、Image 4、ラベルを含みます。
• Mixed。Play Mixed Animation、Pico Logo、ラベルを含みます。

各ボードは同じ学習パターンに従います。タイトルと説明でアニメーション種類を示し、PicoPixel ロゴがアニメーション対象になり、青いボタンで再生を開始します。

タイムラインとキーフレーム

このテンプレートの重要な点は、アニメーションがタイムラインで制御されていることです。アニメーションエディタのプレビューでは、左側に Position、Size、Opacity、Mixed などのアニメーション種類が並びます。タイムラインは選択されたアニメーション対象ウィジェットをプロパティトラックに展開します。

複合例のスクリーンショットでは、次のものが表示されています。

• 位置トラック。X と Y の値が分かれています。
• サイズトラック。W と H の値が分かれています。
• 不透明度トラック。% 値を持ちます。
• 複数のキーフレーム。時間上の異なる位置に配置されています。
• タイムラインのスクラブ。正確なタイムスタンプでアニメーションを確認できます。

これにより、この例は単純なトランジションより強力になります。正確な時刻に正確な値を設定してウィジェットを振り付けし、エクスポート前に結果をプレビューできます。

タイムラインアニメーションとフレームアニメーション

このテンプレートは、LVGL オブジェクトを時間に沿って移動、リサイズ、フェードするキーフレーム式ウィジェットアニメーションを扱います。これは、各フレームが別々のビットマップであるフレームベースのアニメーション画像とは異なります。

• 位置、幅、高さ、不透明度など、LVGL オブジェクトのプロパティをアニメーションしたい場合は、このテンプレートを使います。
• スピナー、スプライト風ローダー、イラストループのような事前レンダリング済みフレームシーケンスがある場合は、LVGL animated image を使います。
• ボタン、画面読み込み、ジェスチャー、その他のトリガーでこれらのアニメーションを再生したい場合は、event editor を使います。

どちらの方法も役に立ちます。UI モーションやトランジションでは、オブジェクトを編集可能なまま保ち、多数の画像フレームを保存せずに済むため、通常はキーフレームの方が適しています。

LVGL に向いている理由

LVGL は時間に沿ってオブジェクトプロパティを更新するのが得意で、PicoPixel のアニメーションモードはそれらの値を手書き C コードの中に隠すのではなく見える形にします。

• 位置キーフレームはオブジェクト座標に対応し、パネル、アイコン、カード、通知の移動に便利です。
• サイズキーフレームは幅と高さに対応し、展開コントロール、パルス効果、進捗の強調、フォーカス状態に便利です。
• 不透明度キーフレームはブレンド透明度に対応し、フェード、無効状態、表示の出現、注意喚起に便利です。
• 複合トラックは複数プロパティを組み合わせるため、1 つのウィジェットを 1 つのタイムラインとして移動、リサイズ、フェードできます。
• イベントでアニメーションを起動できるため、ボタンクリックでライブプレビューとエクスポート済み LVGL プロジェクトの両方でタイムラインを実行できます。
• プロジェクトは標準の LVGL 8.x UI コードとしてエクスポートされるため、ESP-IDF、Arduino、PlatformIO、STM32、Zephyr、その他の LVGL ビルドに統合できます。

ランタイムパターン

PicoPixel はアニメーション設定と再生アクションを生成できます。エクスポートしたプロジェクトを手で拡張する必要がある場合も、同じ概念は通常の LVGL アニメーションコードに対応します。アニメーションを初期化し、対象オブジェクトを選び、値とタイミングを設定し、開始します。

static void set_opa(void * obj, int32_t value)
{
    lv_obj_set_style_opa((lv_obj_t *)obj, (lv_opa_t)value, 0);
}

static void fade_logo(lv_obj_t * logo)
{
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, logo);
    lv_anim_set_values(&a, LV_OPA_COVER, LV_OPA_30);
    lv_anim_set_time(&a, 450);
    lv_anim_set_exec_cb(&a, set_opa);
    lv_anim_start(&a);
}

多くのテンプレート利用者にとっては、ビジュアルタイムラインの方が簡単です。PicoPixel でキーフレームを作成し、ボタンを Play Animation イベントアクションに接続してからエクスポートします。

カスタマイズ

無料の LVGL キーフレームアニメーションテンプレートとして使い、自分の UI に合わせてタイムラインを調整してください。

• PicoPixel ロゴを自分のアイコン、ステータスタイル、カード、モーダル、インジケーターに置き換えます。
• 位置キーフレームを変更して、パネルをスライドさせたり、通知を移動したり、操作対象へ注意を誘導したりします。
• サイズキーフレームを変更して、パルス、ボタンフィードバック、展開カード、フォーカス状態を作ります。
• 不透明度キーフレームを変更して、コンテンツをフェードインまたはフェードアウトします。
• 複合例で位置、サイズ、不透明度を組み合わせ、より豊かな UI モーションを作ります。
• 組み込み操作に対して十分素早く感じられるよう、タイミングを調整します。
• Clicked や Screen Loaded などのイベントを使い、適切なタイミングでアニメーションを再生します。
• メモリ制限のあるボードへ書き込む前に、画像サイズを控えめにし、未使用アセットを削除します。

自分のプロジェクトへのエクスポート

PicoPixel でテンプレートを開き、アニメーションタイムラインを確認し、重要なオブジェクト名を変更し、各ボードを Play Animation ボタンでプレビューします。その後、プロジェクトを LVGL C コードとしてエクスポートします。

ESP32 プロジェクトでは、通常の流れは次のとおりです。

1. 必要な動きに合うボードを選びます: Position、Size、Opacity、Mixed。
2. ロゴとラベルを自分の UI オブジェクトに置き換えます。
3. アニメーションタイムラインでキーフレーム、タイミング、イージングを調整します。
4. イベントエディタでトリガーを Play Animation アクションに接続します。
5. PicoPixel UI を LVGL C としてエクスポートします。
6. エクスポートされたファイルを ESP-IDF、Arduino、または PlatformIO プロジェクトに追加します。
7. LVGL とディスプレイドライバの準備ができた後に ui_init() を呼び出します。

詳しくは、event editor guide と using PicoPixel templates のガイドを読んでください。

最適な用途

このテンプレートは、次のような明確な出発点が欲しい場合に適しています。

• LVGL キーフレームアニメーション例
• ESP32 UI モーションプロトタイプ
• タイムライン制御のウィジェットモーション
• ボタンで起動するアニメーション再生
• 位置、サイズ、不透明度アニメーションのテスト
• ローディング状態と進捗フィードバック
• 確認と注意喚起
• オンボーディング画面とインタラクティブデモ
• PicoPixel のビジュアルタイムラインが LVGL の挙動になる仕組みの学習