Markdy: Mermaidダイアグラムのように、しかし動きのために

1 シーン設定 すべてのアニメーションはキャンバスの定義から始まります。これは.markdyファイルの最初の行でなければなりません。 scene width=800 height=400 fps=30 bg=#fafafa プロパティデフォルト説明 width800ピクセル単位のキャンバス幅 height400ピクセル単位のキャンバス高さ fps30レンダリングエンジンのフレームレート bgwhite任意のCSSカラー値（例: #1a1a2e） durationauto合計時間（秒）を上書き 2 アクターと配置 アクターはシーン内のオブジェクトです。 at (x, y) で配置し、オプションの修飾子を追加します。 actor a = figure(#c68642, m, 😎) at (100, 200) scale 1.2 actor b = text("Hello World") at (50, 50) size 24 actor c = box() at (300, 200) タイプ引数説明 text"引用符付き文字列"プレーンテキストラベル。サイズでカスタマイズ可能。 box—100x100のソリッドボックス。プロトタイピングに最適。 figureskinColor, gender, face関節を持つ棒人間。 spriteasset name画像やアイコンのアセットをレンダリングします。 修飾子: opacity (0–1), scale, rotate, size (テキストのみ), z (レイヤー順序)。 3 タイムラインと動き @time: actor.action()でタイムラインにアクションをスケジュールします。時間は10進秒で指定します。 @0.5: a.enter(from=left, dur=0.8) @1.5: a.move(to=(400, 200), dur=1.0, ease=out) @3.0: a.fade_out(dur=0.5) アクションパラメータ内容 enterfrom, durキャンバスの端からスライドイン moveto, dur, ease目標座標に移動 fade_in / fade_outdur不透明度をアニメーション化 scale / rotateto, durアクターを変換 イージング: linear, in, out, inout 4 スピーチとエフェクト コミックの吹き出しでアクターに話させたり、揺れのような動的なエフェクトを追加したりできます。 @1.0: a.say("Hello! 👋", dur=1.5) @2.5: a.shake(intensity=8, dur=0.4) アクションパラメータ内容 say"text", durアンカーされた吹き出しを表示 shakeintensity, durX軸で振動 throwasset, to, durアクター間で投射物を発射 5 表現と手足 figureアクターは、表現豊かなアニメーションのために個別に制御できる関節のある手足を持っています。 @1.0: a.face("😵") @1.5: a.rotate_part(part=arm_right, to=130, dur=0.4) @2.0: a.punch(side=right, dur=0.2) @2.5: a.kick(side=left, dur=0.3) アクションパラメータ face"emoji" — 即座に表情を入れ替え rotate_partpart, to (度), dur punch / kickside (left|right), dur 体の部位: head, face, body, arm_left, arm_right, leg_left, leg_right 5b ジェスチャーとポーズ 組み込みのジェスチャーを使用すると、rotate_part呼び出しを連鎖させる手間が省けます。poseは複数のパーツを一度に設定します。 @1.0: a.wave(side=right, dur=0.8) @2.0: a.nod(dur=0.4) @3.0: a.pose(arm_left=70, arm_right=-70, dur=0.4) @4.0: a.jump(height=25, dur=0.5) @4.5: a.bounce(intensity=12, count=3, dur=0.5) アクションパラメータ内容 waveside, dur手を振るジェスチャー — 腕を上げ、振動させ、戻す noddurうなずく — 頭を2回上下させる posearm_left, arm_right, leg_left, leg_right, head, body, dur複数のパーツを一度に設定 jumpheight, durスクワッシュ/ストレッチでジャンプ bounceintensity, count, dur縦方向のバウンスが減少 6 アセットとスプライト 外部の画像やベクターアイコンをアセットとしてロードし、スプライトアクターとしてレンダリングします。 # Declare assets first asset cat = image("https://example.com/cat.gif") asset fire = icon("lucide:flame") # Render them as actors actor meme = sprite(cat) at (400, 200) scale 0.5 actor icon = sprite(fire) at (100, 100) scale 2.0 image("url")画像、GIF、写真 — 任意のURLまたはローカルパスをロードします。 icon("set:name")IconifyからSVGアイコンをロードします。拡大してもぼやけません。 7 変数とテンプレート 値にはvarを、再利用可能なアクターテンプレートにはdefを使用して繰り返しを避けます。 var accent_skin = #fad4c0 def char(skin, face) { figure($${skin}, f, $${face}) } actor lily = char($${accent_skin}, 😊) at (100, 200) varは値を置換します（#hexカラーにも堅牢です）。defはアクターファクトリテンプレートを作成します — JavaScriptなしでキャラクターシステムを構築します。 8 シーケンス 複数のステップからなる振り付けを再利用可能なseqブロックにまとめます。究極の強力な機能です。 seq wave(arm, angle) { @+0.0: $.rotate_part(part=$${arm}, to=$${angle}, dur=0.3) @+0.3: $.rotate_part(part=$${arm}, to=25, dur=0.3) } @2.0: lily.play(wave, arm=arm_left, angle=-80) $は呼び出し元のアクターを参照します。@+で示される時間は、.play()がトリガーされてからの相対オフセットです。