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ファイルでア
Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
LottieFiles: Download Free lightweight animations for website & apps.
LottieFiles takes away the complexity from motion design. It lets you create, edit, test, collaborate and ship a Lottie in the easiest way possible. Get Started - It's Free
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用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
WebアニメーションはRiveが便利！
みなさんは、Web アニメーション使っていますか？ おそらくLottieを使っている人が多いかと思います。 ただ、Lottieには大きな問題がありますね？ そうです。 Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。 たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。 そんな人々を救うため、 最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。 しかし、まだまだ公開には至っていない状態です。（2022/12/07 現在） そこで、Rive 登場 AE で行っていたアニメーションの作成から、書き出しまで全て Web 上で完結できるサービスです。 今回は、アニメーションの設定から React で動かすまでをやってみたいと思います！
仕事でかっこいいインタラクションを実装することになって、canvasでごりごり頑張るかなぁとも思ったのだけど、少し前に話題になったlottieを使ってみることにした。 結果、レベルの高いアニメーションをすこぶる簡単に1時間もかからず実装することができた。 実際に導入してみるところまで +α を説明してみる。 lottieとは 詳細は こちら から見ることができる。知らない人に三行で説明してみると After Effectsで作ったアニメーションを jsonに変換して それをそのまま読み込ませてアプリに組み込める 以上。 Android, iOS, Native Reactに対応しているみたい。 例えば下記はAfter Effectsで Lottie のサンプルを動かしているところ。 これを、jsonに変換してそのまま lottieのライブラリを入れてjsonを読み込ませるだけで下記のように
この記事はGoodpatch Advent Calendar 2018 14日目の記事です。また、2018/10/08に開催された技術書典5にGoodpatchの有志で出展したブックパッチの内容を省略・改変した内容となっています。 今回はマイクロインタラクションはよく知らない方やマイクロインタラクションは知っているけど実際にコードを書いたことが無い方向けにマイクロインタラクションの基本的な知識と実装方法についてご紹介します。 マイクロインタラクションの理解 マイクロインタラクションとはどういう意味なのでしょうか。Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によると、マイクロインタラクションについて以下のように書かれています。 マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ
lottieが大変よろしいものだった - アナログ金木犀
より良いUIのためのマイクロインタラクション入門 | Goodpatch Blog