Motion UIでアニメーションとトランジションを作成する方法
アニメーションとトランジションにより、デザイナーは変化を視覚化し、コンテンツを区別することができます。アニメーションとトランジションは ユーザーが何かが変わったときに認識するのを助ける たとえば、サイト上では、ボタンをクリックすると、新しい情報が画面に表示されます。アプリやWebサイトに動きを加えると、ユーザーエクスペリエンスが向上します。 より直感的な方法でコンテンツを理解する.
アニメーションやトランジションは、最初から作成することも、ライブラリやフレームワークを使用して作成することもできます。フロントエンドの皆さん、私たちにとって朗報は、Foundationの作成者であるZurbが昨年10月にオープンソースのMotion UI、Sassをベースにしたアニメーションとトランジションのライブラリを作成したことです。.
当初はFoundation for Appsにバンドルされていましたが、現在では、スタンドアロンリリースでは、 アニメーションキューイングシステム そして 柔軟なCSSパターン. Motion UIは、Orbitスライダ、Togglerスイッチャ、Revealモーダルなど、Foundationフレームワークの一部のコンポーネントにも強力な機能を提供するので、非常に堅牢なツールです。.
入門
Motion UIはSassライブラリですが、Zurbは開発者にコンパイル済みCSSのみを含む便利なスターターキットを提供するため、必ずしもSassと一緒に使用する必要はありません。 Motion UIのホームページからダウンロードして、定義済みのCSSアニメーションとトランジションクラスを使用してプロトタイプをすばやく開始できます。.
スターターキットには、Motion UIだけでなく、Foundationフレームワークも含まれています。つまり、必要に応じて、Foundationグリッドおよびその他のFoundation for Sitesの機能をすべて使用できます。.
スターターキットも付属しています index.html フレームワークを素早くテストするためのファイル.
もっと洗練された調整が必要でMotion UIの強力なSassミックスインを利用したい場合は、ソースを含むフルバージョンをインストールすることができます。 .scss npmまたはBowerのファイル.
Motion UIのドキュメンテーションは現在まだ半分焼き固められています。あなたはGithubでここでそれを見つけることができます、またはあなたが望むならそれに貢献することができます.
クイックプロトタイピング
プロトタイピングを開始するには、 index.html スターターキットのファイル、または独自のHTMLファイルを作成します。 Foundationグリッドを使用してレイアウトを構築できますが、Motion UIはFoundationフレームワークなしでスタンドアロンライブラリとしても使用できます。.
Motion UIには、3つの主な定義済みCSSクラスがあります。
- トランジションクラス - スライド、フェード、およびヒンジ効果などのトランジションをHTML要素に追加することを可能にします.
- アニメーションクラス - さまざまな揺れ、揺らぎ、回転効果を使用できます。
- モディファイアクラス - トランジションクラスとアニメーションクラスの両方と連携して動作させることで、動きの速度、タイミング、および遅延を調整できます。.
HTMLを構築する
定義済みのCSSクラスの素晴らしいところは、クラスとしてだけでなく他のHTML属性としても使用できないことです。たとえば、 にそれらを追加 値 の属性 タグ, またはできます あなた自身の習慣でそれらを使ってください データ-* 属性 同様に.
以下のコードスニペットでは、この後者のオプションを選択しました。 別々の動作と修飾子クラス. 私は使った スロー そして やさしい 修飾子属性をクラスとして作成し、カスタムを作成 データアニメーション の属性 スケールイン 遷移。の 私をクリック ボタンは効果を引き起こすためのものです。.
jQueryを使ってアニメーションやトランジションを再生する
Motion UIには小さなJavaScriptライブラリも含まれており、特定のイベントが発生したときにトランジションやアニメーションを再生できます。.
ライブラリ自体は、スターターキットの中にあります。 motion-ui-starter> js>ベンダー> motion-ui.js パス.
それは作成します MotionUI 2つのメソッドを持つオブジェクト animateIn（） そして animateOut（）. 特定のHTML要素にバインドされたトランジションまたはアニメーション（
$（function（）$（ "。button"）。クリック（function（）var $ animation = $（ "＃boom"）。data（ "animation"）; MotionUI.animateIn（$（ "＃boom"） 、$ animation）;）;）;
上記のコードスニペットでは、 データアニメーション jQueryの組み込みを使用して属性 データ（） その後、メソッドと呼ばれる animateIn（） の方法 MotionUI 物.
これが完全なコードと結果です。私はFoundationフレームワークのビルトインボタンクラスを使いました。 私をクリック ボタンをクリックし、基本的なCSSも追加しました.
Motion UIは非常に柔軟なので、他にもさまざまな方法でトランジションやアニメーションを追加してトリガーすることができます。.
例えば上の例では、必ずしも使う必要はありません。 データアニメーション カスタム属性ですが、単に振る舞いクラスを追加することができます。 addClass（） へのjQueryメソッド
$（ '＃boom'）。addClass（ 'スケールアップ'）;
Sassによるカスタマイズ
Motion UIの既製のCSSクラスは、Sassの助けを借りて簡単にカスタマイズできるデフォルト値を使用します。各トランジションとアニメーションの後ろにSassミックスインがあり、それによってエフェクトの設定を変更することができます。これにより、完全にカスタムなアニメーションやトランジションを簡単に作成できます。.
スターターキットではカスタマイズは機能しませんが、自分のニーズに合わせてエフェクトを設定したい場合はSassバージョンをインストールする必要があります。.
トランジションやアニメーションをカスタマイズするには、まずはじめに 関連するmixinを探す. の _classes.scss このファイルには、コンパイルされたCSSクラスの名前とそれぞれのミックスインが含まれています。.
この例では、 .スケールイン 属性を見てみると _classes.scss, それを利用していることがすぐにわかります。 mui-zoom 混入します：
// @mixin motion-ui-transition …//拡大/縮小@include mui-zoom（in、0.5、1）; …
モーションUIは ムイ- ミックスインの接頭辞で、各ミックスインには独自のファイルがあります。 Motion UIには、わかりやすい命名規則があります。 mui-zoom でミックスイン _zoom.scss ファイル：
@ミキシンmui-zoom（$状態：in、$ from：1.5、$ to：1、$ fade：マップ取得（$ motion-ui-settings、スケールとフェード）、$ duration：null、$ timing： null、$ delay：null）…
同じ手法を使用して、それぞれのSass変数の値を変更することで、アニメーションまたはトランジションのすべての機能を簡単に制御できます。.
修飾子クラスの設定
アニメーションやトランジションの動作（スピード、タイミング、ディレイ）を制御するモディファイアクラスもSassで設定可能で、それぞれの変数の値を変更します。 _settings.scss ファイル.
変更を加えたら、Motion UIは 新しい値をデフォルトとして使う アニメーションやトランジションごとに、関連するミックスインを1つずつ設定する必要はありません。.
