【パリピ注意】LottieというアニメーションファイルをSTUDIOのノーコードで実装してみた

これは[no plan inc.の Advent Calendar 2023](https://qiita.com/advent-calendar/2023/noplan_inc)の11日目の記事です。


どもー、no plan inc.の[おかむー](https://twitter.com/okamu_ro)です。
LottieというアニメーションファイルをSTUDIOのノーコードで実装してみたので、
今回も知見を共有できればと思います！！

# この記事でわかること
- LottieアニメーションをSTUDIOで動かす方法がわかります

# 先に結論
- STUDIO(ノーコード)でこんな感じのパリピなアニメーションが爆速で入れられます
    - 中央上(ペンギンさん)
    - サイド下(踊っている人々)
![okamuro3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/bd3cee61-bd48-f034-0367-55173141ac43.gif)

# Lottieとは
> Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。LottieFilesはLottieの作成、編集、テスト、共同制作、配信を、これ以上なく簡単に行えるようにします。

https://lottiefiles.com/jp/what-is-lottie

# 2018年ぐらいからLottieでアニメーション実装したりしていました
- その時はまだ課題感が多かったイメージがあります

[【Swift, Firebase】究極の瞑想アプリを作った話](https://qiita.com/okamu_/items/a65ddf5c15787c0103ba)

![https___qiita-image-store.s3.amazonaws.com_0_62822_e7d61d63-dea6-0423-b320-6ef67b7390f0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/aa8208d7-4b1a-998c-a34b-63d085e02fa4.png)

# 実際に導入してみる
## 1.Lottieでアニメーションを選ぶ
- https://lottiefiles.com/ から検索してみます。とりあえず「party」と検索してみます
    - いろいろアニメーションが出てくると思うので「Download」をします
        - 無料プランではDownload数には制限があるみたいなので注意してください
![Screenshot 2023-12-06 at 3.01.36 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/c28f879f-87ae-8aee-cf51-953941c05d13.png)

- Download
![Screenshot 2023-12-06 at 3.03.23 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/61b68492-4360-9bd7-5e06-68776dd2db49.png)

- Downloadするフォルダを選択します
![Screenshot 2023-12-06 at 3.05.01 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/58f3ea4a-009c-b76a-5605-a00c1d0e3b3d.png)


## 2.アニメーションリンクをコピーする
- アニメーションの詳細ページに遷移すると思うので、ここから「Handoff & Embed」の右のタブをタップします
    - その「AssetLink」のところのリンクをコピーします
![Screenshot 2023-12-06 at 3.05.51 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/26d9a125-6d7a-d515-8f54-a205934db149.png)

## 3.STUDIOでLottieを入れる
- STUDIOの追加タブに「Lottie」が用意されています
![Screenshot 2023-12-06 at 3.09.25 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/04a603a8-764e-8fe9-caca-4e17546523b5.png)

- 今回は相対位置で真上と真下にいれます笑
![Screenshot 2023-12-06 at 3.09.45 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/aae4ff1d-24e9-8e9f-6b94-4ac8f44d2cc9.png)

- あとは軽く設定を行います
    - 私は「自動ループ」をonにしました
        - 詳細設定は以下の公式ブログが参考になりました
            - https://help.studio.design/ja/articles/8637241-lottie-%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%81%A8%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA




# まとめ
- パリピなLottieアニメーションをSTUDIOで動かせました！！

[https://www.okamu.ro](https://www.okamu.ro)


![okamuro3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/6b0f265a-0832-34a7-2fc5-e74ed87106e1.gif)


# no plan inc.で扱っているTechに関する様々なジャンルをアウトプットします!!


[![top.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/41177709-516f-0174-7cc4-c3052a311ac8.gif)](https://noplan-inc.com)



# no plan株式会社について

- no plan株式会社は **「テクノロジーの力でZEROから未来を創造する、精鋭クリエイター集団」** です。
- ブロックチェーン/AI技術をはじめとした、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援なども行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- [no plan株式会社について](https://noplan-inc.com)
- [no plan株式会社 | web3実績](https://noplan-inc.com/web3)
- [no plan株式会社 | ブログ一覧](https://noplan-inc.com/blog)
エンジニアの採用も積極的に行なっていますので、興味がある方は是非ご連絡ください！
- [CTOのDMはこちら](https://twitter.com/_serinuntius)