CG Magazine

Lottieによるリッチアニメーション実装のためのAfterEffectsハマりどころ

この資料は2018/02/14の第二回iOS UI実装勉強会で発表した内容です。当時調査した内容をそのまま編集しているので情報が古い場合があります。ご了承ください。最新情報はドキュメントを参照してください。下記がドキュメントです。はじめにiOSにAfter Effectsで作ったリッチアニメーションを導入できるLottieライブラリすごい！とおもったのですが，AfterEffectsのすべての機能を使えるわけではありませんでした・・・・・・アニメーションをデザイナー

使えるAftereffectsプラグインまとめ

今回は、Aftereffctsでモーションデザインやアニメーションをする方向けに「使えるAftereffectsプラグインまとめ」をnoteにしてみました。ちなみに2Dモーション・アニメーション向けです（2020年4月に、「KBar2」と「Labels 3」「BG Renderer MAX」を、2020年11月に「Timelord」を追加）。プラグインは星の数ほどありますが、リサーチしてだいたいの目星をつけ、買いまくりました！ AutoCrop ButtCapper（無

【翻訳してみた】マテリアルデザイン - AfterEffects モーションステッカーシート

前置きモーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をすることにしました。こちらはGoogleが発表したマテリアルデザインガイドラインからモーションステッカーシートの翻訳になります。引用元 Google - Material Design - Motion Sticker Sheet Motion Sticker Sheet - Material Design ※動画像データもこちらから引用させていただいております。しっかりとした情報が欲し

【デザイナー向け】Lottieの使い方。アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担を減らそう！

こんにちは。ノゾエ(＠conoito)です。今回は、Lottie x Bodymovinを使って、アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担が減らそう！という話です。今まで私たちのチームでは、ネイティブアプリでアニメーションを実装する際、熟達した職人（エンジニア）による洗練された技と長い年月を費やして培われた眼力を駆使してmp4で渡した動画をコマ送りし、zeplinから書き出された素材を組み合わせて、アニメーションを作成していました。

Lottieで使えるアニメーション素材を作る際に必要な準備4つ

Lottieを使って、webでもアプリでも動くアニメーションを先日作ってみた。あり物で作ったアニメーションサンプル(超適当)はこちら。キラキラ~ Sketch2AE- Sketchファイル配置したオブジェクトをコピーし、AfterEffectsに貼り付けられるプラグイン - SketchとAfter Effects両方に対して設定が必要 - After Effectsのワークスペースのパネルにセットしておくと使いやすいめちゃくちゃダウンロードに手間取ってしまったので

Lottieはじめました

こんにちは、宮島（4hintaro_m）です。今回は、最近ちらほら名前を聞くようになったLottieについて、そのメリットや注意すること、できること、今後の展望などをまとめてみました。 LottieはAirbnb社が開発した、Aftereffctsで作ったモーションやアニメーションをJSONファイルに書き出して、簡単に実装できるアプリです。UIのマイクロインタラクション分野で活躍できそうです。去年から耳にしていましたが、よく理解していなかったので触っていませんでした

UIモーション制作ツールまとめ

このnoteは、UIモーションを制作できるツールをまとめた記事です。ツール多すぎ問題UIモーションはAfter Effects以外に、プロトタイピングツールを使って制作する。しかしプロトタイピングツールも群雄割拠の時代。山ほどあるツールから自分の業務に最適なモノを探さなければいけません。以下では、なんとか厳選して選んだUIモーションツールの精鋭たちをまとめてみた。 3種類のプロトタイピングツールプロトタイピングツールには大きく分けて、・トランジション型・イン

ARアプリのUIトレースをAfter Effectsを使ってやってみた！

こんにちは、Yahoo! 乗換案内で2年間デザインをしたあとに、GraffityというARコミュニケーションのスタートアップでUI/UX Designしてます。RISAです。最近UIトレースという言葉をよく聞くようになりました。ココディーさんのUIトレースのnote、とても勉強になります。 Basecampの坪田さんもUIトレースを推奨しています。そこで今回は私は、ARアプリのトレースをしてみようと考えました。目次 ARアプリのトレースってどうやるの？ After

GUIデザインで参考にしたサイト

自分はソフトウェアのGUIデザインにおいて、映画のFUIを参考にすることが多々あります。（FUI＝フィクションユーザーインターフェース、スクリーングラフィックスとも言われたり？）過去に参考にした海外プロダクションを下記にまとめました。 ■Jayse Hansen（個人）アイアンマンに始まるFUI実績はトップクラスかと。参考：アイアンマン、エンダーのゲームのFUIとか。 ■Ash Thorp（たぶん個人） FUIの制作過程のチュートリアル（英語だけど…）など参考：

#UI