• lovesusu

    图片

    图片```
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鹈鹕骑自行车 · Pelican on a Bike</title>
    <style>
    html, body {
    margin: 0;
    height: 100%;
    }
    body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#eaf6fd, #d9f0fb);
    overflow: hidden;
    }
    svg {
    display: block;
    / 900:500 为 viewBox 宽高比,保证 SVG 不会因 flex 收缩塌缩为 0 /
    width: min(900px, 100vw, calc(100vh * 1.8));
    height: auto;
    }
    </style>
    </head>
    <body>
    <svg viewBox="0 0 900 500" xmlns="http://www.w3.org/2000/svg&quot; role="img" aria-label="一只鹈鹕骑着自行车">
    <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#6db6ea"/>
    <stop offset="1" stop-color="#d9f0fb"/>
    </linearGradient>
    <linearGradient id="grassGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#8ed06b"/>
    <stop offset="1" stop-color="#5cb147"/>
    </linearGradient>
    <linearGradient id="roadGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#646a72"/>
    <stop offset="1" stop-color="#545a61"/>
    </linearGradient>
    <radialGradient id="sunGrad" cx="0.35" cy="0.35" r="0.9">
    <stop offset="0" stop-color="#ffe27a"/>
    <stop offset="1" stop-color="#f7b733"/>
    </radialGradient>
    <radialGradient id="bodyGrad" cx="0.4" cy="0.35" r="0.95">
    <stop offset="0" stop-color="#fffdf7"/>
    <stop offset="0.7" stop-color="#f9efe0"/>
    <stop offset="1" stop-color="#f0e0c8"/>
    </radialGradient>
    <linearGradient id="wingGrad" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0" stop-color="#fffdf7"/>
    <stop offset="1" stop-color="#ead9c0"/>
    </linearGradient>
    <linearGradient id="beakGrad" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0" stop-color="#f7b733"/>
    <stop offset="1" stop-color="#ea8f24"/>
    </linearGradient>

    <!-- 轮辐(单根,通过 use 旋转复制) -->
    <line id="spoke" x1="8" y1="0" x2="47" y2="0" stroke="#7c848d" stroke-width="2"/>
    <!-- 阳光射线 -->
    <line id="ray" y1="-48" y2="-64" stroke="#f6c445" stroke-width="5" stroke-linecap="round"/>

    <!-- 路面虚线(图案,随地面滚动) -->
    <pattern id="roadDash" width="100" height="6" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="46" height="6" rx="3" fill="#f0eee6" opacity="0.9"/>
    </pattern>

    <!-- 草丛与小花(图案,随地面滚动) -->
    <pattern id="tuftPat" width="260" height="140" patternUnits="userSpaceOnUse">
    <g fill="none" stroke-linecap="round">
    <path d="M 20 47 C 17 39 12 37 10 33 M 20 47 C 20 37 20 35 20 31 M 20 47 C 23 39 28 38 30 34"
    stroke="#4d8f3d" stroke-width="2.5"/>
    <path d="M 165 47 C 162 39 157 37 155 33 M 165 47 C 165 37 165 35 165 31 M 165 47 C 168 39 173 38 175 34"
    stroke="#4d8f3d" stroke-width="2.5"/>
    <g>
    <path d="M 95 47 L 95 36" stroke="#4d8f3d" stroke-width="2"/>
    <circle cx="95" cy="33.5" r="4" fill="#f28fb8"/>
    <circle cx="95" cy="33.5" r="1.7" fill="#f7d24c"/>
    </g>
    <g>
    <path d="M 230 47 L 230 36" stroke="#4d8f3d" stroke-width="2"/>
    <circle cx="230" cy="33.5" r="4" fill="#fdf3f7"/>
    <circle cx="230" cy="33.5" r="1.7" fill="#f2b13c"/>
    </g>
    <path d="M 60 132 C 57 124 52 122 50 118 M 60 132 C 60 122 60 120 60 116 M 60 132 C 63 124 68 123 70 119"
    stroke="#4d8f3d" stroke-width="2.5"/>
    <g>
    <path d="M 200 132 L 200 121" stroke="#4d8f3d" stroke-width="2"/>
    <circle cx="200" cy="118.5" r="4" fill="#f28fb8"/>
    <circle cx="200" cy="118.5" r="1.7" fill="#f7d24c"/>
    </g>
    </g>
    </pattern>
    </defs>

    <!-- ===== 天空与太阳 ===== -->
    <rect x="0" y="0" width="900" height="360" fill="url(#skyGrad)"/>
    <circle cx="830" cy="72" r="48" fill="#f7ce5b" opacity="0.22"/>
    <g id="rays">
    <use href="#ray" transform="translate(830 72) rotate(0)"/>
    <use href="#ray" transform="translate(830 72) rotate(45)"/>
    <use href="#ray" transform="translate(830 72) rotate(90)"/>
    <use href="#ray" transform="translate(830 72) rotate(135)"/>
    <use href="#ray" transform="translate(830 72) rotate(180)"/>
    <use href="#ray" transform="translate(830 72) rotate(225)"/>
    <use href="#ray" transform="translate(830 72) rotate(270)"/>
    <use href="#ray" transform="translate(830 72) rotate(315)"/>
    </g>
    <circle cx="830" cy="72" r="36" fill="url(#sunGrad)"/>

    <!-- ===== 云朵(视差缓动) ===== -->
    <g id="cloud1" transform="translate(-100 78)" fill="#fff" opacity="0.95">
    <ellipse cx="0" cy="0" rx="30" ry="14"/>
    <ellipse cx="22" cy="-8" rx="24" ry="12"/>
    <ellipse cx="46" cy="2" rx="26" ry="11"/>
    </g>
    <g id="cloud2" transform="translate(320 118)" fill="#fff" opacity="0.9">
    <ellipse cx="0" cy="0" rx="38" ry="18"/>
    <ellipse cx="30" cy="-10" rx="28" ry="15"/>
    <ellipse cx="62" cy="2" rx="26" ry="13"/>
    </g>
    <g id="cloud3" transform="translate(660 62)" fill="#fff" opacity="0.65">
    <ellipse cx="0" cy="0" rx="24" ry="10"/>
    <ellipse cx="18" cy="-6" rx="18" ry="9"/>
    </g>

    <text x="28" y="52" font-family="'Comic Sans MS','Chalkboard SE','Segoe Print','Noto Sans SC',sans-serif"
    font-size="26" font-weight="700" fill="#2f6d9e">Pelican Peloton</text>
    <text x="30" y="76" font-family="'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif"
    font-size="15" fill="#5b93b8">鹈鹕单车队 · 全速前进!</text>

    <!-- 速度线 -->
    <rect x="150" y="300" width="84" height="5" rx="2.5" fill="#fff" opacity="0.3"/>
    <rect x="120" y="322" width="56" height="5" rx="2.5" fill="#fff" opacity="0.22"/>
    <rect x="170" y="344" width="70" height="5" rx="2.5" fill="#fff" opacity="0.26"/>
    <rect x="95" y="355" width="90" height="5" rx="2.5" fill="#fff" opacity="0.16"/>

    <!-- ===== 地面 ===== -->
    <rect x="0" y="360" width="900" height="140" fill="url(#grassGrad)"/>
    <rect x="0" y="410" width="900" height="60" fill="url(#roadGrad)"/>
    <rect x="0" y="410" width="900" height="4" fill="#eceade" opacity="0.9"/>
    <rect x="0" y="466" width="900" height="4" fill="#eceade" opacity="0.9"/>
    <g id="dashes">
    <rect x="0" y="437" width="900" height="6" fill="url(#roadDash)"/>
    </g>
    <g id="tufts">
    <rect x="0" y="360" width="900" height="140" fill="url(#tuftPat)"/>
    </g>

    <!-- ===== 远处的树 ===== -->
    <g id="tree1" transform="translate(-280 0)">
    <rect x="-5" y="372" width="10" height="36" rx="3" fill="#8a5a36"/>
    <circle cx="-22" cy="352" r="24" fill="#3f8f5c"/>
    <circle cx="0" cy="336" r="28" fill="#3f8f5c"/>
    <circle cx="22" cy="354" r="23" fill="#3f8f5c"/>
    <circle cx="-6" cy="326" r="12" fill="#55a86c" opacity="0.85"/>
    </g>
    <g id="tree2" transform="translate(100 0)">
    <rect x="-4" y="380" width="8" height="28" rx="3" fill="#8a5a36"/>
    <circle cx="-16" cy="362" r="18" fill="#4d9a66"/>
    <circle cx="0" cy="350" r="22" fill="#4d9a66"/>
    <circle cx="17" cy="364" r="17" fill="#4d9a66"/>
    <circle cx="-4" cy="342" r="9" fill="#63b079" opacity="0.85"/>
    </g>
    <g id="tree3" transform="translate(520 0)">
    <rect x="-5" y="372" width="10" height="36" rx="3" fill="#8a5a36"/>
    <circle cx="-20" cy="354" r="22" fill="#439563"/>
    <circle cx="0" cy="338" r="27" fill="#439563"/>
    <circle cx="21" cy="355" r="21" fill="#439563"/>
    <circle cx="-5" cy="328" r="11" fill="#5caf79" opacity="0.85"/>
    </g>

    <!-- 自行车影子 -->
    <ellipse cx="445" cy="452" rx="215" ry="9" fill="#000" opacity="0.13"/>

    <!-- ===== 鹈鹕左腿(远侧,位于车架之后) ===== -->
    <line id="thighF" x1="415" y1="250" x2="465" y2="310" stroke="#d97e48" stroke-width="11" stroke-linecap="round"/>
    <line id="shinF" x1="465" y1="310" x2="419" y2="385" stroke="#d98a52" stroke-width="9.5" stroke-linecap="round"/>
    <circle id="kneeF" cx="465" cy="310" r="4.5" fill="#d97e48"/>
    <g id="footF" transform="translate(419 385)">
    <path d="M 0 2 C 5 -2 13 -3 19 0 C 22 1 22 4 19 5 C 13 8 5 7 0 6 Z"
    fill="#e08a1c" stroke="#c96f1d" stroke-width="1.4"/>
    <path d="M 5 2 L 13 -1 M 5 4 L 13 6" stroke="#c96f1d" stroke-width="1.2" fill="none"/>
    </g>

    <!-- ===== 车轮 ===== -->
    <g>
    <g id="spokesR">
    <use href="#spoke" transform="translate(330 380) rotate(0)"/>
    <use href="#spoke" transform="translate(330 380) rotate(45)"/>
    <use href="#spoke" transform="translate(330 380) rotate(90)"/>
    <use href="#spoke" transform="translate(330 380) rotate(135)"/>
    <use href="#spoke" transform="translate(330 380) rotate(180)"/>
    <use href="#spoke" transform="translate(330 380) rotate(225)"/>
    <use href="#spoke" transform="translate(330 380) rotate(270)"/>
    <use href="#spoke" transform="translate(330 380) rotate(315)"/>
    </g>
    <circle cx="330" cy="380" r="49" fill="none" stroke="#b9c0c8" stroke-width="3"/>
    <circle cx="330" cy="380" r="55" fill="none" stroke="#2f3136" stroke-width="11"/>
    <circle cx="330" cy="380" r="7" fill="#2f3136"/>
    <circle cx="330" cy="380" r="2.6" fill="#e9c46a"/>
    </g>
    <g>
    <g id="spokesF">
    <use href="#spoke" transform="translate(560 380) rotate(0)"/>
    <use href="#spoke" transform="translate(560 380) rotate(45)"/>
    <use href="#spoke" transform="translate(560 380) rotate(90)"/>
    <use href="#spoke" transform="translate(560 380) rotate(135)"/>
    <use href="#spoke" transform="translate(560 380) rotate(180)"/>
    <use href="#spoke" transform="translate(560 380) rotate(225)"/>
    <use href="#spoke" transform="translate(560 380) rotate(270)"/>
    <use href="#spoke" transform="translate(560 380) rotate(315)"/>
    </g>
    <circle cx="560" cy="380" r="49" fill="none" stroke="#b9c0c8" stroke-width="3"/>
    <circle cx="560" cy="380" r="55" fill="none" stroke="#2f3136" stroke-width="11"/>
    <circle cx="560" cy="380" r="7" fill="#2f3136"/>
    <circle cx="560" cy="380" r="2.6" fill="#e9c46a"/>
    </g>

    <!-- ===== 远侧曲柄与踏板(车架之后) ===== -->
    <circle cx="445" cy="385" r="11" fill="none" stroke="#2f3136" stroke-width="4"/>
    <circle cx="445" cy="385" r="5.5" fill="none" stroke="#2f3136" stroke-width="2"/>
    <g id="chainDot">
    <circle cx="450" cy="385" r="2.2" fill="#e9c46a"/>
    </g>
    <line id="armF" x1="445" y1="385" x2="419" y2="385" stroke="#383c42" stroke-width="6" stroke-linecap="round"/>
    <g id="pedalF" transform="translate(419 385)">
    <rect x="-11" y="-3" width="22" height="6" rx="2.5" fill="#33373d"/>
    </g>

    <!-- ===== 车架 ===== -->
    <g stroke-linecap="round">
    <line x1="445" y1="374" x2="332" y2="371" stroke="#565c64" stroke-width="2.5"/>
    <line x1="445" y1="396" x2="332" y2="389" stroke="#565c64" stroke-width="2.5"/>
    <path d="M 268.9 369.2 A 62 62 0 0 1 391.1 369.2" fill="none" stroke="#e04f3a" stroke-width="7"/>
    <path d="M 498.9 369.2 A 62 62 0 0 1 621.1 369.2" fill="none" stroke="#e04f3a" stroke-width="7"/>
    <line x1="330" y1="380" x2="445" y2="385" stroke="#e04f3a" stroke-width="7"/>
    <line x1="330" y1="380" x2="420" y2="258" stroke="#e04f3a" stroke-width="6"/>
    <line x1="445" y1="385" x2="420" y2="258" stroke="#e04f3a" stroke-width="7"/>
    <line x1="445" y1="385" x2="535" y2="312" stroke="#e04f3a" stroke-width="7"/>
    <line x1="420" y1="258" x2="524" y2="238" stroke="#e04f3a" stroke-width="6"/>
    <line x1="535" y1="312" x2="524" y2="238" stroke="#2f3136" stroke-width="9"/>
    <line x1="535" y1="312" x2="560" y2="380" stroke="#2f3136" stroke-width="6"/>
    <line x1="524" y1="238" x2="554" y2="223" stroke="#2f3136" stroke-width="6"/>
    <path d="M 554 223 Q 572 215 583 226 Q 589 231 582 234" fill="none" stroke="#2f3136" stroke-width="7"/>
    <line x1="420" y1="258" x2="416" y2="247" stroke="#2f3136" stroke-width="5"/>
    </g>
    <ellipse cx="412" cy="243" rx="25" ry="9" transform="rotate(-6 412 243)" fill="#2f3136"/>
    <path d="M 390 240 Q 412 234 432 238" stroke="#4a4f57" stroke-width="2" fill="none"/>
    <circle cx="574" cy="212" r="5" fill="#f6c445" stroke="#d9a02e" stroke-width="1.5"/>
    <path d="M 574 217 L 574 221" stroke="#d9a02e" stroke-width="2" stroke-linecap="round"/>

    <!-- ===== 近侧曲柄与踏板(车架之前) ===== -->
    <line id="armN" x1="445" y1="385" x2="471" y2="385" stroke="#4a4e55" stroke-width="6" stroke-linecap="round"/>
    <g id="pedalN" transform="translate(471 385)">
    <rect x="-11" y="-3" width="22" height="6" rx="2.5" fill="#3b3f45"/>
    </g>

    <!-- ===== 鹈鹕右腿(近侧) ===== -->
    <line id="thighN" x1="425" y1="248" x2="485" y2="298" stroke="#f5a05e" stroke-width="13" stroke-linecap="round"/>
    <line id="shinN" x1="485" y1="298" x2="471" y2="385" stroke="#f7ab6a" stroke-width="11" stroke-linecap="round"/>
    <circle id="kneeN" cx="485" cy="298" r="5" fill="#f5a05e"/>
    <g id="footN" transform="translate(471 385)">
    <path d="M 0 2 C 5 -2 13 -3 19 0 C 22 1 22 4 19 5 C 13 8 5 7 0 6 Z"
    fill="#f5a623" stroke="#d9761f" stroke-width="1.4"/>
    <path d="M 5 2 L 13 -1 M 5 4 L 13 6" stroke="#d9761f" stroke-width="1.2" fill="none"/>
    </g>

    <!-- ===== 鹈鹕身体(整体随蹬踏起伏) ===== -->
    <g id="pelican" transform="translate(0 0) rotate(0 420 248)">
    <!-- 尾巴 -->
    <path d="M 328 216 L 288 198 L 314 222 L 278 214 L 306 232 L 292 240 L 332 244 Z" fill="#f3e7d6"/>
    <!-- 身体 -->
    <ellipse cx="398" cy="212" rx="80" ry="50" transform="rotate(-8 398 212)" fill="url(#bodyGrad)"/>
    <ellipse cx="382" cy="198" rx="30" ry="13" transform="rotate(-8 382 198)" fill="#fff" opacity="0.55"/>
    <!-- 远侧翅膀 -->
    <path d="M 432 188 C 400 177 362 184 340 196 C 364 204 398 206 430 203 Z" fill="#e6d1b8"/>
    <!-- 脖子 -->
    <path d="M 452 202 Q 490 168 500 150" fill="none" stroke="#e3cfae" stroke-width="34" stroke-linecap="round"/>
    <path d="M 452 202 Q 490 168 500 150" fill="none" stroke="#f8efe1" stroke-width="29" stroke-linecap="round"/>
    <!-- 红围巾(迎风飘动) -->
    <g id="scarf">
    <path d="M 458 190 C 432 186 404 190 372 184 C 390 196 420 198 458 197 Z" fill="#c93a34"/>
    <path d="M 458 188 C 430 180 398 188 360 176 C 380 192 415 196 458 196 Z" fill="#e0453f"/>
    </g>
    <!-- 冠羽 -->
    <path d="M 482 132 Q 466 118 470 104 Q 477 118 488 124 Z" fill="#f3e4cd"/>
    <path d="M 490 126 Q 480 116 484 108 Q 489 118 494 124 Z" fill="#ecdcbf"/>
    <!-- 上喙 -->
    <path d="M 528 136 C 570 120 602 118 614 125 C 618 127 617 132 612 135 C 592 144 560 149 530 153 Z"
    fill="url(#beakGrad)" stroke="#d9761f" stroke-width="1.5"/>
    <path d="M 530 147 C 558 152 588 147 604 137" stroke="#c96f1d" stroke-width="2.5" fill="none" stroke-linecap="round"/>
    <path d="M 540 133 Q 548 132 556 134" stroke="#c96f1d" stroke-width="2" fill="none" stroke-linecap="round"/>
    <!-- 喉囊(随节奏摇摆) + 小鱼 -->
    <g id="pouch">
    <path d="M 528 152 C 560 158 592 150 603 139 C 595 173 566 194 543 192 C 525 190 513 178 507 164 Z"
    fill="#f09a3c" stroke="#d9761f" stroke-width="2" opacity="0.93"/>
    <path d="M 520 160 C 540 172 570 176 590 162" stroke="#f7b84f" stroke-width="2.5" fill="none"
    opacity="0.8" stroke-linecap="round"/>
    <g transform="translate(556 172) rotate(-6)">
    <path d="M -11 0 L -19 -7 L -18 7 Z" fill="#4fb8e8"/>
    <ellipse cx="0" cy="0" rx="12.5" ry="6.5" fill="#63c6f2"/>
    <path d="M -3 -6 Q 0 -11 4 -7 Z" fill="#4fb8e8"/>
    <circle cx="6.5" cy="-1.5" r="1.7" fill="#123047"/>
    </g>
    </g>
    <!-- 头 -->
    <ellipse cx="505" cy="148" rx="32" ry="28" transform="rotate(-10 505 148)" fill="url(#bodyGrad)"/>
    <!-- 眼睛(周期性眨眼) -->
    <g id="eye">
    <circle cx="508" cy="140" r="8" fill="#fff"/>
    <circle cx="509.5" cy="140.5" r="4" fill="#22262b"/>
    <circle cx="507.5" cy="138.5" r="1.7" fill="#fff"/>
    </g>
    <!-- 小红帽 -->
    <ellipse cx="499" cy="119" rx="23" ry="9" transform="rotate(-14 499 119)" fill="#d64541"/>
    <circle cx="521" cy="113" r="4" fill="#d64541"/>
    <!-- 近侧翅膀(扶住车把) -->
    <g id="wingN">
    <path d="M 452 212 C 500 214 550 220 580 228 C 586 230 585 236 577 237 C 540 242 495 236 458 234 C 452 233 448 227 448 220 Z"
    fill="url(#wingGrad)"/>
    <path d="M 470 224 C 500 228 540 230 566 229" stroke="#dcc9ac" stroke-width="1.8" fill="none" opacity="0.8"/>
    <path d="M 462 218 C 490 220 530 222 566 222" stroke="#fdf6ec" stroke-width="2" fill="none" opacity="0.9"/>
    </g>
    </g>
    </svg>

    <script>
    (function () {
    var $ = function (id) { return document.getElementById(id); };

    // 自行车几何参数
    var CRANK_X = 445, CRANK_Y = 385, CRANK_R = 26; // 曲柄中心与半径
    var HIP_N = { x: 425, y: 248 }; // 近侧腿髋关节
    var HIP_F = { x: 415, y: 250 }; // 远侧腿髋关节
    var THIGH = 78, SHIN = 88; // 大腿 / 小腿长度
    var CRANK_SPEED = 6.5; // 蹬踏角速度 rad/s
    var SPEED = 150; // 前进速度 px/s
    var WHEEL_R = 55; // 轮子半径

    var els = {
    spokesR: $('spokesR'), spokesF: $('spokesF'),
    armN: $('armN'), armF: $('armF'),
    pedalN: $('pedalN'), pedalF: $('pedalF'),
    chainDot: $('chainDot'),
    thighN: $('thighN'), shinN: $('shinN'), kneeN: $('kneeN'), footN: $('footN'),
    thighF: $('thighF'), shinF: $('shinF'), kneeF: $('kneeF'), footF: $('footF'),
    pelican: $('pelican'), pouch: $('pouch'), wingN: $('wingN'),
    scarf: $('scarf'), eye: $('eye'),
    dashes: $('dashes'), tufts: $('tufts'), rays: $('rays')
    };

    // 云和树:逐组计算并循环回绕
    var clouds = [
    [$('cloud1'), 60, 78],
    [$('cloud2'), 480, 118],
    [$('cloud3'), 820, 62]
    ];
    var trees = [
    [$('tree1'), 60],
    [$('tree2'), 440],
    [$('tree3'), 860]
    ];

    function setLine(l, x1, y1, x2, y2) {
    l.setAttribute('x1', x1);
    l.setAttribute('y1', y1);
    l.setAttribute('x2', x2);
    l.setAttribute('y2', y2);
    }

    // 两段骨骼逆向运动学:大腿+小腿,脚必须踩在踏板上,膝盖朝前
    function solveIK(H, P) {
    var dx = P.x - H.x, dy = P.y - H.y;
    var d = Math.hypot(dx, dy);
    var dMax = THIGH + SHIN - 1.5;
    var dMin = Math.abs(THIGH - SHIN) + 1.5;
    if (d > dMax) d = dMax;
    else if (d < dMin) d = dMin;
    var a = Math.atan2(dy, dx);
    var cosPhi = (THIGH THIGH + d d - SHIN SHIN) / (2 THIGH * d);
    if (cosPhi > 1) cosPhi = 1;
    else if (cosPhi < -1) cosPhi = -1;
    var phi = Math.acos(cosPhi);
    var k1 = { x: H.x + THIGH Math.cos(a + phi), y: H.y + THIGH Math.sin(a + phi) };
    var k2 = { x: H.x + THIGH Math.cos(a - phi), y: H.y + THIGH Math.sin(a - phi) };
    return k1.x >= k2.x ? k1 : k2;
    }

    var t0 = performance.now();

    function frame(now) {
    var t = (now - t0) / 1000;
    var th = t * CRANK_SPEED; // 曲柄角
    var dist = t * SPEED; // 前进距离

    // 踏板位置(近侧 th,远侧 th+180°)
    var pn = { x: CRANK_X + CRANK_R Math.cos(th), y: CRANK_Y + CRANK_R Math.sin(th) };
    var pf = { x: CRANK_X + CRANK_R Math.cos(th + Math.PI), y: CRANK_Y + CRANK_R Math.sin(th + Math.PI) };

    // 车轮
    var wa = dist / WHEEL_R * 180 / Math.PI;
    els.spokesR.setAttribute('transform', 'rotate(' + wa + ' 330 380)');
    els.spokesF.setAttribute('transform', 'rotate(' + wa + ' 560 380)');

    // 曲柄与踏板
    setLine(els.armN, CRANK_X, CRANK_Y, pn.x, pn.y);
    setLine(els.armF, CRANK_X, CRANK_Y, pf.x, pf.y);
    els.pedalN.setAttribute('transform', 'translate(' + pn.x + ' ' + pn.y + ')');
    els.pedalF.setAttribute('transform', 'translate(' + pf.x + ' ' + pf.y + ')');
    els.chainDot.setAttribute('transform', 'rotate(' + (th * 180 / Math.PI) + ' ' + CRANK_X + ' ' + CRANK_Y + ')');

    // 腿(IK 保证脚不离踏板)
    var kn = solveIK(HIP_N, pn);
    var kf = solveIK(HIP_F, pf);
    setLine(els.thighN, HIP_N.x, HIP_N.y, kn.x, kn.y);
    setLine(els.shinN, kn.x, kn.y, pn.x, pn.y);
    els.kneeN.setAttribute('cx', kn.x);
    els.kneeN.setAttribute('cy', kn.y);
    els.footN.setAttribute('transform', 'translate(' + pn.x + ' ' + pn.y + ')');
    setLine(els.thighF, HIP_F.x, HIP_F.y, kf.x, kf.y);
    setLine(els.shinF, kf.x, kf.y, pf.x, pf.y);
    els.kneeF.setAttribute('cx', kf.x);
    els.kneeF.setAttribute('cy', kf.y);
    els.footF.setAttribute('transform', 'translate(' + pf.x + ' ' + pf.y + ')');

    // 身体起伏 + 轻微摇摆
    var bobY = 3 Math.sin(2 th + 0.6);
    var bobX = 1.2 * Math.sin(th);
    var rot = 1.4 Math.sin(2 th + 0.6);
    els.pelican.setAttribute('transform',
    'translate(' + bobX.toFixed(2) + ' ' + bobY.toFixed(2) + ') rotate(' + rot.toFixed(2) + ' 420 248)');

    // 喉囊摇摆 / 翅膀微动 / 围巾飘动 / 眨眼
    els.pouch.setAttribute('transform', 'rotate(' + (2.2 * Math.sin(th + 0.9)).toFixed(2) + ' 528 152)');
    els.wingN.setAttribute('transform', 'rotate(' + (-2 + 3 * Math.sin(th - 0.4)).toFixed(2) + ' 452 216)');
    els.scarf.setAttribute('transform', 'rotate(' + (7 Math.sin(2 th + 1)).toFixed(2) + ' 455 190)');
    var blink = (t % 4.2) < 0.13 ? 0.08 : 1;
    els.eye.setAttribute('transform',
    'translate(508 140) scale(1 ' + blink + ') translate(-508 -140)');

    // 地面滚动
    els.dashes.setAttribute('transform', 'translate(' + (-(dist % 100)).toFixed(1) + ' 0)');
    els.tufts.setAttribute('transform', 'translate(' + (-(dist % 260)).toFixed(1) + ' 0)');

    // 太阳光芒缓慢旋转
    els.rays.setAttribute('transform', 'rotate(' + (t * 10) + ' 830 72)');

    // 云(慢速视差)
    for (var i = 0; i < clouds.length; i++) {
    var cx = ((clouds[i][1] - dist * 0.3) % 1100 + 1100) % 1100 - 160;
    clouds[i][0].setAttribute('transform', 'translate(' + cx.toFixed(1) + ' ' + clouds[i][2] + ')');
    }
    // 树(与地面同速)
    for (var j = 0; j < trees.length; j++) {
    var tx = ((trees[j][1] - dist) % 1280 + 1280) % 1280 - 340;
    trees[j][0].setAttribute('transform', 'translate(' + tx.toFixed(1) + ' 0)');
    }

    requestAnimationFrame(frame);
    }

    requestAnimationFrame(frame);
    })();
    </script>
    </body>
    </html>
    ```不过说实在, 有点看运气, 第一次跑的(这次)就挺好, 第二次就有点一般, 同样的提示词

    主楼
  • ryuki

    (帖子已被作者删除)

    #1
  • SherkeyXD

    绷不住了 我刚用 api 没开 max 测出来长这样

    图片

    然后我让他重新生成一个

    图片

    图片

    变这样了

    图片

    #2
  • lovesusu

    你这也太夸张了,我第二次测的也没那么差

    开max试试看

    #3
  • 大树

    看到佬的测试,大半夜都笑醒了!!

    #4
  • 安恩

    这效果比之前确实好很多了,尤其是脚的动作

    #5
  • lovesusu

    图片

    这是第二次测试的结果, 同样的提示词

    #6
  • 梦_良辰

    佬接了视觉的mcp吗,感觉生成的质量不错啊

    #7
  • SherkeyXD

    果然开 max 正常多了

    图片

    #8
  • lovesusu

    没接,也没加skills,你看我第二次的结果的就知道

    单纯就是第一次运气好,质量不稳定

    #9
  • Angel

    绷不住了 我刚用 api 没开 max 测出来长这样

    图片
    然后我让他重新生成一个

    图片

    图片

    变这样了

    图片

    哈哈哈 这他喵的 绝对是来搞笑的^-^^-^^-^^-^^-^

    #10
  • Kinney_Lorraine

    来个华丽静态

    图片

    #11
  • sallyn

发表回复

登录后回复