はじめに
PREVENTでUIデザイナーをしているべーでございます。
UIデザインで利用したFigma×Lottieを使ったアニメーションを作成した際につまづきながらもできたので共有したいと思います。
上記のようにボタンを押すとボタン内に緑の面が左端から右端にかけて伸びて完全に緑のボタンに変わったら、ふわっと元の白いボタンに戻るアニメーションを作成し、Lottieでエンジニアに共有したいと思います。
その際につまづいたことと、解決策を共有したいと思います。
Lottieアニメーションの作り方
Lottieアニメーションの作り方は他の方がまとめられているので、ここでは割愛します！
私が参考にしたサイトを掲載しておきます！
躓いたこと
①「フレーム」で設定した角丸がなくなっている
②緑色ボタンから最初の白色ボタンに元にもどる動作がなくなっている
解決策
①「フレーム」で設定した角丸がなくなっている
「フレーム」を使った角丸だと反映がされないため、「マスクとして使用」やフレーム内の要素に角丸をつけることで解消しました。
②緑色ボタンから最初の白色ボタンに元にもどる動作がなくなっている
おそらくフレーム2から1に元にもどるアニメーションは反映がされないため、フレーム3をつくり、初期状態のフレームを作ることで解消しました。
さいごに
いかがでしたでしょうか？
Figma×Lottieのアニメーションが少しでもでも使えるようになれれば幸いです！
PREVENTのデザイナー中心の記事はnoteでも投稿しています！
ぜひご覧ください！
Discussion