😍
SwiftUIでLottieFilesを使ってみた
🤔やってみたいこと
最近あれはどうやって作っているのだろうっていうアニメーションがLottieFilesではないかと思った。この記事を見て気づいた！
「くそか。。。」いや素敵すぎるアプリですね😍
早速参考にさせてもらっちゃうもんね🐈
🚀やってみたこと
俺ちゃんは早速技術調査して公式サイトを見つてけて対応してる技術を調べてみた。
対応している技術
- JavaScript
- React
- Vue.js
- Svelte
- SwiftUI
- Android xmlの方
対応している技術は限定されていそう。FlutterとReactNativeでは使えなさそう？
ReactNativeは無理だった😇
SwiftUIの経験が俺ちゃんはあるので試してみる。
パッケージを追加すると時間がかかるのが悩み😅
キャンセルしてまたやり直すと時間削減できた？
でもホワイトハウスを追加しないとダメみたい？
ここから素材を入手する。
回る猫ちゃんをゲット！
ワークスペースとやらに保存する必要があるらしい。
jsonファイルでダウンロードする。ファイル名は後でcat.jsonに変更して、SwiftUIのプロジェクト直下に配置した。
example
import DotLottieでモジュールを読み込む設定をして公式のサンプルをそのまま追加すれば素敵なアニメーションが作れます。
import SwiftUI
import DotLottie
struct ContentView: View {
var body: some View {
AnimationView()
}
}
struct AnimationView: View {
var body: some View {
DotLottieAnimation(
fileName: "cat",
config: AnimationConfig(
autoplay: true,
loop: true,
speed: 1.0
)
)
.view()
.frame(width: 200, height: 200)
}
}
#Preview {
ContentView()
}
可愛いですね💙💚
🙂最後に
友人は動くgif画像を個人アプリに使っていたりしましたが、LottieFilesを使うとまた違った世界を体験できるかもしれません。
ああFlutterにも対応したパッケージあったわwww
ReactNativeでも使う方法はあるようだな。。。
動いた....
iOS
Android
Discussion