今日は、アニメーションが複雑なプロジェクトに役立つGitHubのリポジトリをいくつか紹介します。
さっそく見ていきましょう。
Web、Android、iOS、React NativeでAfter Effectsアニメーションをネイティブにレンダリングする。http://airbnb.io/lottie/
Lottieは、Adobe After EffectsでエクスポートされたjsonアニメーションをBodymovinで解析し、モバイル上でネイティブにレンダリングするモバイルライブラリです！
デザイナーが作成した美しいアニメーションを手間をかけずにシップすることが可能です。言葉よりも画像の方が千の言葉に値すると言われますが、ここでは13,000の価値があるでしょう。
オプション1（推奨）：
aescripts + aepluginsからダウンロード: http://aescripts.com/bodymovin/
オプション2：
またはAdobeストアから入手 https://creative.adobe.com/addons/products/12557 CC 2014以降。
オプション3：
- リポジトリからZIPをダウンロード。
- 内容を抽出して、'/build/extension'から.zxpファイルを取得。
- aescripts.comからZXPインストーラを使用。
オプション4：
- After Effectsを閉じる
build/extension/bodymovin.zxpにあるzippedファイルを、以下のAdobe CEPフォルダに展開:
WINDOWS:
C:\Program Files…
このライブラリを使えば、Adobe After Effectsで作成したアニメーションを直接ウェブサイトにエクスポートできます。
例:
マウスの動きでコントロールできる美しいパララックス効果を作成できます。動くオブジェクトのスピードも調整可能です。
シンプルで軽量なフラットサーフェスシェーダーは、WebGL、Canvas 2D、SVGなどに対応しています。デモをチェックしてみてください。
ライト
ライトは、3D位置のベクターと、そのアンビエントおよびディフューズ放射を定義する2つのカラーオブジェクトで構成されています。これらのカラーチャネルは、メッシュのマテリアルとの相互作用し、トライアングルの色を計算します。
トライアングル
トライアングルは、それぞれの角のx, y, z座標を定義する3つの頂点から構成されています。これら3つの頂点に基づき、さらに3次元ベクターが自動的にトライアングルの中心で導出されます。
Video.jsのプログレスバーにカスタマイズ可能なマーカーを表示するプラグインです。特定のポイントで再生時にビデオ上にオーバーレイテキストを表示するために使用できます。
デモとドキュメンテーションはこちら。
JSBinのデモはこちら。
ダウンロード：
-
gitでmasterをダウンロード --
git clone git@github.com:spchuang/videojs-markers.git -
新しいリリースのzip/tarファイルをダウンロード
-
bowerを使用してダウンロード --
bower install videojs-markers
クイックスタート：
'videojs.markers.js'プラグインとスタイルシートを、videojsスクリプトの後に追加します。
<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<link href="videojs.markers.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src='../src/videojs.markers.js'></script>
基本的な使い方：ビデオにブレイクマーカーを表示する。
ビデオにブレイクを追加するには、オプションのリストに新しい時間（秒単位）を追加します。
// video.jsを初期化
var video
…
このプラグインを使用すると、サイト上のビデオに必要なマークを配置し、必要なタイムコードに簡単に切り替えることができます。
シンプルで軽量なJavascriptライブラリーでダイナミックなグリッドレイアウトが可能です。
このライブラリーを使えば、別々の@mediaスタイルを作成する必要はありません。コンテナーを指定するだけです。
SVGコンポーネントを使用して、Facebookカードのローディングのようなプレースホルダーローディングを作成してください。
95%のアニメーションのユースケースでは、ハードコーディングされたイージングカーブや持続時間に頼る必要はありません。UIエレメントに対してスティフネスとダンピングを設定し、残りは物理のマジックにお任せします。この方法では、途中でアニメーションの動作が中断した場合などにも心配する必要はなく、APIも大幅にシンプルになります。
例:
Zdogを使用して、形状を追加することで3Dモデルを作成できます。このデモでは、Getting startedでウォークスルーをご覧いただけます。
見やすいビジュアルでアニメーションを作成できますが、同時に、コンテンツの見た目を豊かにし、細部まで気を使った素敵なアニメーションを作ることができます。
私のTwitterもチェックしてみてください。私の作品もそちらに投稿しています。
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo
