LoLottieご存知ですか？
Airbnb公式サイト：https://airbnb.design/lottie/
簡単にいうと今までアニメーションを実装しようと思うと、HTMLやPHPでいろいろと複雑である程度専門知識が必要でしたが、Lottie(公式サイト: https://airbnb.design/lottie/)を利用することで手軽にアニメーションを動かせるんです。
動画のmovファイルや、GIFアニメーションのファイルサイズと比べると、格段に小さくて、サーバーに負担がかからない！そして、拡大縮小も自由にできる優れもの！
ロゴやイラストを製作して終わりでは勿体無い！
Lottieに出会ってから、HP製作も楽しくなり実装したくなりますね。
今後はLottieでどんな事ができるのか、作例などを踏まえ徐々にお伝えできればと思います。
今回は、Lottieの初記事なので簡単な説明からスタートしたいと思います。
Lottieで出力できる事、できない事
Lottieはとても便利ですが、できない事もまだあるんです。Lottieのアニメーションを作成する際は、自分がイメージしているアニメーションができるのか確認してくださいね。
今後のアップデートを期待しながら、今できる事で楽しみたいと思います。
Lottieでできること
単色で構成されたオブジェクト
パスのトリミング
不透明度、スケール、回転、背景を透過
Lottieでできないこと
グラデーション、エフェクト、エクスプレッション、マスク等
できないことはまだまだありますが、AdobeのAfter Effecctを使ってこんなこともできるんです。
でも、After Effectsを使いこなしすのは難しいし、ここまではアニメーションつけなくて良いの！という場合でも、Lottieで何種類か用意されているエフェクトがあるので、そこにイラスト入れれば簡単に自分で作ったイラストにアニメーションをつけられるのは嬉しい限りです
自分で作ったアイコンがちょっと動きのあるアイコンに変わるのは魅力的ですよね。
試してみたいという方は、 今後紹介しますのでチェックして観てください。
