こんにちは！ゆかゆかです。
今日はAdaloのアプリ画面上にアニメーションを表示させる設定をしてみます。
アニメーションライブラリLottie
アニメーションの表示にはLottieを使います。
色々な海外っぽいアニメーションがあります。ぜひチェックしてみてください。
Free Lottie Animation Files, Tools & Plugins - LottieFiles
調べてみると、自分でもオリジナルのアニメーションができたりもするようです！
私はアニメーションを作れないので、上記公式サイトから無料のアニメーションを選んで設定してみます。
lottie アニメーションを選ぶ
私は無料のアニメーションからこちらを選んでみました。
気に入ったアニメーションを選択します。
右上の「Download」を選択し、「Lottie JSON」を選択します。
こちらのようなJSONファイルがダウンロードされます。
こちらのファイルは開いておいてください。
Adalo コンポーネント設定
コンポーネントはマーケットプレースからインストールをします。
- + マークを選択
- ADD COMPONENT を選択
- EXPLORE MARKETPLACE を選択
Lottieをインストールします。
InstalledのLottieを好きな場所に配置
LottieFiles JSON に先ほどダウンロードしたJSONファイルの中身をコピー＆ペーストします。
JSONファイルの中身をコピー＆ペーストすると、アニメーションが表示されます。
Lottieの設定としては、他に以下のようなOn/OFFできるようです。
- Loop animation?：アニメーションをループさせる
- Play animation in editor?：編集画面でアニメーションを表示させる
まとめ
簡単なアニメーション表示方法を試してみました。
クリック時のアクションも設定できるので、ボタンとして配置しても面白いですね。
参考になれば嬉しいです。
▼無料でも意外と使える Nocode開発ツール Adalo
