reactでlottieを動かす
jsonをimportできるようにする
以下のようにそれぞれのファイルを修正
code:asset_json.d.ts
declare module '@/assets/lottie/*.json' {
const value: string
export default value
}
code:tsconfig.json
{
}
code:webpack.config.ts
module: {
rules: [
{test: /\.tsx?$/, loader: 'ts-loader'},
{
test: /\.(json)$/,
type: 'asset/source',
},
],
},
Playerの導入
lottieFilesでアニメーションをファイルをエクスポートしようとすると.jsonか.lottie のどちらで吐き出すかを聞かれる https://gyazo.com/82333b5b505d61508e50059dc118c441
onEvent等のPropがなく、ref.current?.play() 等もうまく動かなかった
モーダルを開いて一瞬のあとにanimationをplayするようにしたかったので、autoplaypropsだけでは満たせなかった
lottie-reactの方を使用するとすんなり動いた
https://gyazo.com/0fd2ec52e6b6fd627974e9d0c07b7aa8