vq v1.1.1 をリリースしました。主な更新点は、イベントハンドリング機能の追加です。
vq は複雑なアニメーションを簡潔に書くことを目指しているライブラリで、関数型プログラミングの考え方から着想を得ています。今回の更新点以外の詳しい説明は以前書いた記事や README を参照してください。
Example
今回のアップデートで vq.click
, vq.focus
など、DOM 要素のイベントが発火してからアニメーションを実行するための関数を追加しました。関数の一覧は README に記載しています。例えば、クリックするたびに要素を移動させるようなコードは以下のように書けます。
const box = document.getElementById('box'); // アニメーションのプロパティ & オプション const move1 = {/* ... */}; const move2 = {/* ... */}; const move3 = {/* ... */}; // box をクリックした時になんらかのアニメーションを実行したい const clickBox = vq.click(box); const moveBox = vq.sequence([ clickBox(vq(box, move1)), clickBox(vq(box, move2)), clickBox(vq(box, move3)), (done) => moveBox(done) // 無限にアニメーションをさせる ]); moveBox();
また、vq.element
という、より低レベルな関数も提供しており、イベントの発火後にアニメーションを実行するかどうかをより細かくコントロールすることができます。第一引数に指定した DOM 要素が、第二引数に指定したイベントを監視します。第三引数には関数を渡すことができ、イベントが発火するたびにこの関数が実行されます。この関数が true
を返した時、指定したアニメーションが実行されます。
const alert = document.getElementById('alert'); // アニメーションのプロパティ & オプション const show = {/* ... */}; const hide = {/* ... */}; // Enter キーが押された時に何らかのアニメーションを実行したい const pressEnter = vq.element(window, 'keypress', event => { return event.which === 13 // press enter }); vq.sequence([ vq(alert, show); // アラートを表示させる pressEnter(vq(alert, hide)) // Enter が押されたらアラートを隠す ])();
イベントのハンドリングを vq で扱えるようにしたことで、ユーザーのインタラクションを伴うアニメーションもより簡単にかけるようになったのではないかと思います。それぞれのイベントハンドラはアニメーションとは独立した関数として生成できるため、小さなコードを組み上げるような実装ができ、コードの見通しが良くなることを期待しています。これからの更新では、イベントハンドラの結合や、DOM 以外のイベントを扱うための API を実装する予定です。