Airbnbで作成されたライブラリ
Lottieを始めましょう🎈
動く画像
作ってみますか?
Airbnbで作られたホットなライブラリ、 Lottieをご存知ですか?
Lottieを使用すると、高品質のアニメーション
自由に作れます。
Lottieについて最初に紹介すると、動くアニメーションのデータ値をJSON形式で出力し、実際のコードでWebやアプリで適用できるようにする技術です。そのスキルを学ぶと、もうGif、Videoに頼らなくても動くアニメーションを実装できるようになります。
このレッスンでは、ロッティについて詳しく学ぶことができます。 Lotyを使うための環境を最初に設定し、アフターエフェクトで制作したアニメーションをBodymovinを介してコードに出力し、JavaScriptでさまざまなインタラクションを実装する方法を学びましょう。
Lottieで実装
アニメーション画像
そのリンクからlottieで作られた例をもっと見ることができます。
例 - クリックしたときにロティアニメーションを実行する画面
例 - スクロールの度合いによるロティアニメーションの実行
例 - アフターエフェクトで製作して出力したアニメーション
誰が聞くといいですか?
止まっていることに
これ以上
満足できない
情熱マンレップデザイナー
私が働いた
アニメーションをコードに
Webに適用したい
能力型デザイナー
Lottie.js
早い時間で
身につけたい
Webパブリッシャー
こんにちは、
コーディングするプロダクトデザイナー
デザインベースです。
私はコーディングを行うプロダクトデザイナーです。デザイナーの観点からどのような部分が難しく、どの部分を実装したいのかについて非常に共感しています。
私たちが学ぶことは途方もないものではありません。難しく見せていなかっただけで、いざとすれば誰でもできることです。ロティを学び、魅力的なデザインをしましょう。
ちなみに、アフターエフェクトで感覚的なアニメーションを教える講義ではありません。作業したアニメーションをコードで出力する方法、Webに適用する方法、およびJavaScriptでどのようにインタラクションを実装するかに焦点を当てた講義です。短くて密度の高いコアだけを教えてくれます。
順番に学習してみてください!
合計9つの講座映像が用意されており、基礎と上級こうして2つのセクションに分かれます。
基礎では、Lottieコードを分析し、使いやすくHTML、CSS、JS、JSONファイルに分割する方法をまず学びます。 Lottieが基本的に提供する機能を使用し、操作方法を習得できます。
クリーンアップされていない複雑なコードをファイル別に分離する
Advancedでは、JavaScriptを使用してマウスオーバー、スクロール、クリックなど、さまざまなアクションへのインタラクションを実装できます。 GIFとは最大の違いです。フレームを好きなように直接コントロールできます。
直接JavaScriptでインタラクションコードを実装する
よくある質問💬
Q. ロティを学ぶと何がいいですか?
エペックで作業したアニメーションをWeb、アプリに適用できます。デザインのクオリティを高める要素です。
Q.コードを知らないデザイナーですが、役に立ちますか?
Lottieが何であるか、どのように機能するかという原則だけを知っていても、開発者とコラボレーションするときに楽しい作業をすることができます。ただし、基本的なHTML / CSSおよびJavaScriptの知識があれば、より豊富な活用が可能です。
Q. 講義を聞く前に準備すべきことはありますか?
講義に使用されるツールは、アフターエフェクト、ビジュアルスタジオ、イラストレーターです。そのツールの使い方を知ってみることをお勧めします。そしてJavaScriptの基礎知識を持っていなければ、高度な講座を難なく聞くことができます。
Q. サンプルファイルを提供しますか?
当然提供します。勉強することができる限り難しくないように講義に使用したサンプルファイルを提供します。
Q. アフターエフェクトの使い方やアニメーション制作法も教えてください。
アフターエフェクトで感覚的なアニメーションを教える講義ではありません。作業したアニメーションをコードで出力する方法、Webに適用する方法、およびJavaScriptでどのようにインタラクションを実装するかに焦点を当てた講義です。