I.はじめに
こんにちは、みんな。インターフェースをデザインする際にはアニメーションの活用が欠かせませんが、今回はLVGLアニメーションの簡単な使い方を紹介します。著者はシミュレータ上でデモを実行します。LVGL のバージョン番号は 8.3.0 です。
2. アニメーションの紹介
LVGL でオブジェクトをアニメーション化するには、アニメーションを通じてアニメーション効果 (回転、スケーリング、スライドなど) を作成し、そのアニメーション効果をオブジェクトにアタッチします。
アニメーション設定に関わる重要なパラメータを以下に紹介します。
- exec_cb はアニメーション効果を設定します
たとえば、lv_obj_set_x を使用して、X 軸の動きをアニメーション化するための X 座標の値を設定します。同様のものには、lv_obj_set_y (y 座標の設定)、lv_obj_set_angle (角度の設定) などがあります。
- path_cb はアニメーション変更効果を設定します
次の組み込みパス関数があります。
lv_anim_path_linear リニア アニメーション
最後のステップでの lv_anim_path_step の変更
lv_anim_path_ease_in の起動が遅い
lv_anim_path_ease_out ついに遅くなりました
lv_anim_path_ease_in_out の最初と最後が遅い
lv_anim_path_overshoot が最終値を超えています
lv_anim_path_bounce は最終値から少し跳ね返ります (壁にぶつかるなど)
3. アニメーションアプリケーション
1. 回転アニメーション
アニメーションを使用する例として、回転アニメーションを設定してみましょう。上の写真を例として設定します。
①絵オブジェクトを作成する
②アニメーションオブジェクトの作成
③アニメーションパラメータを設定する
ここでは、exec_cb を回転の効果である lv_img_set_angle に設定し、次にアニメーションの長さを設定します。アニメーションの開始と終了は前のアニメーション効果、つまり角度を設定します。再生時間と遅延回復時間です。必要に応じて設定されます。
④アニメーションパスを設定する
⑤アニメーション開始
アニメーション効果を次の図に示します。
2.心拍アニメーション
ステップ 1 と同様に、メインのアニメーション効果は lv_img_set_zoom (ズーム) に設定されます。具体的なコードは次のとおりです。
アニメーション効果は次のようになります。
4. 結論
上記で紹介したのは単純なアニメーションの実装だけです. アプリケーションのシナリオや設計要件に応じてアニメーション効果を作成できます. 以上がこの共有の全内容です. 読んでいただきありがとうございます.
5. 参考文献
LVGL 公式マニュアル LVGL のドキュメントへようこそ! — LVGL ドキュメント
クリックして原文を読み、さらにエキサイティングなコンテンツを学びましょう~