最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 - ICS MEDIA

2024/04/05 9 users ICS MEDIA 実装方法 アニメーション ベクター画像

「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lotti... 続きを読む

制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA

2023/01/19 13 users WebGL ICS SVG メインビジュアル アニメーション

制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するため... 続きを読む

Jetpack Composeを使った複雑なアニメーション事例 - Mirrativ Tech Blog

2022/07/29 25 users Jetpack Compose Mirrativ 雑談 演出

ミラティブのAndroidエンジニアのmorizoooです。 MirrativのAndroidアプリでは、新規で作る画面には積極的にJetpack Composeを活用しています。 tech.mirrativ.stream Mirrativは、多くのユーザーがゲームや雑談などの配信をしており、配信を盛り上げるための演出として通常のアニメーションに加えてLottieも織り交ぜ、... 続きを読む

Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends

2019/11/12 115 users ネイティブアプリ Airbnb Walgreens Uber

Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非常におすすめのライブラリです。 GoogleやUber、Walgreensなど世界の有名企業も自社アプリケー... 続きを読む

Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる - SMARTCAMP Engineer Blog

2019/04/18 280 users Vue.js フレームワーク コンポーネント指向

デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、Vue.js + Elelment UI + Lottie という... 続きを読む

BOOTH iOSで購入完了時にLottieのアニメーションを実装しました！ #booth #booth_pf - pixiv inside

2018/12/28 19 users 田中 実装 Oxygen Not Included おぱん

おばんです、Oxygen Not Includedにハマってしまって、年末年始を溶かすことが確定している田中です。 先日リリースしたBOOTH iOS v2.18.0から購入完了時にアニメーションが再生されるようになりました。 今回はその実装に関する話として以下をまとめていきます。 作ったもののドヤリング Lottieとは BOOTH iOSの購入完... 続きを読む

Lottieでアプリにアニメーションを組み込む話（iOSプログラマー編） • Yuta Tokoro

2018/06/07 40 users クライアントアプリ アニメーション ライブラリ アプリ 実際

この記事について この記事は Lottieでアプリにアニメーションを組み込む話（デザイナー編） を受けての iOSプログラマー編 になります。 デザイナー編では実際にアニメーションを作る具体的な方法を含め解説されていますので是非ご参照ください。 Lottieとは LottieとはAdobe After Effectsで作ったアニメーションをそのままクライアントアプリで表示するためのライブラリです。... 続きを読む

Lottieであなたの「サービス」をもっとリッチにアニメーションさせる話 - pixiv inside

2017/12/19 46 users pixivFANBOX PHP pixiv inside

この記事は ピクシブ株式会社 Advent Calendar 2017 の19日目です。 こんにちは、17新卒エンジニアのまつらいです。普段は主に pixivFANBOX というサービスでJavaScriptやPHPを書いています。今日は、ウェブブラウザ上で動く軽量で扱いやすいアニメーションを実現させることができる、僕の大好きな「Lottie / Bodymovin」について作例を含めて紹介します... 続きを読む

lottieが大変よろしいものだった - アナログ金木犀

2017/02/19 58 users canvas アナログ金木犀 結果 話題 実際

2017 - 02 - 19 lottieが大変よろしいものだった 仕事でかっこいいインタラクションを実装することになって、 canvas でごりごり頑張るかなぁとも思ったのだけど、少し前に話題になったlottieを使ってみることにした。 結果、 レベルの高いアニメーションをすこぶる簡単に1時間もかからず実装することができた 。 実際に導入してみるところまで +α を説明してみる。 lottieと... 続きを読む

Lottie

2017/02/01 317 users

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 a... 続きを読む