JavaScript

アニメーションライブラリ chrono-kinesis でシートダイアログをバネで表示非表示するExampleを追加しました。 Exampleリンク 内部実装 HTMLのdialogの実装例としても、参考になるのではないかと思います。 ダイアログの実装 class DialogGateClock { // Clockを起動しダイアログを閉じることを要求する public requestClose() { if (!this.target.isConnected || this.state !== "open") return; this.state = "request-close"; this._heartbeat(); } // Clockを起動せずにDialogを閉じる public slientClose() { if (!this.target.isConnected || this.state === "close") return; this.state = "close"; this._removeListeners(); this._close(); } // ... } requestCloseは実際にHTMLに対して終了（close）を行わず、その動作だけインスタンスに保持して、シミュレーションしていきます。 十分に減退したら、呼び出し元からslientCloseを使って実際に要素をcloseします。 また複数のモーダルに対応しています。 modal: top-layerに配置されるbackdropのありのダイアログ modeless: top-layerに配置されないbackdropも基本ないダイアログ popover: top-layerに配置されるbackdropの基本ないダイアログ それぞれ、モーダル外クリックやESCキーも含めて、いい感じに開閉アニメーションするようになっています。 ※popoverは古いブラウザでは非対応なのでmodelessにフォールバックしています。 手持ちのiPhone8では、、対応しておらず。。 constructor(element, options) { if (options.type === "popover" && !DialogGateClock.enablePopoverSupport(target)) { console. [続きを読む]

シミュレーションです。バネです。設計を考えるのが楽しくて３, ４回は書き直してました。 https://chrono-kinesis.yyyoichi.com デモもあるよ。 https://chrono-kinesis.yyyoichi.com/guides/example ざっくり仕様 なんでもバネにできる ベクトルは無限に拡張可能 アニメーション不要時のrequestAnimationFrameの停止 依存関係なし Springパラメータの動的調整 DOMでもCanvasでもWebGLでも設計上動作可能 大雑把ですが、軽量物理シミュレーションUIライブラリ、という感じを目指しています。 利用例 これはマウスを追従するスクリプトです。 import {DefaultSimulatorService, DomPhysics, DomSource, DomVisualizer, Kinetics, MousePositionClock} from "@yyyoichi/chrono-kinesis" const simulation = new DefaultSimulatorService({tickRate: 0.5}); const mouse = new MousePositionClock(document.getElementById("mouse-hover-box")!); const pointer = new DomSource(document.getElementById("mouse-hover-pointer")!); simulation.add({ clock: mouse, target: mouse, kinetics: new Kinetics(pointer.position()), physics: new DomPhysics(pointer, new DomVisualizer()) }); simulation.run(); 宣言的で読みやすい気がしています。 内部仕様 Simulatorがオーケストラレーターとして、clock, target, kinetics, physics を動作させます。 clockは入力検知です。 イベントがあればシミュレーションが開始されていきます。 「マウスが乗った」とか「クリックした」とかなんでもコールバックをimplすれば良いことになっています。 最後にいつイベントが発生したかを内部にもっているので、しばらくイベントがなければシミュレーターは停止します。 targetは向かうべきベクトルを指します。 基本的にベクトルはnumber[]で表現される任意の文脈の値です。 座標系の場合、ライブラリとして一貫してドキュメントルートからの座標を扱います。 次元数は問いません。 kineticsは演算装置です。 targetからの値を受け取り決められた速度で目指します。 初期値を受け取り演算の状態を保持します。 十分に減退したかどうかの状態を内部に持ちます。（シミュレーターが聞きに来て停止するかどうかの判断をします。） physicsは演算結果を当てる要素です。 受け取ったベクトルの意味を解釈して、基本DOMにスタイルを当てます。 simulator. [続きを読む]