こんにちは。プロダクトデザイナーの大窪です。 お店の経営アシスタント「Airメイト」で、アプリへのアニメーション実装にアニメーションライブラリの「Lottie」を使用しました。 デザイナーにとってもエンジニアにとってもアニメーション実装がぐっと身近になる「Lottie」を使用したアニメーション制作の流れを、デザイナー目線で気をつけた点を交えご紹介します。 これから使ってみようかな…というデザイナーのみなさんの“Lottieはじめの一歩”になれば幸いです。 Lottieの何がよいの？軽い＆キレイ＆自由度高い Lottieは、After Effectsで作成したアニメーションをjsonファイルで書き出し、そのjsonファイルを読み込み動かします。 jpgやpngといった画像を使用しないのでデータサイズが非常に軽く、これまでのアニメーション実装時に比べ、アプリサイズが軽減されます。 さらに、ベク
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
この記事を3行で説明すると Lottieという動画をアプリに組み込むためのライブラリを使うといいよ JSONファイルを組込むので格段に軽くなる 必要なものをAirbnbがほとんど用意してくれててすごい👏 今回は導入のメリット・デメリット、利用する際につまづいた点を書いていきたいと思います。 この動画を例としてあげながら進めていきます。 Merry Christmas🎅 pic.twitter.com/rvGR9THE5s — いなげ (@17_makoto) 2017年12月24日 Lottie(ロッティー)ってなーに Lottie(ロッティー)は、Airbnbから登場したiOS、 Android、React Native対応のアニメーションライブラリです。 Adobe After Effectsで表示できるアニメーションをリアルタイムでレンダリングし、ネイティブ アプリで静的な コン
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Get Started Learn more › Why Lottie? Flexible After Effects features We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
