①【情報収集家（自称！）】 ②【個人事業主】 ③【会社員】 ※3足のわらじ人間 【②（個人事業主）】について・・・ 2020年6月15日より、とうとう開業しましたヨ❢ ●屋号：東京SNS宣伝・拡散サービス事務所 ●職業：集客・SNSマーケティング業 ●事務所住所：東京23区内 ●もし拡散・宣伝の案件が御座いましたら、お気軽にメール下さいませ【jun_abc_xyz@hotmail.com】迄m(__)m。
〓〓ドラクエブログ615章：ハッピー癒し系コーギーVtuberの Lottie （ロッティ）なのです❢ #ドラクエ #アニメ #漫画 #雑記 #ブログ
①【情報収集家（自称！）】 ②【個人事業主】 ③【会社員】 ※3足のわらじ人間 【②（個人事業主）】について・・・ 2020年6月15日より、とうとう開業しましたヨ❢ ●屋号：東京SNS宣伝・拡散サービス事務所 ●職業：集客・SNSマーケティング業 ●事務所住所：東京23区内 ●もし拡散・宣伝の案件が御座いましたら、お気軽にメール下さいませ【jun_abc_xyz@hotmail.com】迄m(__)m。
お、なんだか弊社のロゴが元気そうに動いてますね。 実はこれ、動画やGIFではなくリアルタイムで描画しているんですよ。 F12で要素(Elements)を見てみると、SVGというベクターイメージがどんどん書き換わっていくのがわかります。 ベクターイメージでの描画ですので、ビットマップイメージ(jpgやpngなど)と違って、拡大しても全く劣化しないのが特徴です。
マイクロアニメーションコンポーネントを実装しました #GameWith #TechWith #vue #vuejs #vuecli #lottie #lottieweb - GameWith Developer Blog
こんにちは! @53able です。 今回は、再利用可能なマイクロアニメーションを実装した話を行っていきたいと思います。 Web コンポーネント(Web component) カスタム要素の data-animation 属性に指定したアニメーションが再生される仕様のコンポーネントを作りました。 <gds-core-micro-animation data-element="" data-animation="" > 任意の HTML </ gds-core-micro-animation> data-element: アニメーション要素のコンテナ要素 data-animation: JSONファイル名 指定するアニメーションは、Adobe After Effects で作成したアニメーションを JSON としてエクスポートされたファイルです。 airbnb.design 開発環境 Vue
この記事はReact Native Advent Calendar 2019の18日目の記事です。 はじめに こんにちは、React Nativeでアプリ開発をしている @tamago3keran です。 私が所属する会社で開発しているアプリに、Lottieというライブラリを使って、アニメーションを実装していたりします。 Lottieの良さを紹介したり、導入方法を紹介する記事はよく見かけるので、今回はLottieを使ってアニメーションを実装したときに苦労したことを書こうと思います！ 想定読者 Lottieの仕組みがわかっている人（ Lottieについて知りたい方はこちらをご参考ください ） React NativeアプリにLottieを使ってアニメーションを実装しようとしている人 React NativeアプリにLottieを使ってアニメーションを実装する際の注意点を知りたい人 Lotti
はじめに dex.fmというAndroidのテック系Podcastのep20で、AirbnbのEpoxyとLottieという2つのOSSライブラリを紹介していました。 このうち、Lottieはアニメーションを簡単に実現できるライブラリで、Androidの他にもiOSやReact Nativeに対応したLottieライブラリが提供されているようです。 詳細は以下を参照ください。 https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e#.dmmsfvxy5 EpoxyとLottieはどちらも面白そうだったのですが、趣味で作成しているアプリが丁度「お気に入りボタン」の実装で悩み中だったためLottieを使ってみようと調査をはじめました。 日本語の情報が少なくてうーむと思ったのですが、GithubのREADME.m
はじめにVue.js で Lottie を使ったアニメーションを表示する方法。 Vue.js 向けのライブラリとして以下があるがメンテが止まってるようなので、(いまでも問題なく使えるかもしれないが)本記事では airbnb/lottie-web を使う。 chenqingspring/vue-lottie Latest commit: 2018/04/02 SuperbuffNL/lottie-vuejs Latest commit: 2019/08/27 ※Latest commit は 2020/09/28 時点の確認結果 TL;DR npm i lottie-web でインストール lottie-web と JSON データを import lottie.loadAnimation を実行 Creative Commons License の要件、対象アニメーションのライセンスを要確
あらすじ Figma でデザインをし、Lottie でアニメーション化し、Flutter で実装します。 Figma でデザイン まずは、デザインモードで複数のフレームに分けて、コマ送りになるように調整しながらデザインします。 今回は、PUSH を押すと火が出るアニメーションにします。 次に、プロトタイプモードでこれらのフレームをドラッグ&ドロップで繋いでいきます。 ※モードチェンジは右上から変更できます。 Figma → Lottie プロトタイプモードで最初のフレーム横にある再生ボタンを右クリック → プラグイン →LottieFiles と選択します。 タグ Export to Lottie を選択 →Export to Lottie ボタンをクリック プレビューを確認し、問題なければ Save to workspace ボタンを押し LottieFiles へ保存する。 Lotti
After Effects＋Bodymovin＋LottieでSVGアニメーション/Web用軽量モーショングラフィックスを作成 | デジタルマーケティングTips | 株式会社マックスマウス
サンプル 以下のようなWeb用モーショングラフィックスが、数十～数百KB程度のサイズで作成できます。 ※動きがカクカクする場合は、見たいアニメーション以外を停止ボタンで止めると、滑らかに表示される場合があります。 サービス紹介ビジュアルイメージ (↑ボタンにマウスカーソルを合わせると色が変化します。クリックで資料請求フォームに移動します) 黄→赤 赤→黄 3D迷路 ↑クリックすると別タブで開きます ※ご注意 Google ChromeもしくはMicrosoft Edge最新版推奨 ブラウザによっては正しく表示されない場合があります 端末処理速度により画面に若干ちらつきが出る場合があります ベクター素材なら、軽量・高精細な映像表現が可能 映像のメリットとサイズ問題 映像は限られた面積で多くの情報を伝えられます。Webサイトの大型メインビジュアル(ヒーローヘッダー)や、ページ中の説明用の図など
Airbnbが提供するLottieというライブラリを使うと、Webアプリに簡単にアニメーションを追加することができます。Lottieは日本でも数年前から使われているようで、検索すればそれなりに情報が出てきます。そこでLottie自体の説明は控えめに、Reactでの利用方法を簡単に書いてみることにします。 尚、LottieはUI/UXデザイナー向けの分野になりますが、ここでは第三者の作成した素材を利用するため、Adobe系ソフトは不要で読み進めることができます。 Lottieとは After Effectsの拡張機能であるBodymovinからアニメーションをJSONデータでエクスポートして、Webやネイティブアプリ上で利用できるようにしたライブラリのこと。サイズが小さく、Webアプリケーションでも問題なく動作するのが特徴です。 LottieFiles LottieFilesはLottieの
XD での Lottie アニメーションの操作
Adobe XD ユーザーガイド はじめに Adobe XD の新機能 よくある質問 Adobe XD でのデザイン、プロトタイプ、共有 必要システム構成 ハードウェアとソフトウェアの要件 Adobe XD、Big Sur、Apple Silicon | macOS 11 ワークスペースの基本 Adobe XD でのアプリ言語の変更 UI デザインキットへのアクセス Adobe XD のアクセシビリティ ショートカットキー ヒントとテクニック デザイン アートボード、ガイド、レイヤー アートボードの基本を学ぶ グリッドとガイドを使う スクロール可能なアートボードの作成 レイヤーの操作 スクロールグループを作成する シェイプ、オブジェクト、パス オブジェクトの選択、サイズ変更および回転 オブジェクトの移動、分散および整列 オブジェクトのグループ化、ロック、複製、コピー、および反転 オブジェク
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 Webアニメーションやモーショングラッフィクスを作るとき、皆さんは何を使って作ってますか？ きっとAfter Effectsを使う方も多いでしょう。ただAfter Effectsからいきなりモーショングラッフィクスを作るのは難しいと考える人も少なくないと思います。 そこで今回はAdobe XDを使ったLottieアニメーションの作り方、使い方について紹介します。
アニメーションライブラリ「 Lottie」 lottie LottieはAirbnbがリリースしたアニメーションライブラリです。 iOS、Android、React Nativeに対応しており、もちろん通常のWebサイトでも使えます。 具体的には、Adobe After Effectsで作ったアニメーションを「Bodymovin」を使ってJSONファイルで出力し、そのJSONファイルを読み込むだけで表示させられるライブラリです。 「Bodymovin」はオープンソースライブラリで、After Effectsのエクステンション（拡張プラグイン）としてインストールできます。 もちろん無料で使えます。 今回は「LottieFiles」を使う方法で 僕はAfter Effectsでゴリゴリにアニメーションを作れるレベルではないので、今回はLottieの公式サイトに用意されている「LottieFil
話題のアニメーションライブラリLottieの導入法をイチから解説。 これであなたのアプリもめっちゃモダンでかわいくなります。 ボタン類も豊富に用意されています。 導入方法 ( SwiftPackageManagerバージョンです。手順通りにやれば大丈夫です） Lottieを導入したいXcodeプロジェクトをひらきます。 Build Settings の Linking から Dead Code Stripping を No にします。 File > Swift Packages > Add Package Dependencyを選択します。 RepositoryにLottieのGitHub URL： https://github.com/airbnb/lottie-ios をコピペします。 そしてNext。 ブランチなどもそのままでNext。 Finish で Lottie フレームワーク
WordPressでLottieアニメーションを追加・編集するための徹底ガイド｜LottieFiles Japan 公式note
モーションはウェブデザインの大きな戦力です。まじめな話、モーションを取り入れることで、ライバルとの違いを際立たせ、ブランドストーリーを伝え、効果的なユーザーインターフェース（UI）を構築し、インタラクティブな、あるいは応答性が高いと感じるウェブサイトを作ることができます。 しかし、デザイナーや開発者のチームを雇わずにWordPressにモーションを取り入れるにはどうすればよいでしょうか。LottieFilesなら簡単です。この記事では、WordPressで無料のLottieアニメーションを追加しカスタマイズするいくつかの方法をご紹介します。 最初に、oEmbedまたはHTMLとJavaScript（JS）でLottieアニメーションを埋め込む方法を説明します。その後、新しいWordPress用LottieFilesプラグインを使用して、Lottieアニメーションを追加する方法や、高度なカス
Lottieアニメーションとは？- LottieFiles
Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。LottieFilesはLottieの作成、編集、テスト、共同制作、配信を、これ以上なく簡単に行えるようにします。
Lottieアニメーションとは？ まず最初に、Lottieアニメーションとはなにか説明しますね。 Lottieアニメーションとは、簡単にいえばWEB上で動作するアニメーションのことです。 イメージとしては、GIFアニメの高品質版のような感じですね。 このように、クオリティの高いアニメーションをWEB上で表示できます。 Lottieアニメーションの特徴は、以下の3つです。 アニメーションがスムーズ 画像ファイルよりも高画質 ファイルサイズが小さい クオリティが高いにも関わらず、ファイルサイズが小さいのは注目すべきポイントです。 まさに次世代アニメーションといえる形式で、これから大きく伸びる可能性を秘めています。 使いこなすことができれば、より目を引く演出ができるでしょう。 Elementor Proでは、Lottieアニメーションをドラッグ＆ドロップするだけで簡単に設置できます。 では、どん
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
ScrollView のスクロール中だけ Lottie アニメーションを止めたい！ (Swift) - Qiita
はじめに Lottie アニメーションを UIScrollView がスクロールしている最中のみ動かしたいときがあったので、その実装を紹介します。 具体的に言うと、 スクロール中: アニメーション停止 スクロール終了: アニメーション再開 という要求です。 準備: Lottie を動かす ViewController ScrollView の動作関係なしに、ただ Lottie を動かす ViewController のコードを紹介します。 今回はこのコードを元に実装してみます。 コメント多めに書いてますので、ある程度は追えるかと思います。 今回はなんとなくランダムな位置に複数の Lottie アニメーションを配置してみました。 import UIKit import Lottie class ViewController: UIViewController { // MARK: - IBO
日頃からアイコンアニメーションばかり作っているわけではないのですけど 新しい環境をセットアップする時だったり、久々に Lottie 実装する時に いつも何となく忘れて検索してしまうので 自分への備忘録を兼ねて手順を纏めて記事にしました。 ❶ まずは素材となるアニメーションを AfterEffects で作成 まずは素材となるアニメーションを AE で作成します。 Tips メモイラレからファイルを持って来た時などは予め「ベクトルレイヤーからシェイプ」を作成を選択して レイヤーをベクター（SVG）化しておきましょう ※これをしておかないと JSON で書き出しが出来なくなるので注意しましょう 方法 ＞＞＞ レイヤーを右クリック → 作成 → ベクトルレイヤーからシェイプを作成 AE側の設定で必要なのは 環境設定のスクリプトとエクスプレッションメニュー内の 「スクリプトによるファイルへの書き込
はじめに Lottieって何？ Lottie（ロッティー）とは、Airbnbが開発している、アニメーションライブラリです。 Adobe After Effectsで作成したアニメーションを、拡張プラグイン「Bodymovin」を使ってjsonとしてエクスポートすることで、モバイルおよびWeb上で簡単にアニメーションを実装することができます。 ▼公式サイト メリット SVGファイルなので高い解像度を保ったまま、サイズの拡大・縮小ができる JSONファイルを使っているので、GIFやMP4よりもファイルが軽い 高品質のシェイプアニメーションを実現できる JavaScriptで再生のタイミングや逆再生などの制御ができる 使うときの注意事項 何でも表現できるわけではない (グラデーションなど） できること・できないことはこちらから そもそもAfterEffectsの基礎知識が必要 AEできない！とい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lottieで簡単にアニメーションを作る｜中央コンピューターサービス株式会社(CCS)
React NativeにLottieアニメーションを実装したときに苦労した3つのこと - Qiita
Lottie-androidを使用してFavoriteStarを実装する方法 - Qiita
Vue.js で Lottie を使ったアニメーションを表示
【Flutter】Figma → Lottie → Flutter
React-LottieでReactに簡単にアニメーションを導入する
After Effectsを使ってXDからLottieの軽量モーショングラフィックスを作る
Lottieを使ってアニメーションを表示させてみる｜notes by SHARESL
LottieでかんたんリッチなアニメーションをiOSのViewにもたらす - Qiita
Elementor Pro版だけの機能「Lottieアニメーション」の使い方まとめ ｜ ミライヨッチ
Lottieでアプリにアニメーションを組み込む話（デザイナー編） | Spinners Inc.
AfterEffects から Lottie のアニメーション JSON を作成する手順｜hiromisatoh
AEで作ったアニメーションをLottieでお手軽にWebで使う