ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近はUIだけではなく、アクションによって起こるアニメーション技術にも注目が集まっています。Googleの提唱するMaterial Designでも単にタップするだけでなく、その後のアニメーションまで含めてデザインしています。

そんなアニメーションを含めたデザインを行うためのDSLとしてuilangが登場しました。全く新しい言語としてとても面白そうですよ。

uilangの使い方

こちらはクリックすると消えるデモ。
こちらはクリックすると消えるデモ。

<code>
  clicking on ".hide" adds class "hidden" on "#notification"
</code>

こちらが肝です。ボタンをクリックするとhiddenを追加するというのを文章として定義できます。

スイッチのデモ。
スイッチのデモ。

この場合は以下のようになります。

<div id=switch>
  <div id=circle></div>
</div>

<code>
  clicking on "#switch" toggles class "active" on "#switch"
</code>

togglesという定義でクラスの付け替えが出来ます。

他にもこんなメニュー表示や…
他にもこんなメニュー表示や…

タブ切り替えもできます。
タブ切り替えもできます。

uilangは実際のアニメーションを行う訳ではなく、CSSを変化させることでCSS3によるアニメーションを実現させます。JavaScriptで書いていたアニメーション周りの記述をuilangで置き換えてみるのは面白そうです。

uilangはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

uilang

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2