@cardenelabs/cdl 0.40.3 → 0.40.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.3",
+  "version": "0.40.4",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/anim/core/timeline.ts

@@ -1,4 +1,4 @@
-import { clamp01, easeOutQuint } from "./easing";
+import { clamp01, easeOut } from "./easing";
 import type {
   EasingFn,
   PhaseDescriptor,
@@ -30,7 +30,7 @@ import type {
 export type TimelineOptions = {
   /** 自動進行時の Phase 間 wait (ms)、 デフォルト Phase の durationMs に従う */
   autoAdvanceMs?: number;
-  /** Phase 内補間の easing、 デフォルト easeOutQuint */
+  /** Phase 内補間の easing、 デフォルト easeOut */
   easing?: EasingFn;
   /** loop 再生するか (settled 後に最初に戻る)、 デフォルト false */
   loop?: boolean;
@@ -86,7 +86,17 @@ export class Timeline {
       throw new Error("Timeline requires at least one phase");
     }
     this.phases = phases;
-    this.easing = options.easing ?? easeOutQuint;
+    /**
+     * 既定の曲線 (cdl#736)。
+     *
+     * **`easeOutQuint` は動きが前半に寄りすぎる**。 実測で、段の長さ 1.2 秒の tween は
+     * 9 割が最初の 0.449 秒で終わり、残りの 0.75 秒はほとんど止まって見えた
+     * (半分に達するのが段の 13.1% の時点)。 段を長くしても形は変わらず、止まって
+     * 見える時間だけが伸びる。
+     *
+     * `easeOut` は半分に達するのが 34.2% の時点で、段の終わりまで動き続ける。
+     */
+    this.easing = options.easing ?? easeOut;
     this.loop = options.loop ?? false;
     this.autoAdvanceMsOverride = options.autoAdvanceMs;
     this.phaseHoldMs = options.phaseHoldMs ?? 0;

package/src/anim/core/types.ts

@@ -40,7 +40,7 @@ export type TimelineState = {
   /**
    * 曲線を通す前の進行度 (0..1、 cdl#711)。 経過時間そのものの割合。
    *
-   * `phaseProgress` は既定で `easeOutQuint` を通るため前半に動きが寄る。
+   * `phaseProgress` は既定で `easeOut` を通るため素の進みより先に出る。
    * **値が落ち着く動きには合うが、 線を引く動きには合わない** =
    * `1.2s` の段で半分に達するのが 158 ms になり、 折れ線の 5 点のうち 4 点が
    * 292 ms の間に出てしまう (実測)。

package/src/render.tsx

@@ -136,8 +136,10 @@ export function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hi
   /**
    * 描く動きが読む進み (cdl#711)。 曲線を通さない = 経過時間そのものの割合。
    *
-   * 線を引く動きに `easeOutQuint` を当てると前半に寄り、 折れ線の 5 点のうち 4 点が
-   * 292 ms の間に出る。 ペンの速さは一定であるほど「1 つずつ現れる」 が読める。
+   * 線を引く動きに段の曲線を当てると前半に寄る。 当時の既定 (`easeOutQuint`) では
+   * 折れ線の 5 点のうち 4 点が 292 ms の間に出た。 曲線をゆるめた後 (`cdl#736` の
+   * `easeOut`) も寄る向きは同じなので、 描く動きは曲線を通さないままにする。
+   * ペンの速さは一定であるほど「1 つずつ現れる」 が読める。
    */
   const drawProgress = reduced ? 1 : state.phaseLinearProgress;