Lottie
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
Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる - SMARTCAMP Engineer Blog
デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、Vue.js + Elelment UI + Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie組み込み、完成といった感じで詳しく説明していきます！ 完成画面 😊 使用技術 Vue.js Element UI Lottie（ロッティー） 実装します！ 事前準備 Vue CLIをインストール プロジェクトを作成 ElementUIをインストール ログイン画面を作成 不要コードの削除 コ
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
仕事でかっこいいインタラクションを実装することになって、canvasでごりごり頑張るかなぁとも思ったのだけど、少し前に話題になったlottieを使ってみることにした。 結果、レベルの高いアニメーションをすこぶる簡単に1時間もかからず実装することができた。 実際に導入してみるところまで +α を説明してみる。 lottieとは 詳細は こちら から見ることができる。知らない人に三行で説明してみると After Effectsで作ったアニメーションを jsonに変換して それをそのまま読み込ませてアプリに組み込める 以上。 Android, iOS, Native Reactに対応しているみたい。 例えば下記はAfter Effectsで Lottie のサンプルを動かしているところ。 これを、jsonに変換してそのまま lottieのライブラリを入れてjsonを読み込ませるだけで下記のように
この記事はピクシブ株式会社 Advent Calendar 2017の19日目です。 こんにちは、17新卒エンジニアのまつらいです。普段は主にpixivFANBOXというサービスでJavaScriptやPHPを書いています。今日は、ウェブブラウザ上で動く軽量で扱いやすいアニメーションを実現させることができる、僕の大好きな「Lottie / Bodymovin」について作例を含めて紹介します。 https://matsurai25.info/bodymovin/blue/ たとえば、デザイナー(※1)に貰ったAIファイルをそのままAfterEffectsで加工、レイヤー毎に動きをつけてみました。このページはiOS safariやIE11でも動作します。LPなどの目立つ部分でLottieを使うと、サービスがグッと印象的になるはずです。 なお、この例ではサイズの大きな画像が使っているので、端末の
Create and ship animations to your products faster. Bring your websites and apps to life with the simplest editor for Lottie animations.
この記事について この記事は Lottieでアプリにアニメーションを組み込む話（デザイナー編） を受けての iOSプログラマー編 になります。 デザイナー編では実際にアニメーションを作る具体的な方法を含め解説されていますので是非ご参照ください。 Lottieとは LottieとはAdobe After Effectsで作ったアニメーションをそのままクライアントアプリで表示するためのライブラリです。 iOSやAndroidのネイティブアプリの他、React Nativeでも利用できます。 iOS用のライブラリは、 https://github.com/airbnb/lottie-ios です。 なにができるの？ 作成されたアニメーション用JSONファイルをアプリに埋め込んでわずかなコードで再生することができる インターネット上に設置したJSONファイルを読み込んでアニメーションを再生すること
制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
これは「BASE Advent Calendar」16日目の記事です。 こんにちは、BASEのDesign Groupに所属している吉岡です。 先日BASE BANK株式会社初めてのプロダクトとして即時に資金調達ができる金融サービス「YELL BANK」をリリースしました。個人的にお金にまつわるデザインは初めての経験ということもあり、難しかったのですが、LPではAfterEffectsで作ったアニメーションをCanvasやSVGアニメーションにできるプラグインを使って表現しました。 今回はせっかくのアドベントカレンダーなので、下記の様なHolidayAnimationを書き出してみようと思います。 環境設定 Bodymovin をインストール creative.adobe.com プラグインインストールのためのzxp-installerもダウンロードします aescripts.com Lo
こんにちはフロントエンジニアの茨木です。一ヶ月ほど前からSwiftでiOSアプリ開発をやっています。iOS開発経験は浅いですが、Lottieというライブラリを使用し、いきなりアニメーションごりごりの画面を担当してみました。 LottieはAirbnb社が開発したライブラリで、僅かなコードでアニメーションを実装できるスグレモノです。 本記事では、SwiftにおけるLottieの使い方を説明します。 Lottieの特徴 Lottieの最も大きな特徴は、Adobe After Effectsで出力したアニメーションデータをそのまま読み込むだけでアニメーションを実装できることです。その為、沢山のコードや画像が不要なのはもちろんのこと、デザイナーが作ったアニメーションを忠実に再現することが可能です。更に、LottieはAndroidやReact Nativeもサポートしているので、クロスプラットフォ
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lottieの組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができるLottie-Playerを使用して実装します。 iOS、Androidアプリケーション等のそのほかの実装方法は公式ドキュメントを参照ください。 アニメーションの実装 ウェブ向けの実装方法は大きく2パターンあります。HTMLメインの方法と、JavaScriptメインで実装する方法で
旅行プラットフォームのAirbnbが、Adobe After EffectsのアニメーションをリアルタムでレンダリングしてiOS・Android・React Native向けのリッチアニメーションにしてくれるライブラリ「Lottie」を開発しました。 Lottie http://airbnb.design/lottie/ Lottie : Airbnb Design http://airbnb.design/introducing-lottie/ Lottieはオープンソースのアニメーション作成ツール。通常はアプリにアニメーションを実装する際、スクリーンサイズに合わせた大量の画像を用意したり何千行ものコードを書いたりする必要がありますが、Lottieはほとんど何もしなくても自動的にAfter Effectsのアニメーションをアプリ用のリッチアニメーションに変換してくれるとのこと。ライブラリ
アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
Download 7.8 Million+ Icons, Illustrations, 3D Illustrations, and Lottie Animations | IconScout
7,000+ icon fonts, SVG, 3Ds and Animated icons available in different styles.
GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Lottie
In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool for communicating ideas and creating compelling user experiences. One year
BOOTH iOSで購入完了時にLottieのアニメーションを実装しました！ #booth #booth_pm - pixiv inside
おばんです、Oxygen Not Includedにハマってしまって、年末年始を溶かすことが確定している田中です。 先日リリースしたBOOTH iOS v2.18.0から購入完了時にアニメーションが再生されるようになりました。 今回はその実装に関する話として以下をまとめていきます。 作ったもののドヤリング Lottieとは BOOTH iOSの購入完了アニメーション実装のざっくり解説 アニメーションの実装時にハマったポイントの解説 作ったもののドヤリング ドヤアアアァァァァ！ 実装に踏み切った経緯としては、「もともとのBOOTHの購入完了画面が殺風景だった」&「これから機能改修が入る」という話があり、機能改修に合わせてデザインもハレ感を出して修正しよう！となったことからでした。 購入するという大切な瞬間をよりリッチなアニメーションによって演出してあげたい想いと、創作好きのユーザーを相手にし
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web
Lottieはじめました｜宮島信太郎
こんにちは、宮島（4hintaro_m）です。 今回は、最近ちらほら名前を聞くようになったLottieについて、そのメリットや注意すること、できること、今後の展望などをまとめてみました。 LottieはAirbnb社が開発した、Aftereffctsで作ったモーションやアニメーションをJSONファイルに書き出して、簡単に実装できるアプリです。UIのマイクロインタラクション分野で活躍できそうです。 去年から耳にしていましたが、よく理解していなかったので触っていませんでした。最近noteでもいくつか記事がアップされていたので、読んで始めてみました！ 詳しい機能や作り方、アプリのダウンロード先などはすでにみなさん書かれていたので割愛します。 メリット・JSONファイルなので、GIFに比べて圧倒的にファイルが軽い ・AfterEffectsで作れるので、細かい設定ができる ・実装が簡単らしい こん
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 画質の劣化を伴わないLottieによるアニメーションの導入は、UI改善・コンテンツの没入感の形成・リッチな体験を提供する効果が期待できます。 本記事ではLottieの概要から、まずはデザインツール「Figma」を使ってお手軽にLottieを作る方法を紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する Lottieとは ベクターとラスター まず、画像形式について少し整理しておきましょう。画像形式はベクターとラスターの2種類に分けられます。ベクターとラスターの違いについては記事『SVGで始めるマイクロインタラクション入門』で解説していますが、簡単にいうと拡大しても高い解像度を保ちボケないのがベクター画像、ボケるのがラスター画
GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Includes 36,600+ assets, full access to app, and upgrades for one year. Price will increase as library grows.
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 After Effectsなどで作ったリッチなアニメーションを、ウェブサイトやアプリケーションに実装できる「Lottie（ロッティー）アニメーション」をご存知ですか？ Lottieはどれだけ拡大しても高画質で、実装も簡単なアニメーションライブラリです。ウェブ制作にLottieを取り入れるメリットは多く、GoogleやMicrosoftといった大手企業も活用しているほどです。 わたしたちneccoも2020年に導入し、これまでさまざまなプロジェクトでLottieを活用してきました。 この記事では、Lottieの基本から実際の活用事例、作成方法までご紹介します。作成時の注意点もまとめているので、Lo
【デザイナー向け】Lottieの使い方。アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担を減らそう！｜nozoe | conoito
↑は先ほどダウンロードしたBodymovin.zxp（プラグイン）をAfterEffectsにインストールする為に使います。 [Download Mac OS X] または [Download Windows]からDLしてください。私はMacなのでMacOSを選択しますがWindowsの方はWindowsで。 最後に、[ZXP Installer]を使って[bodymovin.zxp]をインストールします。 先ほどダウンロードした [ZXP Installer] を起動して、これまた先ほどダウンロードした [bodymovin.zxp] をドラック&ドロップで放り込めばインストール完了です。 ✔︎をクリックでインストール完了！ 2020/08/22追記 久しぶりにBodymovinを使おうとしたら、なんと拡張機能の中から消えてしまっていて使えなくなっていました😭 再インストールしようとす
Introducing Lottie
By Brandon Withrow, Gabriel Peal, Leland Richardson and Salih Abdul-Karim In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool
[iOS][Swift4.0] After Effectsのアニメーションを手軽に入れられるlottie-ios | DevelopersIO
今回は個人的に、今アプリに一番入れてみたいライブラリLottieを試してみました。 LottieはAdobe After Effectsで作成されたアニメーションをjsonに変換して読み込ませることで、手軽にアニメーションをアプリに入れることが出来ます。 また、以下の利点があります。 標準のアニメーションよりも凝ったものが作れる AndroidやWeb用のライブラリも存在するので、共通したアニメーションを使える アニメーションの素材サイトが公開されている（後述） ライセンスは、Apache License 2.0です。 https://github.com/airbnb/lottie-ios 検証環境 今回は下記環境で試しています。 Xcode 準備 アニメーションを入手する Adobe After Effectsのアニメーションを作れなくても、Lottieでは素材サイトが用意されています
![[iOS][Swift4.0] After Effectsのアニメーションを手軽に入れられるlottie-ios | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c83d413afe58d904e71a2ee3e849a272825f43c1/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F01%2Fios_ui.png)
GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この記事を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で表示できるアニメーションをリアルタイムでレンダリングし、ネイティブ アプリで静的な コン
GitHub - lottie-react-native/lottie-react-native: Lottie wrapper for React Native.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web
デザイナーでもできる！Lottieでアニメーションを実装する方法【Swift編】｜ohs / Pilll ピルリマインダーアプリ
実装する前に IllustratorとAfter Effectsを使ったアニメーションの作成方法が分からない方は、こちらの記事がとてもわかりやすく丁寧だったので、おすすめです！ Xcodeを開いて実装してみよう1. Xcodeを立ち上げて新規プロジェクトを作成 2番目のCreate a new Xcode project を選択 Single View Appを選択 Product Name/Organization Name/Organization Identifierに任意の名前をつけて次へ。※今回はお試しなのでなんでもよいと思います。 ⚠️下のチェックボックスはすべて外しましょう⚠️ どこに保存するか選択肢し、プロジェクト作成完了です。一旦ここでXcodeは終了して置きます。 2. ライブラリーのインストールCocoaPodsというライブラリーを管理してくれるツールを使ってLott
*:last-child]:mb-0" style="background-image: linear-gradient(0deg, #eee 0%, #fff 100%);"> Webデザイナーのための Lottieアニメーション実装講座
【svgアニメーション】After Effectsで制作したアニメーションをWebで使う方法（Lottie） | PRAWN COCKTAIL(プロウンカクテル)
この記事の目標「After Effects」と「Lottie」というアニメーションライブラリを利用してWebアニメーションを制作してみたいと思います。 試しに作ってみたものがこちらです。 このように「After Effects」で制作したアニメーションをWeb上に表示させるまでを今回の記事の目標にします。 流れとしては以下のようになります。 「After Effects」でアニメーションを制作。「Bodymovin」を使いJSON形式で書き出す。「Lottie」を使って実装する。 BodymovinをインストールまずはAfter Effectsのプラグインである「Bodymovin」をインストールします。 Adobeからダウンロードできます。 のはずが上手くいかなかったので以下の方法でダウンロードしました。 LottieのGitHubからダウンロードします。 赤枠のボタンをクリックするとツ
これはno plan inc.の Advent Calendar 2023の11日目の記事です。 どもー、no plan inc.のおかむーです。 LottieというアニメーションファイルをSTUDIOのノーコードで実装してみたので、 今回も知見を共有できればと思います！！ この記事でわかること LottieアニメーションをSTUDIOで動かす方法がわかります 先に結論 STUDIO(ノーコード)でこんな感じのパリピなアニメーションが爆速で入れられます 中央上(ペンギンさん) サイド下(踊っている人々) Lottieとは Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大
Adobe XDの2021年最後のアップデートとして、「ビデオの再生」と「Lottieの再生」が登場しました。MP4形式の動画と軽量なアニメーションを再生できるLottieファイルがAdobe XDで扱えるようになり、より没入感のあるプロトタイプが作成できるようになりました。 今回の記事では、これらの機能の使い方から活用方法、注意点を紹介します。動画やモーションをXDのプロトタイプに組み込むことで、開発チームとデザイナーの認識合わせに役立つはずです。 動画やモーションが入った状態のデザインを早めに確認しておきたいというデザイナーはもちろん、プロジェクトの早い段階で方向性を共有したいというディレクターもぜひご覧ください。また、Lottieファイルの対応によって実装段階でのアニメーションの再現が容易になるため、エンジニアにも見逃せない機能となっています。 ビデオの再生の使い方 ビデオの再生はそ
Airbnbからまたもや便利そうなデザインツールが公開されたようです。 今回紹介する「Lottie」はAdobeのAfter Effectで作ったアニメーションをプラグインでJSONデータに変換し、iOSやAndoroid・React Nativeのソースコードに組み込んで、そのまま動かすことができるというもの。 こういうAfter Effectで作ったアニメーションがネイティブアプリでも簡単に実装できちゃうらしい すごいな。 こういうインタラクティブな動きが簡単に実装できるのは良さそう。 Airbnbが公開しているLPはこちら Lottie こちらがGitHubです airbnb / lottie-ios ぜひお試しあれ！
【React Native】【Expo】 Lottieでおしゃれなアニメーションを簡単に実現 - React Native Tech Blog
TwitterやInstagramでいいねをタップしたときなど、 ちょっとアニメーションがあるだけで気持ちよく感じますよね。 Lottieというアニメーションライブラリを用いることで、 リッチなアニメーションを簡単に実装できます。 たとえば↓のようなアニメーションを簡単に組み込むことができます。 (参照: https://github.com/airbnb/lottie-react-native) 今回はその手順を紹介します。 Lottieとは Airbnbが開発した、iOS, AndroidそしてReac tNativeに対応したアニメーションライブラリです。 アニメーションファイルはAdobe After Effectsで作成し、 それをJSON形式で書き出したものを、アプリで読み込み再生することができます。 アニメーション作成と、アプリ実装の作業が完全に分離できるので、 デザイナーは
lottie-react-nativeがAirbnbからコミュニティ主導になった影響とこれからの動き - KitchHike Tech Blog
Airbnb が React Native からネイティブアプリへ方針転換することを発表してから1年が経ちました。lottie-react-native の開発は Airbnb 社からコミュニティ中心に移り、継続されています。この記事では lottie-react-native 開発コミュニティの変遷と現状、そしてこれからの動きを紹介します。 はじめに キッチハイクエンジニアのタクです。lottie-react-native という Airbnb 製のアニメーション表示ライブラリを導入する過程で、issue や Pull Request を通してコミュニティの動きを知る機会がありました。それがきっかけで、ライブラリの内部実装や仕組み以外も理解することが、多角的な視点で実装することに繋がるのではないかと思うようになりました。 Airbnb による Lottie のリリース、React Nat
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ
lottieが大変よろしいものだった - アナログ金木犀
Lottieであなたの「サービス」をもっとリッチにアニメーションさせる話 - pixiv inside
Lottielab | Create and Edit Lottie Animations
Lottieでアプリにアニメーションを組み込む話（iOSプログラマー編） | TOKOROM BLOG
制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA
デザイン表現が広がる、Lottieアニメーション - BASE開発チームブログ
SwiftでLottieを使ってアニメーションを実装する - ZOZO TECH BLOG
最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 - ICS MEDIA
アプリに簡単にリッチアニメーションを実装できるようになる「Lottie」をAirbnbが公開
Lottie Docs
最新版！ Lottieアニメーションの作り方 - Figma編 - ICS MEDIA
Shape - 36000+ Icons & Illustrations to SVG, Lottie, React.
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 - necco note | necco inc.
AirbnbのアニメーションライブラリLottie(ロッティー)の使い方🎅 - Qiita
Lottie Docs
WebデザイナーのためのLottieアニメーション実装講座 | C5log
【パリピ注意】LottieというアニメーションファイルをSTUDIOのノーコードで実装してみた - Qiita
Adobe XD 待望の動画再生機能が登場！ビデオの再生とLottieの再生の使い方 - ICS MEDIA
Airbnbが作ったアニメーション変換ツール「Lottie 2.0」がGitHubで公開中