I believe animation on the web is not only fun, but engaging in such a way that it has converted site visitors into customers. Think of the “Like” button on Twitter. When you “like” a tweet, tiny colorful bubbles spread around the heart button while it appears to morph into a circle around the button before settling into the final “liked” state, a red fill. It would be much less exciting if the he
こんにちは、しばです。 最近Adobe After Effectsを使っているんですが、とある記事でLottieの存在を知りました。 After Effectsのアニメーション書き出せるとかすごでは…試してみたい →WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】 https://t.co/fiEBSvaZme — しば@Webデベロッパー (@xxbicott) March 18, 2020 * すごでは→すごいのでは 使ってみたところ、少しハードルが高いなと思っていたウSVG+JSのウェブアニメーションがだいぶ身近な手段に感じられました！ 実際に作ったサンプルと作った時に感じたこと、注意点などをまとめたいと思います。 Lottieとは Lottie（ロッティー）はAirbnbが公開しているアニメーションを表示するためのライブラリです。 GitHub
このnoteでは「これからLottieをはじめてみよう」と思っている方や「名前は知っているけどLottieってなに？」という方に向けて、Lottieの基礎的な使用方法を紹介します。 Lottieのサンプル｜LOTTIE-SOL-6｜Daniel Tan Wai Meng LottieとはLottieというキーワードでGoogle検索したとき、LottieとLottieFilesの2つのワードがヒットします。ここではまず、2つの違いを紹介します。 Lottie LottieとはAirbnb（エアビーアンドビー）が開発したJSONベースのアニメーションファイル形式です。その特徴は、動画やGifよりも軽量で、拡大縮小しても画像が荒れないことです。 そして、ウェブやアプリなどのイラストとしてはもちろん、ロゴアニメーションやローディング、いいねボタンなど、さまざまなアニメーションに使えます。 いいね
みなさんこんにちは。tatsuです。 春ですね。さくらもちらほらと咲いてきてますね。 去年は自粛していてお花見できませんでしたが、今年もこの感じだと自粛になりそうですね。 早いとこワクチンが全員行き渡るくらい供給されればちょっとは変わるんでしょうかね。 期待しましょう。 さて今回は、去年からwebアニメーション界隈で話題になっている、 「Lottie」というライブラリーをご紹介したいと思います。 そもそもLottieって？ Airbnbが開発したiOS・Android・React Nativeに対応したアニメーション用のライブラリです。 After Effectsで作成したアニメーションをjson形式で読み込むことで、ブラウザ上に表示することが可能になります。 Lottieはbodymovinと呼ばれるAfter Effects拡張機能からJSONファイルとしてエクスポートされたアニメーシ
Lottieで始めるWebアニメーション入門
2019年10月18日（金）Web✕Animation Vol.1「ローディング制作のワークフロー」発表資料
GitHub - mifi/react-lottie-player: Fully declarative React Lottie player
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で使えるアニメーションを作るワークフロー
アプリやWebで使うためのアニメーションって、簡単なものだとCSSやGIF画像を貼り付けることで対応できますが、パフォーマンスや実装を考えるとやはり Lottie が必要。とくに再生を制御する場合は必須になってきます。 このアニメーションを作る方法がけっこう面倒なので、手順をまとめます。 必要なツール Lottie Airbnb が開発した JSON をアニメーションとして再生するライブラリ iOS / Android / Web など、様々なプラットフォームで動きます Expo や Flutter 用のライブラリもあり、アニメーションを再生するためのデファクトです Figma アニメーションの基となるデザイン作成 AEUX Figma から After Effect にデザインを転送するツール After Effect なくてもできる方法を模索したけど、やっぱり必要... キーフレームア
Lottie Canto Colour Palette - Electric Kalimba Demo w/ Effects Pedals
Giving my harp hands a break for a few days! The Lottie Canto Colour Palette is an incredible electric kalimba with built-in effects! Colour Palette is my first kalimba, and it's probably the best one I'll ever own. Thank you, Lottie Canto! Be sure to check out the rest of my channel where I play my electric harp through all these effects pedals and MORE! The Colour Palette kalimba has 8 differe
Lottie は Airbnb が開発しており、After Effects で作ったアニメーションを json 形式でファイルを出力して Web などで表示できるよ、というもの。SVG + JavaScript で動くので、動画を埋め込むより軽量で、レスポンシブウェブデザインでも使い勝手が良さそう。背景の透過も可能。 サイトの説明を翻訳するとこんなかんじ。 LottieファイルはJSONベースのアニメーションファイルフォーマットで、アニメーション要素のテキスト、記述的な表現を使用しています。オープンソースとフリーのLottieプレーヤーは、Web、iOS、Android、Windows、React Native、その他のプラットフォーム（Xamarin、NativeScript、Vue、Angular、QT、Skia、Framer X、Sketch）用に存在しています。 https://l
High-quality Lottie animations for busy startup owners, designers & developers The new UI standard Super small, high quality, interactive animation file format that can be manipulated at runtime. Learn more
Lottieを再生するためのライブラリについて | C5log
*:last-child]:mb-0" style="background-image: linear-gradient(155deg, #c4ecff 0%, #fff 100%);"> Lottieを再生するための ライブラリについて
超簡単！超軽量！LottieでWebアニメーションが捗る | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
こんにちは！新卒2年目、Paid開発担当の小川です！ 今回ご紹介するのはWebアニメーションライブラリ「Lottie」です。 リッチなUXを実装したいけど、以下のようになかなか手が出せない方もいらっしゃるのではないでしょうか？ デザイナーにはJavaScriptの学習コストが高い エンジニアにはデザイナーの求めるような動作をなかなか表現できない デザイナーとエンジニアの得意分野を切り分けるために動画で表現しようとするとどうしても重くなる しかし、Lottieを使えば上記の悩みは全て解決してしまいます！！ 本稿ではそんなLottieの紹介と使い方についてご紹介します。 Lottieとは？ Lottieは民泊で有名なAirbnbが開発したアニメーションライブラリです。 Adobe After Effectsで作ったアニメーションを簡単に制御することができます！ さっそく、そんなLottieのメ
![超簡単！超軽量！LottieでWebアニメーションが捗る | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f4b6a9ff4247eaaa25aa781b702a2a23643fe22/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2019%2F12%2Flottie_anim2.gif)
ゴリゴリのJSが書けなくても使える！ アニメーションライブラリ「Lottie」を使ってみた。 | MONSTER DIVE
Lottie（ロッティー）とは Airbnbから登場したiOS, Android, React Native対応のアニメーションライブラリです。 After Effectsで作成したアニメーションを簡単にWebで実装できるものです。 メリット 簡単に実装できる（ゴリゴリのJavaScriptがわからなくても使える） iOS, Android, React Native対応モバイル端末で使用できる 軽量なのでスマホでもアニメーションができる Lottieを使うために必要なもの Bodymovin After Effectsで作成したアニメーションをjsonに書き出す時に必要になる拡張プラグイン。 lottie.min.js 上記二つのファイルは https://github.com/airbnb/lottie-web よりダウンロードしてください。 Bodymovinの場所 Lottie-w
SVGアニメーションを使うシーンは、デザインにこだわればこだわるほど増えていきます。 自分もちょっとしたページローディングくらいなら、フリーのアイコンを少しカスタマイズするぐらいでいいかなと思っていました。 けれど、それじゃあデザインの幅が広がらないというか、ページローディングだってやっぱりこだわりたいたくなってくるわけですよね。 まだそんな段階じゃなくて、フリーのものを使う程度でいいよって人はこちらの記事を参考にどうぞ。
ハーフメニューで色々なメニューを楽しむ♪ 建大入口のカジュアル イタリアン『LONNIE LOTTIE』 | 韓国旅行ブログ『JIRO(ジロー)』
今回紹介するのは建大入口駅にある人気のイタリアンカジュアルレストラン『LONNIE LOTTIE／로니로티』です。 韓国人の友達にオススメされたのでいってみることに！ 建大入口駅から徒歩1分の距離。 1階に「バーガーキング」「lalavla」が入っている建物の3階です。 エレベーターで上がるとすぐ店内の入り口。 入るとアットホームな雰囲気の店内でした。 訪れたのは水曜日の21:00頃だったのですが、広い店内は、奥までお客さんで埋まっていました。 カップルのお客さんが多く、デートにもぴったりなおしゃれな内装です。 入って右側、キッチン近くの席に案内されました。 メニューはこちら。 ハーフサイズのメニューがあることが売りみたいです。 2人で来たらワンプレートを2つ頼むよりは、ハーフメニューを2つ頼んだり、ハーフメニュー1つとワンプレート1つの組み合わせがおススメと書いてあります。 韓国のイタリ
はじめに 突然ですが 🤔＜WEBアニメーションを探しているけど理想のものがない… 🤔＜かといって自分で作るのはハードルが高い… 🤔＜でもGIFやMP4ファイルだとデータが重くなるし… という経験はありませんか？私はまあまああります。 そこで今回は無料のツールを使用してサクッとWEBアニメーションを作成する方法をご紹介します！ 使用するツール Figma Lottie（LottieFiles） Lottieとは？ Lottie（ロッティー）は、Airbnbが開発した アニメーションライブラリ です。 JSONベースのアニメーションファイル形式で、After Effects等で作成したアニメーションを Lottie専用の拡張機能で出力することで、ウェブサイトやアプリ上でアニメーションを表示できます。 〈Lottieの特徴〉 SVGアニメーションのため拡大縮小しても画像が荒れない GIFや
Lottieとは軽量化してアプリエンジンに載せれる jsonファイルで書き出してくれるAF対応プラグインです 導入方法とLottieについて導入方法については別の記事で丁寧に紹介されているため、こちらをみていただくのがベストだと思います。引用させてください。 【デザイナー向け】Lottieの使い方。アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担を減らそう！ インストール方法DLするにはウィンドウ>exchangeでエクスプレッションを検索... から「Lottie」と検索するかこちらのURLからBodymovinを探してインストール 参考サンプルLottieでどんなアニメーションが作れるのかは、下記Lottieのサイトでサンプルがたくさん乗っているので、どんなものが書き出せるのか参考にみてみてください Lottie 基本的にはAfterEffects上で作ったアニ
ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有
Lottieで簡単にSVGアニメーションを実装！After Effects初見からWEBページ設置までの流れをまとめました | Frog Technology
TOP > Lottieで簡単にSVGアニメーションを実装！After Effects初見からWEBページ設置までの流れをまとめました 昨年開催された「Adobe MAX 2021」にて、Adobe XDのLottieアニメーションの再生サポートが発表されました。 当時セッションを見ていた私は、「Lottie」ってなぁに？(*ﾟoﾟ*)ﾎﾟｹｰ...という感じでふわっと認識している程度で、Webアニメーションについて知りたいと思ってはいたものの、後回しになっている状況でした。 しかし事態は一転！昨今のウェブサイトには、アニメーションでの表現が不可欠。 SVGとCSSアニメーションを少しずつ勉強し始めたところですが、複雑な表現には対応できず、デザイナーの私にとって、javascriptでガリガリコードを書いて実装するのは夢のまた夢...。 そこで、頭の片隅にあった「Lottie」アニメーショ
作成した動画を簡単にコードにしてアプリやWebサイトに組み込めたら便利ですよね。そこで今回はAfterEffectsで作成したアニメーションをコードにしてみるっていうことをやっていきたい。使うのは「Lottie」っていうAfterEffectsで作成したアニメーションを描画してくれるライブラリ。airbnbがやっているものです。 これが結構すごくてAfterEffectsで作ったアニメーションをJSONに変換してWebブラウザでそのアニメーションを動かすことができる。 この記事で行うこと AfterEffectsで作成したアニメーションをLottieで書き出す書き出したアニメーションをWebブラウザで動かすこの記事ではこのLottieで動画を書き出して、Webで使うところまでやっていこうと思う。（使うのはAfterEffectsだけでillustratorとかは使わないでやるよ） Lott
FlutterでLottieアニメーション触ってみた！
はじめに Webアニメーションでよく見るLottieですが、Flutterでも使えるということなので、 この記事では、Lottieのアニメーションを表示する方法を実例を用いて紹介します🙌 Lottieを利用するメリット (ほとんど)コードを書かずにアニメーションを実装できる svgファイルなので解像度を気にせずに拡大縮小が可能 jsonファイルが使用されるため、動画ファイルに比べて軽量 環境 筆者の環境は以下のとおりです。 事前準備 以下のサイト(lottiefiles)から使用したいものをLottie JSONとしてダウンロード pubspec.yamlのdependenciesにlottieを追記し、flutter pub get 因みに VsCodeをお使いの方は拡張機能のPubspec Assistをインストールしていれば以下の手順でもパッケージをインストールできます！ shif
今回はLottieのフリー素材でSVGアニメーションについてまとめてみた。 素材は、LottieのFree Ready-to-use Animationsの一覧にあるものを使用している。 Lottieとは？ CSSやJavaScriptなどのコードを自分で書かずに簡単にアニメーションが実装できるのが特徴。 json形式のデータのため、gif、pngに比べて軽く、SVGを使用しているので拡大縮小しても劣化せずに使える。 下記がLottieの公式になる。 LottieFiles – Download Free Lottie Animations, Integrations & Plugins Googleアカウント等で無料で登録できる。 フリー素材を使用するには、添付のFree Ready-to-use Animations部分をクリックして一覧から探していくことになる。 Featured a
コードを書かずにSTUDIOにLottieに埋め込みで自由な表現が可能になりました。ホバーでの再生やスクロールに合わせた再生など、こだわりのモーション表現が実現できます。
XD はアートボードに Lottie アニメーションを配置して、プロトタイプとして共有できます。XD に Lottie アニメーションを読み込むには、アートボードにファイルをドラッグするか、メニューからファイル／読み込みを選択します。 プロパティインスペクターの「インタラクティブメディア」セクションでは、アニメーションのループ再生の設定ができます。また、以下のリストから再生オプションを選択できます。再生オプションを選択すると、必要なインタラクションが自動的に作成されます。 タップで再生（デフォルト）自動再生する再生不可 プリセットの再生オプションをカスタマイズするには、プロパティインスペクターの「インタラクティブメディア」セクションで、「再生を編集」を選択します。すると、自動的にプロトタイプモードに切り替わり、インタラクションのオプション指定ができるようになります。 投稿 Adobe XD
『Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends』へのコメント
テクノロジー Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
<template lang="pug"> .animationItem(ref="animationContainer") </template> <script> import lottie from 'lottie-web' export default { mounted() { const animationEvt = () => { const anim = lottie.loadAnimation({ container: this.$refs.animationContainer, renderer: 'svg', loop: false, autoplay: true, animationData: this.options.animationData }) anim.addEventListener('complete', () => { //処理 }) } const
Lottieを使ったアニメーションの実装 − デザイナーが気をつけた4つのポイント｜リクルート プロダクトデザイン室
こんにちは。プロダクトデザイナーの大窪です。 お店の経営アシスタント「Airメイト」で、アプリへのアニメーション実装にアニメーションライブラリの「Lottie」を使用しました。 デザイナーにとってもエンジニアにとってもアニメーション実装がぐっと身近になる「Lottie」を使用したアニメーション制作の流れを、デザイナー目線で気をつけた点を交えご紹介します。 これから使ってみようかな…というデザイナーのみなさんの“Lottieはじめの一歩”になれば幸いです。 Lottieの何がよいの？軽い＆キレイ＆自由度高い Lottieは、After Effectsで作成したアニメーションをjsonファイルで書き出し、そのjsonファイルを読み込み動かします。 jpgやpngといった画像を使用しないのでデータサイズが非常に軽く、これまでのアニメーション実装時に比べ、アプリサイズが軽減されます。 さらに、ベク
AIで画像を生成する まず、Microsoft Bingを使って、元となる画像を生成します。 Bingでは、チャット形式で回答を得ることができますが、会話のスタイル選択で「より創造的に」を選択すると、テキストから画像を生成することもできます。 ここではサンプルとして、著者の愛犬である「ベル」という名前のボーダーコリーのブログ用ロゴ画像を作成する、という程で質問を書いていきます。 ボーダーコリーのブログのロゴのアイデアを5パターン作成してください。モチーフにボーダーコリーのイラストと、ボーダーコリーの名前「Bell」を入れてください。 見事なボーダーコリーのイラストが生成されましたが、少し写実的過ぎるのと名前が目立たないので、注文を追加します。 ボーダーコリーのイラストをもっと抽象的なアイコニックなデザインにしてください。また、Bellのテキストをもっと大きくしてください。 思いの外ロゴっぽ
「Lottie」とは、ブログなどに埋め込むことができる次世代アニメーションです。 Adobe After Effectsというソフトを使えば、上のようなイラストアニメを作成できます。 自分で作るだけでなく、素材ファイルをダウンロードして使うこともできます。 Lottie・GIFアニメとの違い LottieとGIFアニメが大きく異なるのは、以下の5つです。 アニメーションがスムーズ 画像ファイルよりも高画質 ファイルサイズが小さい 写真には対応していない 埋め込みコードの入力が必要 Lottieの特徴・メリット 先ほどのサンプルを見てもらうとわかるとおり、とてもスムーズにアニメが動いています。 画質も良く、滑らかできれいな表現が得意です。 また、GIFアニメよりもファイルの容量が小さいという特徴があります。 ウェブサイトの容量をできるだけ落としたいときに、大活躍してくれます。 GIFアニメの
こんにちは🌿 Brewus,Inc. UIデザイナーのbellです。 とある案件にて、React Native でアプリ開発を行うことになり、アニメーションを Lottie で作成したので、実装までの流れをまとめました。 Lottieを使用した背景 ・リッチなアニメーションを入れたい ・アニメーション実装にエンジニアの工数をあまり割けない ・デザイナーが After Efects に触れたことがある（ちょっとだけ） 01. 準備この記事では、下記のことは詳しく説明していません。 ・Lottieとは何か ・Lottieで何ができるか ・Lottieの導入方法 ・Lottieの書き出し方法 Lottie導入と書き出し方法については、こちらを参考にしました。 02. Illustratorでパスデータ作成Illustrator（以下Ai）でパスデータを作ります。 気をつけること ・テキストとパ
Lottieとは？ Adobe AfterEffectsで作成したアニメーションをJSONファイルで書き出し、SVGアニメーションとして実装できるJavascriptライブラリです。 Lottieで表現できるアニメーションの範疇はCSSアニメーションと大差ありませんが、イラストをパーツ単位で動かしたり、複数の動きを組み合わせたりと、より細かい動きを表現したい場合におすすめです。 Lottieの使い方 ※今回はAdobe AfterEffectsでの作成方法などは割愛し、JSONファイルが用意されていることを前提として進めます。 まずはfooterでlottie.min.jsと自前のJSファイルを読み込みます。 オーソドックスな実装であればこの2ファイルのみで動かすことができます。 <!-- Lottie --> <script src="https://cdnjs.cloudflare.c
この記事はXamarin Advent Calendar 18日目の投稿です。 qiita.com モバイルアプリでもいい感じのアニメーションを表示させたいと思い色々調べていたら、Lottieというライブラリを見つけました。 この記事ではアニメーションの作成から始めて、Lottieを使ってXamarin.Formsで使うまでの方法について書きたいと思います。 Lotitieとは Adobe After Effectsを用いて簡単にアニメーションの作成ができるライブラリです。BodyMovinというライブラリを使い、JSONファイルとして書き出されたデータを読みこむことができます。 github.com 環境 PC Mac Book Air Xamarin関連 Visual Studio 2019 for Mac Xamarin.Forms (4.4.0.991265) Com.Airbnb
こんにちは、cssアニメーション大好き人間の@Nakazです。 Diverse Advent Calendar 2019 15日目の記事です。 はじめに 今回は、lottieを使う際に一番のキモである、JSONファイルを扱えなかった場合というとてもニッチなケースを書こうと思います。 ※この記事はlottieの使い方をイチから書くわけではありません。ごめんなさい。 ※なんでJSONが使えないんだ？と思うかもしれませんが「色々あって」使えなかったんです。。。 まずはJSONが使える時の使い方 lottie-webにもある通り、基本的にはAfterEffects+bodymovinで作ってもらったJSONを元に lottie.loadAnimation({ container: element, // the dom element that will contain the animation
【rails】railsアプリケーションにLottieのアニメーションを導入する方法 - Qiita
この記事でわかること railsアプリケーションに既存のlottieアニメーションを導入する方法 ※本記事ではjson形式のアニメーションファイルの作成方法については記載しておりません。 Lottieとは Lottieとは、Airbnbが開発したアニメーションライブラリであり、これを利用することで ウェブサイトやアプリ上でアニメーションの実装が手軽にできます。 ※以下はスクショですが、モダンなデザインでぬるぬる動くアニメーションが豊富に用意されています。 実際に使ってみたところ、SVGのアニメーションが爆速で実装でき、 ちょっと難しそうだと思っていたアニメーション導入がかなり身近な手段に感じられました！ 実装方法 Lottieでアニメーション表示させるには、以下の2つが必要となります。 ・lottie.js ・Lottie JSONファイル STEP.1 lottie.jsの読み込み まず
こんにちは！とあるIT企業のUIデザイナー、ichikawaです！ 今回は画像ならではのリアルな質感を残したjsonアニメーションを作ることがあったので、備忘録として記録します。 画像をパスアニメーション化させて軽いデータでWEBやアプリに組み込みたい方向けの記事になります！ 使用ツール: Photoshop , Illustrator , AfterEffects , Bodymotion(Lottie) ざっくりめに説明していきますので、ご了承ください。 今回作ったものはこちら note用に新たに作ったおふざけ全開のYAGI TIME! こちら北海道の牧場で出会ったヤギさんの写真を使用しました。 それでは作っていきましょう！ Photoshopで前準備 今回の画像はヤギさんの顔に男の子の手が入り込んでいたので、イラレの前にPhotoshopで軽く消していきます。 ベクターレイヤー化する
【Javascript】Lottieを使ってマイクロインタラクションを実装してみる | Wood-Roots:blog
LottieはAirbnbが開発しているアニメーションライブラリです。 Airbnb本体のサービスにお世話になることは多分ないと思いますが（旅行行かないので…）、Lottieは非常になめらかで自由度の高いアニメーションを作ることができそうですので試してみました。 デモ
採用技術にフォーカスしたWebサイトリンク集。 トレンドリサーチや技術選定の参考に、WEBデザインやコーディング、開発の参考にも使えるWebサイトギャラリー。 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. （DeepL翻訳） Lottieは、After Effectsのアニメーションをリアルタイムにレンダリングし、アプリが静止画を使うように簡単にアニメーションを使えるようにするiOS、Android、React Native用のライブラリです。 https://airbnb.design/lot
ep.40 Lottie と LottieFiles で実現する「ちょっと嬉しい」アニメーション | UIT INSIDE
@potato4d と @spring_raining の二人で、 Lottie について語りました。 UIT INSIDE Live! の特設ページで久々に Lottie を利用した メールのアイコンのもの https://airbnb.design/lottie/ After Effects で作ったモーションを Web, iOS, Android で動かすことができるライブラリ Ae の動画データ → JSON → JavaScript ライブラリとすることでフロントエンドで使える オフィシャルな Lottie Web のほかに、 有志による react-lottie や lottie-vue が存在 Lottie の面白さ After Effects で作った資産を Web で活かせる フロントエンドエンジニアがリッチなマイクロインタラクションなどを気軽に実装できる 今日は 2.
IllustratorやFigmaでたこ焼きを描いて、After EffectsとLottieを利用して動かしてみる | DevelopersIO
IllustratorやFigmaでたこ焼きを描いて、After EffectsとLottieを利用して動かしてみる 今回たこ焼きを動かしたくなったので、IllustratorやFigmaにてイラストや画面を作り、After Effectsでアニメーションを付けてLottieにエクスポートした一連の流れをまとめました。（After Effectsの細かい解説はありません） Lottieとは Lottieとは民泊などでお馴染みのAirbnbが開発したアニメーションライブラリです。 Lottieを利用すればjpgやgifといった画像を使わないJSONベースの軽量なアニメーションを作ることが可能です。さらにLottieへアップロードしたアニメーションはFigmaに貼り付けられます。 ただLottieでは複雑な動きを作ることはできないため、After Effecsで動きを編集します。 After
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animating with Lottie | CSS-Tricks
Lottieでウェブアニメーションを作ってみた【サンプル有り】 | webico blog
ARM64アプリの開発をサポート ～Microsoft、「Windows Community Toolkit」v6.0を発表／UWPをWin32アプリへ組み込むXAML Islands、After Effects効果が使えるLottie-Windowsなども
初心者のためのLottie&LottieFiles｜by｜Yuhei Sasaki
webアニメーションをお手軽に！「Lottie」を使ってみた！ | SOLUTION MAGAZINE
JSONベースのアニメーションファイルフォーマットLottieを使ってみる
Premium Lottie animations Market - Drawer
【Lottieの使い方】SVGアニメーションもっとこだわったオリジナル溢れるものを作りたい
Figma×Lottieで簡単WEBアニメーション作成！ - Qiita
Lottieで書き出しできる、できないAfterEffectsの機能｜Nviveto
『WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】』へのコメント
【Lottie】AfterEffectsアニメーションをコード化してアプリ・Webサイトに組み込む | ガジェラン
Lottieのフリー素材でSVGアニメーションを実装してみた（備忘録）
LottieアニメーションでWebサイトにもっと豊かな表現を。｜STUDIO
Adobe XD での Lottie アニメーションの操作 - Adobe XD Trail
Nuxt.jsでLottieを使う - Qiita
FigmaとLottieでアニメーションロゴを作成する | C5log
「Lottie」とは？GIFアニメとの違い・特徴・使い方を紹介！ ｜ ミライヨッチ
React Native に組み込めるLottieアニメーションを作る｜bell
Lottieを使ったアニメーションの実装 - Qiita
LottieをXamarin.Formsで使ってみた - takataka430’s blog
JSONファイルが使えない！そんな環境下でのlottie - Qiita
イラレのトレース機能を使ってLottieから画像をjsonアニメにしてみた｜ichikawa
Lottie 採用事例 サイト 一覧|Page1|Check WebTech